The CSS grid spec isn’t exactly “new” but it’s definitely newer in the mainstream dev world. Many frontend coders don’t even know about the CSS grid properties yet, let alone how they apply to an interface.
You can find plenty of tutorials by searching around, but I also recommend studying code snippets. This way you’re diving into real-world projects so you can see how CSS grids work on a live webpage.
This collection should offer plenty of resources to help you learn, customize, and restyle CSS grids for whatever you’re doing on the web.
1. Multi-Image Hero Block
Let’s kick things off with this really cool hero block designed with grid properties. This design mimics the homepage hero image section you’ll find on many magazine-style websites.
Developer Rachel Andrew created this using a bit of custom CSS from her own projects. It works incredibly well, and the design is fully responsive to boot.
Not to mention it looks fantastic on mobile screens; not something you always find with large image blocks.
This is an excellent resource for studying CSS grids and a handy snippet for anyone coding a magazine-style blog theme.
2. CSS Grid Layout
The grid-auto-flow property is on full display with this demo using the “dense” setting. This forces items to squeeze in further down in the page as the grid resizes.
With this setting you have a lot of control over which page elements change positions, where those changes happen, and how the grid should respond. This takes a front seat over media queries which are used primarily in responsive design.
If you aren’t sure what this code does then just remember: Google is your friend! Lots of great posts and Stack Overflow threads covering this whole setup.
3. Not-So-Spooky Pumpkin Facts
Here’s a pretty cool snippet created with some basic pumpkin facts. Well, pumpkin facts organized by a CSS grid layout.
The code actually runs on SCSS/Sass which means you’ll need some familiarity with the language to dig in. But you can also compile the Sass code into raw CSS right inside CodePen if you want to see the basic properties.
One of my favorite things about this design is the color and typography. It really screams Halloween with the pumpkin icon and all those shades of yellow/orange.
4. Auto Hexagonal Layout
This is perhaps one of the most practical projects I found for this gallery. Have a look at this grid style and try resizing your browser.
You’ll notice the hexagonal-shaped items reformat themselves to fit into the page accordingly. This is probably the best way to handle complex pages with lots of photos. I often see this type of layout on conference websites and “about us” pages for companies with lots of employees.
Now with the CSS grid structure you don’t need to worry about manual responsive styles. And this code snippet is the best place to start for planning a similar layout.
5. Pokédex in CSS Grid
As you resize the page you’ll notice the graphics themselves increase in size too. This is pretty darn easy to handle with CSS, and it’s even easier once you learn some of the grid properties.
Note this is not interactive so you can’t click anything or open new pages. But with the layout foundation set in stone, it’d be pretty darn simple to add those features.
6. Simple Grid
Here’s a really interesting idea that brings print design styles onto the web. Have a look at this example on CodePen featuring many columns with headers and oversized typography.
The grid layout itself relies on set columns with predefined gaps. This means as you resize the browser, certain columns break down according to these rules.
It’s an excellent way to ensure that certain columns always appear next to each other, or at least appear in view, so they’re easy to read.
7. CSS Grid With Flexbox Fallback
Not all browsers have caught up to the CSS grid structure. That’s why this snippet teaches you how to design a custom CSS grid using flexbox (and floats) as a fallback.
This is actually tricky since you want to use the grid properties if they’re supported, but you want the browser to ignore them if not. Thankfully the code is well commented so you can dig through and even try adjusting some of the features for yourself.
I wouldn’t call this a perfect fallback solution, but it’s definitely better than nothing.
8. Grid Terminology Demo
Not sure about all this confusing CSS grid terminology? Then this snippet may help clear things up.
If you dig into this example you’ll find a few highlighted features with writeups explaining the grids along the way. You’ll also learn how to look at the gridlines properly and how to see CSS grids accurately on the page.
Note you won’t glean everything from this demo because it doesn’t cover everything. It’s just a small intro to the easiest properties with visual aids to help.
9. Using grid-template-columns: repeat()
For a very specific example of the grid-template-columns property have a peek at this live demo. It shows you how to use the repeat feature instead of declaring the same column value multiple times in your CSS.
Again, browser support is still catching up with this but most modern web browsers work with this technique.
Not to mention you’ll find plenty of comments inside the CSS to help you understand what this does.
10. Pure CSS Grid Crossword
To end on a fun note have a look at Adrian Roworth’s pure CSS crossword puzzle. This entire layout is built on nothing but HTML and CSS code, specifically the CSS grid properties for layout structure.
What’s even crazier is that you can enter content into the crossword boxes to actually solve the puzzles. How cool is that!
Note this thing is pretty complex and it’s one of the few projects listed here that is not mobile friendly. But it’s proof of how far we’ve come with grid layouts on the web, so I’m hoping we’ll see a lot more of this kind of stuff in the near future.
- Fun Examples of CSS Imitating Print Design
- 8 Code Snippets That Demonstrate the Power of CSS Grid
- 10 Examples of Unorthodox Shapes Created with CSS
- Our 100 Favorite CSS Libraries, Frameworks and Tools for 2019
- 10 Code Snippets for Creating Masonry Grid Layouts
- Better Layouts Through CSS Flexbox
- 10 HTML & CSS Snippets for Creating Split Screen Layouts