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.
-
Greece & Mediterranean Travel Centre
After realizing the site for my mother’s boutique travel agency was so old it only rendered properly in IE9 or lower, I knew she needed something new that would future-proof her business for years to come. CSS Grid is in use on the home page, and will eventually be used across the whole site.
Site by Simon Kubica.
-
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.
-
Jeremy Fuksa's Personal Website
When Jeremy decided to resurrect his personal website after four years, he designed it from the ground-up using CSS Grid.
Site by Jeremy Fuksa.
-
Julian Gaviria — Designer/Developer
Personal site of Julian Gaviria built using CSS Grid. Best example of Grid is in the article list page and related articles.
Site by Julian Gaviria. Read the writeup
-
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.
-
Orange Flame Design
Orange Flame Design’s website switched to CSS Grid in November 2017.
Site by Jeremy Fuksa.
-
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.
-
Todd Libby
The personal site and blog of Todd Libby using CSS Grid Layout, Subgrid, and also a technology, design and development blog.
Site by Todd Libby. Read the writeup
-
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