The examples

The following examples include an image of how the example should look in a supporting browser, they each link to a page with more information about the technique being shown, code and a CodePen of the example. You will need a supporting browser to see these examples working.

• Defining a Grid

  

  To define a grid use new values of the display property `grid` or `inline-grid`. You can then create column and row tracks.

• Line-based placement

  

  Positioning items on the grid using line numbers

• Line-based placement shorthand - grid-row and grid-column

  

  Positioning items on the grid using the shorthand properties.

• Line-based placement shorthand - grid-area

  

  Positioning items on the grid using the shorthand properties.

• Line-based placement spanning tracks

  

  Positioning items which span more than one grid track.

• Line-based placement spanning tracks with the span keyword

  

  The span keyword gives us a way to span tracks without needing to specify start and end lines.

• Line-based placement named lines

  

  In addition to using line numbers we can name lines.

• Line-based placement named lines with spans

  

  You can give lines the same name and then use the span keyword to target lines of a certain name.

• Using repeat notation

  

  Save some time by describing repetitive track listings with repeat.

• Explicit and Implicit Grid

  

  The explicit grid is defined by `grid-template-rows` and `grid-template-columns`.

• Defining Grid Areas

  

  We can create named areas on the grid to put content into.

• No clearing required

  

  Items sit in their own rows on the grid therefore we do not need to clear them as with floats.

• Redefining Grid Areas with Media Queries

  

  As our layout is defined in CSS we can redefine the grid using media queries

• Source Independence

  

  Placement of items on the grid can be separate to their order in the source

• Layering items

  

  Items can be stacked, and the stacking order controlled with z-index

• A grid item as a new positioning context

  

  You can absolutely position items inside an area of the Grid.

• Grid auto-placement

  

  Grid will position grid items automatically on a grid created on the parent.

• Grid auto-flow column

  

  Items are placed in rows by default but you can specify to layout by column.

• Grid auto-placement mixed with placed items

  

  You can mix auto-placed items with those you give a position to

• The auto-fill keyword in repeating track definitions

  

  When using repeat notation you can use auto-fill rather than an integer to create as many tracks as will fill the container

• Nested Grid

  

  A grid item may become a grid container itself.

• Implicit named grid lines

  

  When using Named Areas implicit named lines are automatically created.

• Using Order

  

  Grid supports the order property also found in Flexbox.

• Box alignment align-items

  

  Using the box alignment property align-items

• Box alignment justify-items

  

  Using the box alignment property justify-items

• Box alignment align-self

  

  Using the box alignment property align-self

• Box alignment justify-self

  

  Using the box alignment property justify-self

• minmax() in auto-fill repeating tracks

  

  A grid that contains as many 200 pixel column tracks as will fit into the container with the remaining space shared equally between the columns.

• minmax() and spanning columns and rows

  

  A grid that contains as many 200 pixel column tracks as will fit into the container with the remaining space shared equally between the columns.

• The auto-fill keyword with named grid lines

  

  An auto-fill grid, positioning items using named lines and span.

• A simple minmax example

  

  Using minmax() to make the first column stretch after placing all three column tracks

• Aligning the Grid

  

  The total size of the tracks is smaller than the size of the grid container.

• Aligning the grid with space-around and space-between

  

  Using space-around and space-between may make grid areas and gutters larger than anticipated.

• Multiple tracks in a track-list with auto-fill

  

  The repeat syntax can take a track-list rather than a single value.

• Multiple tracks in a track-list with auto-fill and minmax()

  

  Using minmax() to create tracks that grow proportionally with multiple track listings.

• Percentage based grids and gaps

  

  You can create grids using percentage values for tracks and gaps.

• auto-fill vs. auto-fit

  

  An example to demonstrate the difference between the auto-fill and auto-fit keywords in repeat notation