A Beginner’s Guide to CSS Grid
When I first learned how to use floats to create layouts, I thought I could build anything. But the more I used floats, the more often I ran into issues. While floats are an important tool for web design, they are somewhat limited.
Then, CSS Flexbox came along and our horizons expanded. And now, with the development of CSS Grid, the layout possibilities seem endless. CSS Grid gives web designers the ability to create layouts based on a grid system. Why does that matter? Because grid-based designs create a better user experience, ensure consistency and cohesion, and make designs more visually appealing. Nick Babich sums up the importance of grid-based design in his article “Building Better UI Designs With Layout Designs”:
“Grids help designers to build better products by tying different design elements together to achieve effective hierarchy, alignment and consistency, with little effort. If executed properly, your designs will appear thoughtful and organized.”
(Make sure to spend some time reading Nick’s article to get some additional insight about how to design on a grid.)
So, what is CSS Grid? Basically, CSS Grid allows designers to align page elements using a grid-based system that includes columns and rows. CSS Grid layouts are flexible, can be restructured with media queries, and adapt to the space available. With CSS Grid, you can change the visual placement of page elements without having to restructure your document, so you can keep your document in a sensible order. (source)
Terms to Know
While this isn’t a comprehensive list, understanding these basic terms will give you a leg up as you dive into CSS Grid.
Grid lines are the lines that make up the grid and include column lines and row lines. You can use numbers to refer to each line.
To place an item on a row line or column line, use:
.element {
grid-column-start: 1;
grid-column-end: 4;
}.element2 {
grid-row-start: 2;
grid-row-end: 5;
}
Grid gaps are the spaces between each row or column. You can adjust the row gaps, column gaps or overall grid gaps. To adjust the size of the grid gaps, use grid-column-gap, grid-row-gap or grid-gap.
A grid cell is the space between four grid lines, similar to a table cell. A grid cell is a single unit of the grid. Below, the red area is the grid cell between row lines 2 and 3 and column lines 2 and 3.
How to Get Started
To apply a grid container to an element, you first have to set the display property to display: grid, which will create a block-level grid, or display: inline-grid, which will create an inline-level grid. The grid container is the direct parent to all grid items.
<div class="container">
<div class="item item1"></div>
<div class="item item2></div>
</div>.container {
display: grid | inline-grid;
}
When a grid container is applied, any child of that element becomes a grid item. A container has one grid item in each column and row, but you can change the positioning of these items using different properties. Here are two basic properties to get started:
Grid-column is shorthand for grid-column-start/end and grid-row is shorthand for grid-row-start/end, both of which I touched on above. Using these properties, you can determine how many rows or columns your grid item spans.
.item1 {
grid-column: 1 / span 4;
}.item2 {
grid-row: 2 / span 5;
}
When to Use CSS Grid
Now that you have a basic understanding of CSS Grid, it can be helpful to know when to use CSS Grid rather than CSS Flexbox or floats.
When comparing CSS Grid to CSS Flexbox, it’s important to remember that CSS Flexbox focuses on one-dimensional layouts, meaning you can position items based on either a row or a column, but not both. CSS Grid was built for two-dimensional layouts; you can utilize both rows and columns. (source)
If you want to overlap items in your layout, CSS Grid may be your best bet. It can also be more useful than Flexbox for making complete page layouts. (source)
The best thing about CSS Grid, Flexbox and floats is that you can use all of these options together within a single layout to position your elements exactly where you want them. While you may chose to lay out your page’s overall design using CSS Grid, you could use Flexbox to position your header items in a row and use floats within your body to lay out images and text.
If you’re not sure where to start, creating sketches and wireframes before you begin coding can help you think through your layout and consider the best options to align the different elements on your page.
