CSS Grid Layout Module Level 2

https://www.w3.org/TR/css-grid-2/
Admin
A two-dimensional grid-based CSS layout system that enables positioning elements in flexible or...
Tokens:41,814
Snippets:225
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### HTML form list for subgrid example

Source: https://www.w3.org/TR/css-grid-2

HTML structure for a form with labels and inputs, used as the example for subgrid layout.

```html
<ul>
  <li><label>Name:</label> <input name=fn>
  <li><label>Address:</label> <input name=address>
  <li><label>Phone:</label> <input name=phone>
</ul>

```

--------------------------------

### Grid line diagram for placement examples

Source: https://www.w3.org/TR/css-grid-2

A diagram of a single-row, 8-column grid with 9 named lines (A, B, C repeated). It is used as a reference for the subsequent placement examples.

```text
1  2  3  4  5  6  7  8  9
+--+--+--+--+--+--+--+--+
|  |  |  |  |  |  |  |  |
A  B  C  A  B  C  A  B  C
|  |  |  |  |  |  |  |  |
+--+--+--+--+--+--+--+--+

```

--------------------------------

### CSS grid placement examples with line numbers and named lines

Source: https://www.w3.org/TR/css-grid-2

A set of CSS grid placement declarations with comments showing the resulting line positions. Includes error cases where the end span is ignored or the start and end lines are equal.

```css
grid-column-start: 4; grid-column-end: auto;
/* Line 4 to line 5 */

grid-column-start: auto; grid-column-end: 6;
/* Line 5 to line 6 */

grid-column-start: C; grid-column-end: C -1;
/* Line 3 to line 9 */

grid-column-start: C; grid-column-end: span C;
/* Line 3 to line 6 */

grid-column-start: span C; grid-column-end: C -1;
/* Line 6 to line 9 */

grid-column-start: span C; grid-column-end: span C;
/* Error: The end span is ignored, and an auto-placed
   item can’t span to a named line.
   Equivalent to ''grid-column: span 1;''. */

grid-column-start: 5; grid-column-end: C -1;
/* Line 5 to line 9 */

grid-column-start: 5; grid-column-end: span C;
/* Line 5 to line 6 */

grid-column-start: 8; grid-column-end: 8;
/* Error: line 8 to line 9 */

grid-column-start: B 2; grid-column-end: span 1;
/* Line 5 to line 6 */

```

--------------------------------

### Grid-area shorthand placement examples

Source: https://www.w3.org/TR/css-grid-2

Shows various grid-area shorthand placements: named area, auto, row/column coordinates, spanning all rows, and named lines.

```css
grid-area: a;          /* Place into named grid area “a”     */
grid-area: auto;       /* Auto-place into next empty area    */
grid-area: 2 / 4;      /* Place into row 2, column 4         */
grid-area: 1 / 3 / -1; /* Place into column 3, span all rows */
grid-area: header-start / sidebar-start / footer-end / sidebar-end;
                       /* Place using named lines            */

```

--------------------------------

### Equivalent grid-row and grid-column declarations

Source: https://www.w3.org/TR/css-grid-2

Equivalent grid-row and grid-column declarations for the grid-area examples above.

```css
grid-row: a;                         grid-column: a;
grid-row: auto;                      grid-column: auto;
grid-row: 2;                         grid-column: 4;
grid-row: 1 / -1;                    grid-column: 3;
grid-row: header-start / footer-end; grid-column: sidebar-start / sidebar-end;

```

--------------------------------

### Subgrid track sizing example

Source: https://www.w3.org/TR/css-grid-2

Shows a 3x3 grid with tracks 300px, auto, and 300px, and a subgrid covering the last two tracks. The second block positions the subgrid and its first child to demonstrate how items in the subgrid participate in sizing the parent grid's auto track.

```css
#parent-grid { grid-template-columns: 300px auto 300px; }
```

```css
#subgrid { grid-column: 2 / span 2; } /* cover parent’s 2nd and 3rd tracks */
#subgrid > :first-child { grid-column: 1; } /* subgrid’s 1st track, parent grid’s 2nd track */
```

--------------------------------

### Subgrid line name resolution example

Source: https://www.w3.org/TR/css-grid-2

Shows a nested subgrid example where the outer grid defines explicit line names and implicit ones from grid-template-areas, and the middle and inner grids use `grid: subgrid / subgrid` to inherit those names. The second block lists the resolved line names for each grid after all name resolution.

```html
<style type="css">
  .outer {
    display: grid;
    grid-template-columns:
      [outer-edge] 20px [main-start] 1fr [center] 1fr max-content [main-end];
    grid-template-areas:
      "gutter info info photos";
  }
  .middle {
    grid-column: main-start / main-end;
    display: grid;
    grid: subgrid / subgrid;
  }
  .inner {
    grid-column: center / -1;
    display: grid;
    grid: subgrid / subgrid;
  }
</style>

<div class="outer">
  <div class="middle">
    <div class="inner">&hellip;</div>
  </div>
</div>
```

```text
.outer = [outer-edge gutter-start] [gutter-end info-start main-start] [center] [info-end photos-start] [main-end photos-end]
.middle = [info-start main-start] [center] [info-end photos-start] [main-end photos-end]
.inner = [center info-start] [info-end photos-start] [main-end photos-end]
```

--------------------------------

### Position grid item using named lines

Source: https://www.w3.org/TR/css-grid-2

Creates the same layout as the previous example but uses explicitly named grid lines. The `item1-start` and `item1-end` names are used in the `grid-column` and `grid-row` properties to place the item.

```css
/* equivalent layout to the prior example, but using named lines */
#grid {
  display: grid;
  grid-template-columns: 150px [item1-start] 1fr [item1-end];
  grid-template-rows: [item1-start] 50px 1fr 50px [item1-end];
}

#item1 {
  grid-column: item1-start / item1-end;
  grid-row: item1-start / item1-end;
}

```

