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

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

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

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

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

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

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

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

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

```

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

### 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 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));
}

```

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

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

```

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

### 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);
  }
}

```

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

### grid-template with inline track names and sizes

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

Demonstrates the grid-template syntax that aligns track names and sizes inline with grid areas. The first declaration is equivalent to the longhand properties that follow, which set grid-template-areas, grid-template-rows, and grid-template-columns.

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

```

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

### HTML source order for Holy Grail Layout

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

Sketch of a page's source code with header, main, nav, aside, and footer elements. The main content appears before the additional columns in the source order, which is desirable for accessibility and logical ordering.

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

```

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

### grid-template shorthand with rows and columns

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

Shows the grid-template shorthand setting rows and columns while resetting grid-template-areas to none. The first line is equivalent to the three longhand declarations that follow.

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

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

```

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

### Index named lines with grid-row and span

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

Shows how to index named lines by filtering with a name and number, and how to use a span with a named line. The comments explain that both declarations are equivalent.

```css
.six {
  grid-row: text 5 / text 7;
  /* Span between the 5th and 7th lines named "text". */
  grid-row: text 5 / span text 2;
  /* Same as above - start at the 5th line named "text",
     then span across two more "text" lines, to the 7th. */
}

```

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

### Generic repeat() syntax

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

Generic form of the repeat() syntax. The first argument is the number of repetitions (integer, auto-fill, or auto-fit) and the second is a track list to repeat. Restrictions: cannot be nested, and auto-fill/auto-fit cannot combine with fully intrinsic or flexible sizes.

```css
repeat( [ <integer [1,∞]> | auto-fill | auto-fit ] , <track-list> )

```

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

### Grid with auto rows and five equal columns

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

Declares a grid with 5 evenly-sized columns and three rows. The middle row takes remaining space (1fr) while top and bottom rows are auto-sized.

```css
main {
  display: grid;
  grid: auto 1fr auto / repeat(5, 1fr);
  min-height: 100vh;
}

```

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

### grid: auto-flow 1fr / 100px equivalent longhands

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

Equivalent longhand declarations for the grid shorthand `grid: auto-flow 1fr / 100px;`. Sets explicit columns to 100px, auto-flow to row, and auto-rows to 1fr.

```css
grid-template: none / 100px;
grid-auto-flow: row;
grid-auto-rows: 1fr;
grid-auto-columns: auto;
```

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

### Source-Order Independence with Grid Areas and Media Queries

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

Uses grid-template-areas to define named areas and grid-area to place items, with media queries for portrait and landscape orientations. The HTML markup provides the semantic structure that the CSS reorders visually without changing source order.

```css
@media (orientation: portrait) {
  #grid {
    display: grid;

    /* The rows, columns and areas of the grid are defined visually
     * using the grid-template-areas property.  Each string is a row,
     * and each word an area.  The number of words in a string
     * determines the number of columns. Note the number of words
     * in each string must be identical. */
    grid-template-areas: "title stats"
                         "score stats"
                         "board board"
                         "ctrls ctrls";

    /* The way to size columns and rows can be assigned with the
     * grid-template-columns and grid-template-rows properties. */
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr auto;
  }
}

@media (orientation: landscape) {
  #grid {
    display: grid;

    /* Again the template property defines areas of the same name,
     * but this time positioned differently to better suit a
     * landscape orientation. */
    grid-template-areas: "title board"
                         "stats board"
                         "score ctrls";

    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
  }
}

/* The grid-area property places a grid item into a named
 * area of the grid. */
#title    { grid-area: title }
#score    { grid-area: score }
#stats    { grid-area: stats }
#board    { grid-area: board }
#controls { grid-area: ctrls }
```

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

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

### Decomposing grid-area into longhands

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

Shows how grid-area decomposes into the grid-row-start/grid-row-end/grid-column-start/grid-column-end longhands.

```css
grid-area: a;
/* Equivalent to grid-row-start: a; grid-column-start: a; grid-row-end: a; grid-column-end: a; */

grid-area: 1 / 3 / -1;
/* Equivalent to grid-row-start: 1; grid-column-start: 3; grid-row-end: -1; grid-column-end: auto; */

