The examples

• 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

CSS Grid Level 2 Examples

• Subgrid on columns and rows

  

  The subgrid value is used for grid-template-columns and grid-template-rows

• Subgrid on columns, implicit grid rows

  

  The subgrid value is used for grid-template-columns. The rows are created as an implicit grid.

• Subgrid on rows, defined column tracks

  

  The subgrid value is used for grid-template-rows. The columns are created as a normal track listing.

• The subgrid can override the gap on the parent

  

  The subgrid inherits the gap of the parent but it can be changed in the subgrid.

• No implicit grid in subgridded dimension

  

  Additional items will be forced into the last row of the subgrid

• Line names on the parent are passed into the subgrid

  

  If you define line names on the parent, these are passed into the subgrid and can be used to position things.

• Line names on the child are added to those from the parent

  

  If you define line names on the parent, these are passed into the subgrid and can be used to position things.

• Padding is honored on the subgrid

  

  Subgrids can have their own padding which will be deducted from the first and/or last tracks.

• Margin is honored on the subgrid

  

  Subgrids can have their own margin which will be deducted from the first and/or last tracks.