CSS Grid Examples

Use the View Source feature in your browser to see the HTML and CSS code for these examples.

Using grid-template-columns for Layout

This grid container uses the gird-template-columns CSS property to create three columns. The grid items are placed in the grid container in the order they appear in the HTML. The first grid item spans two columns. The second grid item spans two rows.

One

Two

Three

Four

Five

Six


Using grid-template-areas with Inline grid-area Names

This grid container uses the grid-template-areas CSS property to create a grid with six areas. The grid items are placed in the grid container using the grid-area CSS property. The grid items are not placed in the grid container in the order they appear in the HTML. Their order is determined by the order of area names in the grid-template-areas CSS property. Each grid-area name should only be applied to one element. Note that the grid-template-areas names don't need to match the element names.

header
main
section

Using grid-template-areas with id attributes for grid-area Names

The difference between this grid container and the previous one is that the grid-area names are defined in the HTML using id attributes which are targets for the CSS rules with id selectors. The grid--area names correspond to the id values.

main
section