--------------------------------

### Holy Grail Layout page markup sketch

Source: https://www.w3.org/TR/css-grid-2

Sketch of a page's markup for the Holy Grail Layout example, showing the source order of header, main, nav, aside, and footer.

```html
<!DOCTYPE html>
<header>...</header>
<main>...</main>
<nav>...</nav>
<aside>...</aside>
<footer>...</footer>

```

--------------------------------

### CSS Grid: Implicit column creation with grid-column: 4 / span 3

Source: https://www.w3.org/TR/css-grid-2

CSS Grid example showing how an item with grid-column: 4 / span 3 requires an additional implicit column when the explicit grid has only 5 columns. The grid-auto-flow: row property is set, and the example illustrates the implicit grid column creation step of the grid item placement algorithm.

```css
#grid {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-auto-flow: row;
}
#grid-item {
  grid-column: 4 / span 3;
}

```

--------------------------------

### Grid items example with block, float, and inline children

Source: https://www.w3.org/TR/css-grid-2

Shows how in-flow children of a grid container become grid items, including block, floated, anonymous, and inline children. Floating is ignored on grid items, and inline content is wrapped in anonymous block boxes.

```html
<div style="display: grid">

  <!-- grid item: block child -->
  <div id="item1">block</div>

  <!-- grid item: floated element; floating is ignored -->
  <div id="item2" style="float: left;">float</div>

  <!-- grid item: anonymous block box around inline content -->
  anonymous item 3

  <!-- grid item: inline child -->
  <span>
    item 4
    <!-- grid items do not split around blocks -->
    <q style="display: block" id=not-an-item>item 4</q>
    item 4
  </span>
</div>
```

--------------------------------

### Auto-fill columns with minmax()

Source: https://www.w3.org/TR/css-grid-2

Creates as many 25-character columns as fit into the window width, distributing remaining space among them. Uses auto-fill with minmax(25ch, 1fr).

```css
body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr));
}
```

--------------------------------

### Specify grid-row spans with start and end lines

Source: https://www.w3.org/TR/css-grid-2

Shows two ways to specify a span with grid-row: starting at a line and spanning forward, or ending at a line and spanning backward. The comments clarify the resulting row positions.

```css
.three {
  grid-row: 2 / span 5;
  /* Starts in the 2nd row,
     spans 5 rows down (ending in the 7th row). */
}

.four {
  grid-row: span 5 / 7;
  /* _Ends_ in the 7th row,
     spans 5 rows up (starting in the 2nd row). */
}

```

--------------------------------

### Equivalent grid definitions using repeat()

Source: https://www.w3.org/TR/css-grid-2

Two equivalent ways to define a grid with four 250px main columns surrounded by 10px gutters. The first uses explicit track listing; the second uses the repeat() notation for a more compact form.

```css
grid-template-columns: 10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end] 10px;
/* same as above, except easier to write */
grid-template-columns: repeat(4, 10px [col-start] 250px [col-end]) 10px;
```

--------------------------------

### Naming grid lines with grid-template-columns and grid-template-rows

Source: https://www.w3.org/TR/css-grid-2

Assigns meaningful names to grid lines using the grid-template-columns and grid-template-rows properties. Some lines have multiple names, as shown in the example. The <custom-ident> cannot be 'span' or 'auto'.

```css
#grid {
  display: grid;
  grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
  grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
}
```

--------------------------------

### Clamping grid item placement to a limited grid

Source: https://www.w3.org/TR/css-grid-2

Shows how a UA with a 1000-track limit clamps a grid item's placement. The first block is the original placement; the second is the clamped equivalent.

```css
.grid-item {
  grid-row: 500 / 1500;
  grid-column: 2000 / 3000;
}

```

```css
.grid-item {
  grid-row: 500 / 1001;
  grid-column: 1000 / 1001;
}

```

--------------------------------

### grid-template shorthand for rows and columns

Source: https://www.w3.org/TR/css-grid-2

Shows the grid-template shorthand for setting rows and columns, and its equivalent longhand expansion. The shorthand sets grid-template-areas to none.

```css
grid-template: auto 1fr / auto 1fr auto;
```

```css
grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr auto;
grid-template-areas: none;
```

--------------------------------

### Partially align item with named area using grid-row-start

Source: https://www.w3.org/TR/css-grid-2

Partially aligns an item with a named grid area by setting grid-row-start to the area's name. The comment notes that the row-start edge aligns to the start edge of the "main" named area.

```css
.one {
  grid-row-start: main;
  /* Align the row-start edge to the start edge of the "main" named area. */
}

```

--------------------------------

### CSS Grid placement with named span and line number

Source: https://www.w3.org/TR/css-grid-2

Shows a grid container with one column and a grid item placed using a named span and a line number. The example illustrates how implicit grid lines are generated when a named line is not found in the explicit grid.

```css
.grid { grid-template-columns: 100px; }
.griditem { grid-column: span foo / 4; }

```

--------------------------------

### grid-template shorthand with named areas

Source: https://www.w3.org/TR/css-grid-2

Shows the grid-template shorthand that defines named areas and inline track sizes, and its equivalent longhand expansion. The shorthand sets grid-template-areas to the strings, grid-template-rows to the track sizes with named lines, and grid-template-columns to the track listing after the slash.

```css
grid-template: [header-top] "a   a   a"     [header-bottom]
                 [main-top] "b   b   b" 1fr [main-bottom]
                          / auto 1fr auto;
```

```css
grid-template-areas: "a a a"
                     "b b b";
grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];
grid-template-columns: auto 1fr auto;
```
Tokens:
Raw