Grid by Example

A collection of usage examples for the CSS Grid Layout specification.

Grid by Example

The following examples include an image of how the example should look in a supporting browser, code sample and link to the worked example. I have also embedded a CodePen of each example so you can fork and play with these. You will need a supporting browser to view these examples. Current supporting browsers and how to enable support in those browsers can be found on the Igalia site.

You can also take a look at a page of more complete layout examples.

The examples

  1. Defining a Grid
  2. Line-based placement
  3. Line-based placement shorthand with grid-row and grid-column
  4. Line-based placement shorthand with grid-area
  5. Line-based placement spanning cells
  6. Line-based placement span keyword
  7. Line-based placement named lines
  8. Line-based placement named lines with span
  9. The repeat keyword
  10. Explicit and Implicit Grid
  11. Defining Grid Areas
  12. No Clearing Required
  13. Redefining Grid Areas with Media Queries
  14. Source independence
  15. Layering items
  16. Grid area as a new positioning context
  17. Grid Auto-placement
  18. Grid Auto-placement by Column
  19. Grid Auto-placement with a positioned element
  20. The auto-fill keyword in repeating track definitions
  21. Nested Grid
  22. Implicit Named Grid Lines
  23. Grid auto-placement and the order property
  24. Box alignment align-items
  25. Box alignment justify-items
  26. Box alignment align-self
  27. Box alignment justify-self
  28. minmax in auto-fill repeating tracks
  29. minmax() and spanning columns and rows
  30. The auto-fill keyword with named grid lines
  31. Simple minmax() example
  32. Aligning the Grid
  33. Aligning the Grid with space-around and space-between

Example 1: Defining a Grid

image of display after defining a grid.
Defining a grid

To define a Grid use display:grid or display:inline-grid on the parent element. You can then create a grid using the grid-template-columns and grid-template-rows properties.

I am using the grid-gap property to create a gap between my columns and rows of 10px. This property is a shorthand for grid-column-gap and grid-row-gap so you can set these values individually.

All direct children of the parent now become grid items and the auto-placement algorithm lays them out, one in each grid cell. Creating extra rows as needed.

See the Pen Grid by Example 1: Defining a Grid by rachelandrew (@rachelandrew) on CodePen.

Example 2: Line-based placement

image of display after placing items
Line-based placement

Using the Grid I defined above I am positioning the elements in my markup (six divs with a class of box and classes from a to f) using line-based placement properties. This example is more verbose than it needs to be as a demonstration of the properties. In reality if an item will only span one grid track you may omit the -end value.

See the Pen Grid by Example 2: Line-based placement by rachelandrew (@rachelandrew) on CodePen.

Example 3: Line-based placement shorthand - grid-row and grid-column

image of display after placing items.
Placement shorthand

We can achieve the same result as above using a shorthand syntax declaring the start and end values at once. Values are separated with a / and again it would be valid to omit the / and the end value as we are spanning only one track.

See the Pen Grid by Example 3: Line-based placement shorthand by rachelandrew (@rachelandrew) on CodePen.

Example 4: Line-based placement shorthand - grid-area

image of display after placing items.
Placement shorthand with grid-area

We can achieve the same result as above declaring all for values with the grid-area property. Again values are separated with a /. The order of the values is row-start/column-start/row-end/column-end.

See the Pen Grid by Example 4: Line-based placement shorthand grid-area by rachelandrew (@rachelandrew) on CodePen.

Example 5: Line-based placement spanning cells

image of display spanning cells.
Spanning cells

To create Grid Areas that are larger than individual cells we specify an end line that is more than one cell away.

Here I am using the grid-column and grid-row shorthand and have omitted the end value for any items that span one row or column track.

See the Pen Grid by Example 5: Line-based placement spanning cells by rachelandrew (@rachelandrew) on CodePen.

Example 6: Line-based placement span keyword

image of display after placing items.
The span keyword

We can also span using the span keyword. The below CSS creates the same layout as the one in example 5. I am using the span keyword rather than targeting the Grid Line by number. I am also using the defaults for row and column end, which is to span 1.

See the Pen Grid by Example 6: Line-based placement span keyword by rachelandrew (@rachelandrew) on CodePen.

Example 7: Line-based placement named lines

image of display after placing items.
Named lines

