CSS Grid Layout

https://www.w3.org/TR/css-grid-1/
Admin
CSS Grid Layout is a two-dimensional grid-based layout system for CSS that enables developers to...
Tokens:43,420
Snippets:253
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Grid line diagram for placement examples

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

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

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

```

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

### CSS Grid: grid-column placement examples with comments

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

A set of grid-column-start and grid-column-end declarations with comments showing the resulting line positions. Includes error cases where the placement is invalid or auto-placed.

```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 placement examples

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

Shows various grid-area shorthand placements: named area, auto-placement, 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            */

```

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

### Grid items example

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

Example of grid items: a block child and a floated element (floating is ignored).

```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>

```

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

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

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

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;

```

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

### Position grid item using named lines

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

Creates the same layout as the previous example but uses explicitly named grid lines. The named lines item1-start and item1-end are defined in both the column and row templates, and #item1 is placed using those names.

```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;
}
```

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

### grid-template-columns with mixed track sizes

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

Declares a grid with four columns: a fixed 100px track, a flexible 1fr track, a max-content track, and a minmax() track with a min-content minimum and 1fr maximum. The example illustrates how five grid lines are created and how flexible tracks share free space.

```css
grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
```

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

### Resolved grid-template-columns value example

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

Demonstrates the resolved value of grid-template-columns for a grid container, showing implicit tracks serialized as explicit pixel lengths and adjacent line names collapsed.

```html
<style>
#grid {
  width: 500px;
  grid-template-columns:
    [a]     auto
    [b]     minmax(min-content, 1fr)
    [b c d] repeat(2, [e] 40px)
            repeat(5, auto);
}
</style>
<div id="grid">
  <div style="grid-column-start: 1; width: 50px"></div>
  <div style="grid-column-start: 9; width: 50px"></div>
</div>
<script>
  var gridElement = document.getElementById("grid");
  getComputedStyle(gridElement).gridTemplateColumns;
  // [a] 50px [b] 320px [b c d e] 40px [e] 40px 0px 0px 0px 0px 50px
</script>
```

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

### CSS Grid: span with custom-ident example

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

Shows a grid container with one 100px column and a grid item placed using the span keyword with a custom-ident. 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; }

```

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

### CSS Grid: Implicit Grid Column Creation Example

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

CSS fragment illustrating the implicit grid column creation step. The grid has five explicit columns and the item spans from column 4 to column 6, requiring an extra implicit column at the end.

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

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

### CSS Grid layout for game components with grid-template and grid-row/column

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

CSS Grid layout example that defines a two-column, three-row grid and positions five game components (title, score, stats, board, controls) to meet the author's sizing, placement, and alignment rules. The HTML markup provides the corresponding grid items with the IDs referenced by the CSS selectors.

```css
/**
 * Define the space for each grid item by declaring the grid
 * on the grid container.
 */
#grid {
  /**
   * Two columns:
   *  1. the first sized to content,
   *  2. the second receives the remaining space
   *     (but is never smaller than the minimum size of the board
   *     or the game controls, which occupy this column [Figure 4])
   *
   * Three rows:
   *  3. the first sized to content,
   *  4. the middle row receives the remaining space
   *     (but is never smaller than the minimum height
   *      of the board or stats areas)
   *  5. the last sized to content.
   */
  display: grid;
  grid-template-columns:
    /* 1 */ auto
    /* 2 */ 1fr;
  grid-template-rows:
    /* 3 */ auto
    /* 4 */ 1fr
    /* 5 */ auto;
}

/* Specify the position of each grid item using coordinates on
 * the 'grid-row' and 'grid-column' properties of each grid item.
 */
#title    { grid-column: 1; grid-row: 1; }
#score    { grid-column: 1; grid-row: 3; }
#stats    { grid-column: 1; grid-row: 2; align-self: start; }
#board    { grid-column: 2; grid-row: 1 / span 2; }
#controls { grid-column: 2; grid-row: 3; justify-self: center; }
```

```html
<div id="grid">
  <div id="title">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="controls">Controls</div>
</div>
```

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

### Auto-fill columns with minmax()

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

Creates as many 25-character columns as fit into the window width using auto-fill with minmax(). Remaining space is distributed among the columns.

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

```

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

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

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

Shows two ways to specify spans with grid-row: starting at a line and spanning forward, or ending at a line and spanning backward. The comments explain 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-1

Shows two equivalent ways to define a grid with four 250px main columns surrounded by 10px gutters. The repeat() notation compacts the repeated track list.

```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;

```

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

### Clamping grid placement to UA limit

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

Shows how a UA with a 1000-track limit clamps placement properties that would exceed the implicit grid. 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;
}

```

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

### Valid grid-template-rows track definitions

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

Shows several valid grid-template-rows declarations using flexible, minmax(), repeat(), and calc() track sizes. The comment indicates these are examples of valid track definitions.

```css
/* examples of valid track definitions */
grid-template-rows: 1fr minmax(min-content, 1fr);
grid-template-rows: 10px repeat(2, 1fr auto minmax(30%, 1fr));
grid-template-rows: calc(4em - 5px);
```

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

### Align row-start edge to named area with grid-row-start

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

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. */
}

```

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

### Auto-fill rows with auto-flow columns and print variant

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

Creates a grid with as many 5em rows as fit in 100vh, auto-flowing columns equalized at 1fr. The @media print block switches to auto-flow rows for printing.

```css
main {
  display: grid;
  grid: repeat(auto-fill, 5em) / auto-flow 1fr;
  height: 100vh;
}
@media print {
  display: grid;
  main {
    grid: auto-flow 1fr / repeat(auto-fill, 5em);
  }
}

```
Tokens:
Raw