```

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

### grid: none / auto-flow 1fr equivalent longhands

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

Equivalent longhand declarations for the grid shorthand `grid: none / auto-flow 1fr`. Sets explicit rows to none, auto-flow to column, and auto-columns to 1fr.

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

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

### Define grid tracks with fixed and flexible sizing

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

Defines a grid with two columns and three rows. The first column is fixed at 150px; the second column uses flexible sizing (1fr) and varies with the container width, potentially causing overflow when the container is too narrow.

```css
#grid {
  display: grid;
  grid-template-columns: 150px 1fr;  /* two columns */
  grid-template-rows: 50px 1fr 50px; /* three rows  */
}
```

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

### Media query for narrow screens

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

Media query that switches to an all-vertical layout on narrow screens (max-width: 60em) by setting body to display: block. This is combined with the grid layout to provide responsive behavior.

```css
@media all and (max-width: 60em) {
  /* Too narrow to support three columns */
  body { display: block; }
}

```

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

### Grid with named areas and mixed track sizing

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

Declares a grid with four named areas (H, A, B, F). The first column is auto-sized, the second takes remaining space (1fr), and the last row is fixed at 30px.

```css
main {
  display: grid;
  grid: "H    H "
        "A    B "
        "F    F " 30px
  /     auto 1fr;
}

```

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

### Create page layout with grid-template-areas

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

Defines a page layout with named grid areas for header, navigation, main content, and footer. The template creates three rows and two columns; the head area spans both columns in the first row, and the null cell token is represented by four dots. Each child element is assigned to its area using the grid-area property.

```css
#grid {
  display: grid;
  grid-template-areas: "head head"
                       "nav  main"
                       "foot ...."
}
#grid > header { grid-area: head; }
#grid > nav    { grid-area: nav; }
#grid > main   { grid-area: main; }
#grid > footer { grid-area: foot; }

```

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

### CSS grid layout for Holy Grail Layout

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

CSS grid layout that achieves the Holy Grail Layout by placing the main content in the center column (grid-area: b), with nav on the left (a) and aside on the right (c). The grid-template-columns uses auto, 1fr, and 20% to size the columns, and the columns are equal-height by default.

```css
body { display: grid;
       grid: "h h h"
             "a b c"
             "f f f";
       grid-template-columns: auto 1fr 20%; }
main    { grid-area: b; min-width: 12em;     }
nav     { grid-area: a; /* auto min-width */ }
aside   { grid-area: c; min-width: 12em;     }

```

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

### Overlapping grid items with z-index

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

Shows how to control the stacking order of overlapping grid items using a combination of implicit source order and explicit z-index values. The grid uses two columns and two rows, with items A through E positioned via grid-column, grid-row, and alignment properties; item B has z-index: 10 and item E has z-index: 5, while negative margins and alignment create overlaps.

```html
<style type="text/css">
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
}
#A { grid-column: 1 / span 2; grid-row: 2; align-self: end; }
#B { grid-column: 1; grid-row: 1; z-index: 10; }
#C { grid-column: 2; grid-row: 1; align-self: start; margin-left: -20px; }
#D { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }
#E { grid-column: 1 / span 2; grid-row: 1 / span 2;
     z-index: 5; justify-self: center; align-self: center; }
</style>

<div id="grid">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
  <div id="E">E</div>
</div>
```

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

### Grid alignment with space-around and space-between affecting spanning items

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

Shows how space-around and space-between alignment values add extra space between tracks, which can increase a spanning item's grid area to accommodate the gutters. The wrapper defines a 3-row by 4-column auto-sized grid with a 10px gap, and the items span multiple tracks while the last two auto-place.

```css
.wrapper {
  display: grid;
  /* 3-row / 4-column grid container */
  grid: repeat(3, auto) / repeat(4, auto);
  gap: 10px;
  align-content: space-around;
  justify-content: space-between;
}