We can name lines rather than targeting them by number. Name the line inside brackets. In the code below you can see that I name the very first column line col1-start then comes the 100 pixel first column track. Having named the lines you can use the names, rather than numbers.

See the Pen Grid by Example 7: Line-based placement named lines by rachelandrew (@rachelandrew) on CodePen.

Example 8: Line-based placement named lines with span

image of display after placing items.
Named lines with span

You can give lines the same name and then use the span keyword to target lines of a certain name. This is really useful if you want to create a complex grid with multiple content tracks and gutters.

I have made a slightly larger grid here and have named all of the Grid Lines before the content tracks with col and all of the lines before the row tracks with row. I can then start at a certain column line by using col <line number> and span by saying span <number of lines>.

See the Pen Grid by Example 8: Line-based placement named lines with span by rachelandrew (@rachelandrew) on CodePen.

Example 9: The repeat keyword

image of display after placing items.
The repeat keyword

In example 8 we repeated the same definitions to create our grid with named lines. We could save some typing by using the repeat keyword. The values for the repeat keyword are the number of times you want the expression to repeat and then the expression.

See the Pen Grid by Example 9: The repeat keyword by rachelandrew (@rachelandrew) on CodePen.

Example 10: Explicit and Implicit Grid

image of display after placing items.
Explicit and Implicit Grid

When we use grid-template-columns and grid-template-rows we create an Explicit Grid. However if we try and place an item outside of that grid the browser will create an Implicit Grid line or lines in order to hold that item.

In the code below I have put e between grid column lines 4 and 5, these are not described with grid-template-rows, so an implicit grid line 5 is created.

By default the implicit grid tracks created by the implicit lines will be auto sized. However, you can size the tracks with the grid-auto-columns and grid-auto-rows properties. I have sized my auto tracks as 100px to match the rest of the column tracks in my grid.

See the Pen Grid by Example 10: Explicit and Implicit Grid by rachelandrew (@rachelandrew) on CodePen.

Example 11: Defining Grid Areas

image of display after placing items.
Defining Grid Areas

We can created named areas on the grid to put content into. To do this we first assign elements in our merkup to a Grid Area, using the grid-area property.

We can then use the grid-template-areas property to describe where on the Grid these elements should sit.

Repeating the name of an area indicates that the area spans that grid track. Using a . or a sequence like .... indicates an empty track. Such as the very first cell on this grid.

See the Pen Grid by Example 11: Defining Grid Areas by rachelandrew (@rachelandrew) on CodePen.

Example 12: No Clearing Required

image of display after placing items.
Grid requires no clearing

If I add a footer to my markup and define a grid-area and place it on the grid using grid-template-areas you can see that it sits below the content column. There is no clearing required as this footer has a track on the grid, it can’t hop up into another track.

This example also shows the issue described in example 5, by default the background on the sidebar should stretch to full height, in a similar way to the defaults for Flexbox.

See the Pen Grid by Example 12: No clearing required by rachelandrew (@rachelandrew) on CodePen.

Example 13: Redefining Grid Areas with Media Queries

image of display at a narrow breakpoint. at a wider breakpoint
Using media queries

We can easily redefine the grid and the position of the elements on it using Media Queries. I define the Grid Areas as before outside of the Media Queries and then redefine the Grid Tracks and the position of the elements onto that grid inside my Media Queries.

See the Pen Grid by Example 13: Redefining grid areas with media queries by rachelandrew (@rachelandrew) on CodePen.

Example 14: Source Independence

image of display after placing items.
Source independence

A key thing in Grid is that the order of items in the source does not matter, as long as they are children of the element that has been declared as a grid. In this example I have some content and then some ads which I have placed right at the bottom of the source. I can use Grid to visually display these in between sections of content.

I could then use Media Queries to display them elsewhere in a wider layout.

Important! For accessibility purposes the logical order should be set in the source. Do not use Grid properties to adjust the logical order of your document.

See the Pen Grid by Example 14: Source independence by rachelandrew (@rachelandrew) on CodePen.

Example 15: Layering Items

image of display after layering items.
Layering items

You can layer items in the Grid, using z-index to control the order that they stack. In this example I have boxes arranged on a grid, my box F is last in the source order and positioned on the Grid so it partly overlaps box D.

