These sites are using CSS Grid

  • Blog and Portfolio of Bryan Robinson

    Bryan Robinson’s blog and portfolio uses grid in three areas currently: Homepage, Experiments page, and a special blog post template (created before Grid shipped).

    Site by Bryan Robinson. Read the writeup

  • Duetshop

    I used grid for the social media links on mobile and for the product grid on the different category pages for desktop. Also used it on the contact page to lay out the contact form. The form falls back to mobile layout for IE.

    Site by Oliver Williams. Read the writeup

  • Full Stack Fest 2017

    Full Stack Fest 2017 is using CSS Grid in the Speakers page and also in the speakers section in the homepage, both with a flexbox fallback.

    Site by Swwweet.

  • Grid by Example

    Grid by Example is a collection of grid layout examples, the site also uses Grid Layout for the main layout.

    Site by Rachel Andrew.

  • React book ad page

    Personal website of Ludovico Fischer. Grid is used on the page dedicated to his book: https://www.ludovf.net/reactbook On large screens, grid layout extracts a content block and places it on a second column. Since the block originally sits in the middle of other content, the effect wouldn’t have been totally straighforward by other means.

    Site by Ludovico Fischer.

  • Meyerweb

    Eric Meyer updated his site to use Grid Layout then wrote about the process for A List Apart.

    Site by Eric Meyer. Read the writeup

  • Niagara Falls USA

    Mario Vasquez updated the Niagara Falls USA website using Grid Layout with a Flexbox fallback. Grid is used on the main element on page Things to Do.

    Site by Tempest Interactive Media.

  • OddBird

    While working on the OddBird website redesign, we found a great opportunity to use CSS Grid based on the design we wanted to achieve. We also have Flexbox fallbacks in place. Currently, CSS Grid is used on the case study template and will transition to the whole site over time.

    Site by OddBird.

  • Radiate - Your own responsive dashboard.

    Radite allows you to create your own custom dashboard. CSS Grid is used to make bespoke layouts quick and easy to create.

    Site by Chris Draycott-Wheatley.

  • samg

    Samuel Gowland’s Personal website, Is a reworked single page site, using CSS grids to produce a modern card style website.

    Site by Samuel Gowland. Read the writeup

  • Simple Icons

    SVG icons for popular brands. A single-page website with more than 300 brand icons and HEX values, arranged in a responsive grid.

    Site by Dan Leech.

  • Microsoft Edge Web Summit 2017

    Site by Microsoft.

  • Tim Smith's Personal Site

    Tim Smith’s site uses CSS Grid in a few places on the site. The homepage, speaking page, resume, and especially the portfolio. The layout of the index of portfolio pieces is a layout Tim would never have dreamed to build before CSS Grid.

    Site by Timothy Smith.

  • Portfolio/Blog of Valentino Gagliardi

    Valentino Gagliardi’s personal website uses CSS Grid globally.

    Site by Valentino Gagliardi.

  • Wismut Labs

    Grid is used on the Wismut Labs home page on screen sizes that are larger than 1280px, which converts the standard navigation bar into a stacked blocks layout on the right side of the section.

    Site by Chen Hui Jing.

To add a site submit a pull request adding the site as a new file in the _gridsites folder. Find out more