Fork me on GitHub

CSS Grid Layout Examples

Several examples showing different CSS Grid Layout use cases.

Deprecated This website hasn't been maintained for a while, information can be oudated.

Examples

Demos

  • Responsive grid

    example html screenshot

    Example grid that adapts itself to window size. Layout changes depending on window size (portrait/landscape). Some items are clickable and change their content.

  • Gallery

    example html screenshot

    Example app using grid layout. Responsive design depending on window size.

  • Auto-placement Algorithm

    example html screenshot spec

    Auto-placement algorithm demo. Allow to new add grid items in different positions in order to check how the algorithm works. Also, includes the possibility to change between the different grid-auto-flow property values.

  • Alignment demo (justify|align-items)

    example html screenshot spec

    Very simple demo that allows to play with different values for justify-items and align-items properties and check the results with different grid items.

  • Alignment demo (justify|align-self)

    example html screenshot spec

    Another alignment demo, this time it changes the value of justify-self and align-self properties of the items in each track (column/row).

  • Calendar demo

    example html screenshot

    Example of a calendar created using CSS Grid Layout. The days are added with JavaScript and only the column of the first day is set (depending on the day of the week) and the rest of them are placed automatically. If you double-click in the page, the alignment of the days numbers is changed.

  • Another responsive grid

    example html screenshot

    Example grid that adapts itself to window size. Layout changes depending on window size using media queries.