Without any z-index property it will display on top of box D. However I can add a z-index and control the position which works as you would expect if you have used the z-index property with positioned elements.

See the Pen Grid by Example 15: Layering items by rachelandrew (@rachelandrew) on CodePen.

Example 16: Grid Area as a new positioning context

image of display after placing items.
Positioning items inside a grid area

You can absolutely position items inside an area of the Grid. In this example I have used position: relative on my .content Grid Area. I can then position the four arrow images using absolute positioning inside that area, and it works as you would expect.

See the Pen Grid by Example 16: Grid Area as a new positioning context by rachelandrew (@rachelandrew) on CodePen.

Example 17: Grid Auto-placement

image of display after placing items.
Demonstration of auto-placement

If you declare a Grid on an element and do not position the child elements then the auto-placememt algorithm dictates what the browser should do about those unplaced grid items.

In this example I have a set of 12 boxes. I’ve used nth-child to switch the backgroud color on the even boxes to make this example clear. I have declared a Grid and created rows and columns but not positioned any of the children. As you can see the boxes all lay out on the Grid despite having no placement assigned to them.

See the Pen Grid by Example 17: Grid Auto-placement by rachelandrew (@rachelandrew) on CodePen.

Example 18: Grid Auto Flow - Column

image of display.
Using auto-flow to add items to columns

The default behavior of Grid Auto Flow is to layout the elements by row, working along the row until there are no more slots then moving on to the next row. If a row is not declared then an implicit grid track will be created to hold the items.

You can change this behavior by using the grid-auto-flow property. The default value is row but you can also specify column. The elements will then be laid out column by column, adding new columns if needed.

See the Pen Grid by Example 18: Grid auto-placement column by rachelandrew (@rachelandrew) on CodePen.

Example 19: Grid Auto-placement with a positioned element

image of display after placing items.
Positioned element in an auto-placed grid

If a child element has been placed then the auto-placement algorithm will place that first and then work out what to do with any child elements that have not been placed.

In this example I have placed box2 on the grid and also made it span 3 grid lines. The rest of the boxes continue to lay out as before.

See the Pen Grid by Example 19: Auto-placement with a positioned element by rachelandrew (@rachelandrew) on CodePen.

Example 20: The auto-fill keyword in repeating track definitions

image of display after placing items.
Using auto-fill

In example 9 we stated that we wanted our row track list to repeat three times. The spec also defines auto-fill and auto-fit keywords.

In this example I am creating a grid that contains as many 100 pixel column tracks as will fit into the container (in the example this is the viewport).

This example currently works in Firefox Nightly (12 April 2016).

See the Pen Grid by Example 20: the auto keyword in repeating track definitions by rachelandrew (@rachelandrew) on CodePen.

Example 21: Nested Grid

image of display after placing items.
Nesting a grid inside a grid area

A simple example of nesting one grid inside another. Any Grid Area can become a grid itself, by setting display:grid and then defining the rows and columns.

See the Pen Grid by Example 21: a nested Grid by rachelandrew (@rachelandrew) on CodePen.

Example 22: Implicit Named Grid Lines

image of display after placing items.
Implicit named lines

When using Named Areas implicit named lines are created by appending ‘-start’ and ‘-end’ to the named area you have defined. They can be used in the same way as lines you have explicitly named.

See the Pen Grid by Example 22: Implicit named grid lines by rachelandrew (@rachelandrew) on CodePen.

Example 23: Auto-placement and the order property

image of display after placing items.
Using order

Grid supports the order property also found in Flexbox. If you are explicitly positioning Grid Items then order will affect painting order, and therefore the order in which items stack up where no z-index has been applied.

If using auto-placement then the order property will affect how items are placed on the grid. In this example all boxes have been give an order of 1, so they continue to be positioned in DOM order. However box1 has an order of 3 and box2 an order of 2. These boxes have a higher order value so are positioned after all of the boxes with an order value of 1.

See the Pen Grid by Example 23: Auto-placement and the order property by rachelandrew (@rachelandrew) on CodePen.

Example 24: Box alignment align-items

image of display after placing items.
align-items

I have used a grid background image to show the grid in this example. I’ve defined 4 equal sized grid areas on the left which cover a square area inside three row and column lines.