.item1 { grid-column: 1 / 5; }
.item2 { grid-column: 1 / 3; grid-row: 2 / 4; }
.item3 { grid-column: 3 / 5; }
/* last two items auto-place into the last two grid cells */
```

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

### repeat() grammar forms

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

Precise grammar forms for repeat(): <track-repeat> for any track size with fixed repetitions, <auto-repeat> for automatic fill with definite sizes, and <fixed-repeat> for fixed repetitions with fixed sizes. Adjacent line names are merged when a repeat() places them next to each other.

```css
<track-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<auto-repeat>  = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<fixed-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

```

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

### Auto-place item with grid-area: auto

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

Uses the initial value auto for grid-area to automatically place the item into the next available empty grid cell. The comment notes that auto is the initial value.

```css
.eight {
  grid-area: auto; /* Initial value */
}

```

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

### Naming grid lines with custom-ident syntax

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

Assigns meaningful names to grid lines using the <custom-ident>* syntax in grid-template-columns and grid-template-rows. Some lines have multiple names, and line names 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];
}

```

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

### Define grid areas with grid-template-areas and align items

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

Defines a named grid area layout using grid-template-areas and assigns items to areas with grid-area. Items 2 and 3 share area "b" and are aligned differently with align-self and justify-self to avoid overlapping.

```css
/* using the template syntax */
#grid  {
  display: grid;
  grid-template-areas: ". a"
                       "b a"
                       ". a";
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 50px;
  height: 100vh;
}

#item1 { grid-area: a }
#item2 { grid-area: b }
#item3 { grid-area: b }

/* Align items 2 and 3 at different points in the grid area "b".  */
/* By default, grid items are stretched to fit their grid area    */
/* and these items would layer one over the other. */
#item2 { align-self: start; }
#item3 { justify-self: end; align-self: end; }
```

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

### Place item into named grid area with grid-area

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

Places an item into a named grid area by specifying the area's name in the grid-area property. The comment explains that the item is placed into the named area "main".

```css
article {
  grid-area: main;
  /* Places item into the named area "main". */
}

```

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

### Auto-place item with span using grid-area

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

Combines auto-placement with an explicit span using grid-area. The comment explains that the item covers two rows and three columns.

```css
.nine {
  grid-area: span 2 / span 3;
  /* Auto-placed item, covering two rows and three columns. */
}

```

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

### Position item by numeric indexes with grid-row and grid-column

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

Positions a grid item by numeric indexes using grid-row and grid-column. The comment notes that this is equivalent to grid-area: 2 / 3;.

```css
.two {
  grid-row: 2;    /* Place item in the second row. */
  grid-column: 3; /* Place item in the third column. */
  /* Equivalent to grid-area: 2 / 3; */
}

```

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

### Align grid tracks with justify-content and align-content

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

Aligns the grid tracks to the right edge (justify-content: end) and centers them vertically (align-content: center) within the grid container. The grid has four fixed 12rem rows and four fixed 10rem columns, with a min-height of 60rem to provide extra space for alignment.

```css
.grid {
  display: grid;
  grid: 12rem 12rem 12rem 12rem / 10rem 10rem 10rem 10rem;
  justify-content: end;
  align-content: center;
  min-height: 60rem;
}
```

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

### Automatic placement with grid-auto-flow: row dense

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

CSS and HTML for a form that uses automatic grid placement with grid-auto-flow: row dense. The CSS defines three named columns (labels, controls, oversized) and places labels, inputs, selects, a department block spanning three rows, and a button area spanning the full grid width. The HTML provides the corresponding form markup with the referenced IDs.

```html
<style type="text/css">
form {
  display: grid;
  /* Define three columns, all content-sized,
     and name the corresponding lines. */
  grid-template-columns: [labels] auto [controls] auto [oversized] auto;
  grid-auto-flow: row dense;
}
form > label {
  /* Place all labels in the "labels" column and
     automatically find the next available row. */
  grid-column: labels;
  grid-row: auto;
}
form > input, form > select {
  /* Place all controls in the "controls" column and
     automatically find the next available row. */
  grid-column: controls;
  grid-row: auto;
}

#department-block {
  /* Auto place this item in the "oversized" column
     in the first row where an area that spans three rows
     won’t overlap other explicitly placed items or areas
     or any items automatically placed prior to this area. */
  grid-column: oversized;
  grid-row: span 3;
}

/* Place all the buttons of the form
   in the explicitly defined grid area. */
#buttons {
  grid-row: auto;

  /* Ensure the button area spans the entire grid element
     in the inline axis. */
  grid-column: 1 / -1;
  text-align: end;
}
</style>
```

