| Interactive Media Design

The Grid Container

Creating a grid container is as simple as setting the display property to grid. Once a container is declared as a grid, all direct children become grid items.

main {
  display: grid;
}

Grid Tracks

Grid tracks are the space between two grid lines on the same axis. Effectively a column or a row depending on the axis. We define tracks using the grid-template-columns or grid-template-rows properties.

Columns

In order to define columns we’ll use the grid-template-columns property to accomplish this.

main {
  display: grid;
  grid-template-columns: 1fr;
}

When considering a mobile-first approach, a single column is the default when a grid container is created. The following example shows how a responsive implementation might look with media queries.

@media screen and (min-width: 760px) {
  main {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 980px) {
  main {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 1200px) {
  main {
    grid-template-columns: repeat(4, 1fr);
  }
}

:::info Notice The repeat() function in the last media query. :::

Rows

The creation of rows is accomplished in the same manner as columns using the grid-template-rows property.

main {
  display: grid;
  grid-template-rows: repeat(3, 120px);
}

Units

Grid tracks can be declared using any of the typical CSS unitsopen in new window. Grid introduces a new unit that enables authors to create flexible proportional tracks. The fr unit represents a fraction of available space in the container.

The following snippet shows the syntax for using the fr creating two columns of equal size.

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

The next example again creates two columns with the first being twice the size of the second.

/* Create two columns with the first twice the size of the second */
main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

The last example demonstrates mixing units. Here the first column width will be removed from the available space with the remainder divided up by the second and third columns.

/* Mix and match different units */
main {
  display: grid;
  grid-template-columns: 500px 2fr 1fr;
}

Repeat

The repeat() function can be used to create a list of items with all the same value. The function takes two values, the first being the number of items to create, and the second the value of each time.

The rule display: grid is used to create a grid container with an explicit grid of 0 columns and 0 rows. However, the browser will create an implicit grid of 1 column and as many rows as there are direct children. We can see the results by added grid-gap between the grid cells.

Implicit and Explicit

The examples above are explicit declarations of grid tracks but often implicit tracks are created. If a situation arises where there is more content/grid-items than tracks, implicit tracks will be automatically created. This is often the case with rows, where only a few columns are explicitly defined but many elements, whether cards or pictures are ‘wrapped’ into successive, implicit rows.

Further Review

This YouTube video was created by Steve Griffith.

See Also

References