I’m using the align-items property with a value of center. This centres the content of all of the grid items.

See the Pen Grid by Example 24: align-items by rachelandrew (@rachelandrew) on CodePen.

Example 25: Box alignment justify-items

image of display after placing items.
justify-items

I have used a grid background image to show the grid in this example. I’ve defined 4 equal sized grid areas on the left which cover a square area inside three row and column lines.

I’m using the justify-items property with a value of center. This centres the content of all of the grid items.

See the Pen Grid by Example 25: justify-items by rachelandrew (@rachelandrew) on CodePen.

Example 26: Box alignment align-self

image of display after placing items.
align-self

I have used a grid background image to show the grid in this example. I’ve defined 4 equal sized grid areas on the left which cover a square area inside three row and column lines.

I’m using the align-self property on individual grid items to demonstrate the different values.

See the Pen Grid by Example 26: align-self by rachelandrew (@rachelandrew) on CodePen.

Example 27: Box alignment justify-self

image of display after placing items.
justify-self

I have used a grid background image to show the grid in this example. I’ve defined 4 equal sized grid areas on the left which cover a square area inside three row and column lines.

I’m using the justify-self property on individual grid items to demonstrate the different values.

See the Pen Grid by Example 27: justify-self by rachelandrew (@rachelandrew) on CodePen.

Example 28: minmax() in auto-fill repeating tracks

image of display after placing items.
Using minmax() with auto-fill

In this example I am creating 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. In the minmax() function the first value is the minimum size I want my tracks to be, the second is the maximum. By using 1fr as the maximum value the space is equally distributed.

This example currently works in Firefox Nightly (12 April 2016).

See the Pen Grid by Example 28: minmax() in auto-fill repeating tracks by rachelandrew (@rachelandrew) on CodePen.

Example 29: minmax() and spanning columns and rows

image of display after placing items.
Using minmax and spans

In this example I am creating 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. In the minmax() function the first value is the minimum size I want my tracks to be, the second is the maximum. By using 1fr as the maximum value the space is equally distributed.

I am then spanning columns and rows. As the items are auto-placed on our flexible grid they will move around the grid but maintain their spanned size.

This example currently works in Firefox Nightly (12 April 2016).

See the Pen Grid by Example 29: minmax() and spanning columns and rows by rachelandrew (@rachelandrew) on CodePen.

Example 30: The auto-fill keyword with named grid lines

image of display after placing items.
Using auto-fill and named lines

In this example I am creating a grid that contains as many 100 pixel column tracks as will fit into the container (in the example this is the viewport) and naming them col. I can then position the grid items using named lines and spans.

This example currently works in Firefox Nightly (12 April 2016).

See the Pen Grid by Example 30: auto-fill with named lines by rachelandrew (@rachelandrew) on CodePen.

Example 31: Simple minmax() example

image of display using minmax().
Using minmax() to make the first column stretch after placing all three column tracks

In this example I am creating a three column track grid. The first column track has a minimum width of 200px and a maximum of 1fr defined using minmax() notation. The other two tracks are fixed at 200 pixels.

See the Pen Grid by Example 31: simple minmax() example by rachelandrew (@rachelandrew) on CodePen.

Example 32: Aligning the grid

image of grid tracks aligned inside a grid container larger than the total of tracks
The total size of these tracks is smaller than the size of the grid container.

In this example I am creating a four column track grid, the tracks have absolute sizes and in total are smaller than the area of the grid container. Therefore we can align the grid inside the container - the default being start on both dimensions.

See the Pen Grid by Example 32: aligning the grid by rachelandrew (@rachelandrew) on CodePen.

Example 33: Aligning the grid with space-around and space-between

image of grid tracks aligned inside a grid container larger than the total of tracks
space-around and space-between may make grid areas and gutters larger than anticipated.

In this example I am creating a four column track grid, the tracks have absolute sizes and in total are smaller than the area of the grid container. This time I have used:

  • align-content: space-around
  • justify-content: space-between

This means that extra space is distributed around the tracks and our desired 10 pixel gutter gets more space. However so do any areas which span more than one track as where they cross a gutter they gain this extra space too.

See the Pen Grid by Example 33: fixed sizes can get extra space due to alignment properties by rachelandrew (@rachelandrew) on CodePen.