```html
<form>
  <label for="firstname">First name:</label>
  <input type="text" id="firstname" name="firstname">
  <label for="lastname">Last name:</label>
  <input type="text" id="lastname" name="lastname">
  <label for="address">Address:</label>
  <input type="text" id="address" name="address">
  <label for="address2">Address 2:</label>
  <input type="text" id="address2" name="address2">
  <label for="city">City:</label>
  <input type="text" id="city" name="city">
  <label for="state">State:</label>
  <select type="text" id="state" name="state">
    <option value="WA">Washington</option>
  </select>
  <label for="zip">Zip:</label>
  <input type="text" id="zip" name="zip">

  <div id="department-block">
    <label for="department">Department:</label>
    <select id="department" name="department" multiple>
      <option value="finance">Finance</option>
      <option value="humanresources">Human Resources</option>
      <option value="marketing">Marketing</option>
    </select>
  </div>

  <div id="buttons">
    <button id="cancel">Cancel</button>
    <button id="back">Back</button>
    <button id="next">Next</button>
  </div>
</form>
```

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

### Justify columns and center grid with align-content

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

Use to distribute extra space between columns and center the grid when the container is smaller than 100vh. The align-content value 'safe center' prevents content from overflowing when the grid is larger than the container.

```css
main {
  display: grid;
  grid: auto-flow auto / repeat(auto-fill, 5em);
  min-height: 100vh;
  justify-content: space-between;
  align-content: safe center;
}
```

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

### Positioning an absolutely positioned element within a grid container

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

Defines a grid container with four equal rows and four 10rem columns, centered horizontally, and sets position: relative to establish a containing block for absolutely positioned children. The .abspos rule uses grid-placement properties to position an absolutely positioned element within the grid area, with offsets (top, bottom, left, right) relative to that containing block.

```css
.grid {
  grid: 1fr 1fr 1fr 1fr / 10rem 10rem 10rem 10rem;
  /* 4 equal-height rows filling the grid container,
     4 columns of ''10rem'' each */
  justify-content: center;
  /* center the grid horizontally within the grid container */
  position: relative;
  /* Establish abspos containing block */
}

.abspos {
  grid-row-start: 1;     /* 1st grid row line = top of grid container */
  grid-row-end: span 2;  /* 3rd grid row line */
  grid-column-start: 3;  /* 3rd grid col line */
  grid-column-end: auto; /* right padding edge */
  /* Containing block covers the top right quadrant of the grid container */

  position: absolute;
  top: 70px;
  bottom: 40px;
  left: 100px;
  right: 30px;
}
```

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

### Reference named lines with grid-column

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

References grid lines by name using grid-column. The comment indicates the span goes from line "first" to line "middle".

```css
.five {
  grid-column: first / middle;
  /* Span from line "first" to line "middle". */
}

```

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

### Position grid item by line numbers

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

Positions a grid item using grid line numbers. The grid has three column lines and four row lines; #item1 spans from column line 2 to the end and from row line 1 to row line 4.

```css
#grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 50px;
}

#item1 { grid-column: 2;
         grid-row-start: 1; grid-row-end: 4; }
```

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

### Grammar for <grid-line> value type

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

Grammar definition for the <grid-line> value type used by the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties. It shows the allowed alternatives: auto, a custom identifier, an integer with optional custom identifier, or a span with an integer and/or custom identifier.

```css
<grid-line> =
  auto |
  <custom-ident> |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

```

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

### Round-trip gridTemplateRows assignment

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

Shows that assigning the resolved gridTemplateRows value back to the element may not be a no-op when implicit tracks exist, because the resolved value serializes implicit tracks as explicit ones.

```javascript
const s = getComputedStyle(gridEl);
gridEl.style.gridTemplateRows = s.gridTemplateRows;
// Code like this _should_ be a no-op,
// but if there are any implicit rows,
// this will convert them into explicit rows,
// possibly changing how grid items are positioned
// and altering the overall size of the grid!
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.