Declaring the Grid
Grid Exampule 3

H

grid-area

Exanpuie 3-1

A
B
C
F 
content {
  display: grid;
  grid-gap:3px;
  grid: "H    H    B" 150px
        "A    C    B" 
        "F    F    F" 80px   /*  rows  area  height   */
    /  1fr  auto  1fr;       /*  columns_width        */
}

#h { grid-area: H; }
#f { grid-area: F; }
#a { grid-area: A; }
#b { grid-area: B; }
#c { grid-area: C; }
1

repeat
Exanpuie 3-2

Publication as a Candidate Recommendation does not imply endorsement by the W3C Membership.

2

It is inappropriate to cite this document as other than work in progress.

3
4

5
6
7
8

9

This is a draft document and may be updated, replaced or obsoleted by other documents at any time.

10
content {
  display: grid;
  grid-gap:3px;
  grid: auto 1fr/ repeat(2, 1fr 1fr);
     /*   rows  /    columns          */
}

auto-fill

Exanpuie 3-3

1

The following declares a grid with as many rows of at least 5em as will fit in the height of the grid container (100vh).

Publication as a Candidate

2
3

The tracks (rows and columns) of the grid are declared and sized either explicitly through the explicit

4
5
6
7

he tracks (rows and columns) of the grid are declared and sized either explicitly through the explicit grid properties or are implicitly created when items are placed outside the explicit grid.

8
content {
  display: grid;
  grid-gap: 3px;
  grid: auto-flow 1fr / repeat(auto-fill, minmax(300px, 1fr));
  /*       rows    /        columns                       */ 
}

next Grid Exanpule 4.html