Let’s take a moment to appreciate one of our favourite innovations of the last year. CSS Grid is the latest and greatest way to create beautiful layouts in CSS. It’s a tool that will have a positive effect on developers of all experience levels, whether you started coding last month, or have 20 years of experience. The introduction of CSS Grid is changing the way layouts are done in the browser. What used to be difficult or impossible is now not only achievable, but easy.
We’re going to use this image gallery example to highlight 3 ways CSS Grid will make your life easier. We use Firefox in our screenshot below because of their awesome grid tools - check them out!
1. No More Media Queries!
How satisfying is it to see the gallery seamlessly resize to whatever size we adjust the screen? If you’re familiar with floats, you’ll know that to do this you would need to manually resize the widths of your elements as your browser gets smaller. Even using flexbox, you would need to change the flex-direction at a smaller breakpoint. In this example, the minmax function, a new CSS Grid feature tells our columns how we want the content to shrink and grow. Using the minmax function, we can say, “you should be at your largest this size, and you’re allowed to shrink to this size”. This allows us to avoid media queries, the magic all happens in one line of CSS. ___
2. Streamlined HTML
CSS Grid is an incredibly lean layout tool. With floats and flexbox, we would need empty container divs to place our elements where we want them. The default behaviour or Grid is to place elements where they will fit, based on size. For example, if there is 100px of space left on a row but your element is 200px wide, grid will automatically create a new row and place the element there.
We can also tell our items where to be placed manually by using two new properties that you can put on the child elements, ‘grid-row’ and ‘grid-column’. These properties override the default placement of your HTML elements. If you ‘inspect’ the gallery or take a look at the screenshot of our CSS below, you will notice we’ve used these properties to make space for photos that are taller than others. Because we can place our items where ever we would like inside of our grid, we no longer need a div around each image element. This helps keep our content completely separate from our styles, creating cleaner HTML. Accessibility Tip: Make sure to fill out your alt tags when adding images to your markup! This allows users with screen readers to understand what you’re adding to the page. ___
3. Simpler CSS & Fluid Layouts
So what is the best part about using Grid for this gallery layout? You’re going to style it with less than 20 lines of CSS! You won’t need any clearfix class, or to change the element widths each time you have a breakpoint. The screenshot below is all of the CSS you will need to write for this gallery. If you created this layout using floats, you would have to use divs or containers to place your images inside the gallery and achieve the look you want. This would be tedious and tricky to do if you don’t know which images you’re working with beforehand, for example if you’re using a CMS (Content Management System). With CSS Grid, we can use 'grid-template-columns' to create grid columns and rows. We then use 'grid-auto-flow: dense;' to let the child elements flow naturally based on where the browser thinks they would best fit. In this case, if we had an element that was 200px wide, and in one of the earlier rows there was a 200px hole, the browser will automatically place our item in that hole! This makes creating fluid layouts painless.
Questions? Comments? Reach out on Twitter!