CSS has been a central web design tool for years and years now. And yet, CSS layouts have never been quite that elegant. Positioning two elements side-by-side has often required hacks or uncomfortable compromises. It feels like the language has been lagging behind its use since its creation. But now, CSS is jumping to the forefront of web layout tech by finally giving web designers what they need to easily layout elements independently of one another. CSS Grid Layout gives you the tools you need to create flexible, responsive CSS layouts without hacks or compromises. It’s a relatively new technology that more senior designers might not yet be familiar with. Let’s examine how CSS Grid Layout works, and see what it can do.
What Does CSS Grid Layout Do?
CSS Grid Layout lets users line objects up in rows and columns. But surely that was already included in the existing CSS library. After all, websites have shown side-by-side elements since their inception. But now, we can position elements in rows and columns by using flexible tools designed specifically for that purpose. And while CSS grid might smell like tables to some designers, the toolset is far more robust and flexible than rigid table layouts could ever be.
If you’ve ever used frameworks to position objects within a grid, CSS grid will feel extremely familiar to you. There’s only limited syntax to learn, and while it might not seem initially intuitive, you should grasp the concepts relatively quickly. It’s also a little less confusing to visualize layouts than Flexbox, which might be a big step up.
Using CSS Grid Layout
Let’s start with a very basic HTML file, which we will convert to display as a grid. Let’s start with a simple HTML example, which displays a list of inline elements stacked on top of one another.
See the Pen CSS Grid Example on CodePen.
To turn on CSS Grid Layout, we will want to specify the display: grid; property in our CSS. This property can be attached to any item and causes all children of that item to be displayed in grid. We will add the property to our container class, like so:
.container {
display: grid;
}
Now the grid hasn’t done anything yet. Just setting the grid property creates a one-column grid, so it’s functionally identical to standard layout. We will need to set some properties for our grid to make it work. We can use the code below to set four columns on our grid with a width of 150px each.
.container {
display: grid;
grid-template-columns: 150px 150px 150px 150px;
}
Fractional Layouts
Of course, setting strict pixel values isn’t ideal, since they don’t transform with the viewport. We can instead set column width with fractions, or fr. These slice up the available space and distribute it to your specification. If we use something like the example below, the columns will cut the available space into four fractions.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
This will produce an even distribution of the available space.
We can also set columns to take up more than one fraction.
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
}
This distributes the available space over five fractions, with 1fr indicating 20% of the available column width. These fractions will resize with viewport and CSS properties limiting width.
Setting Gaps
Let’s give our grids a little room to breathe with grid spacing using grid-gap:
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
grid-gap: 20px;
}
This produces a 20 pixel buffer around the side of each grid cell. This space also adjusts the available space for fractional division, shrinking the relative size of the boxes.
Repeating
Of course, if you have a complex grid, you don’t want to write out fractions by hand. We can duplicate fraction listings using the repeat function.
.container {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 20px;
}
This allows us to create eight columns at once, all with a setting of 1fr.
Adjusting row size
By default, the browser will create grid sizes that are necessary to contain the content within the grid items. We can ask the browser to make specific adjustments to that automatic process based on our preferences with grid-auto-rows.
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
grid-auto-rows: 75px;
grid-gap: 20px;
}
Adjusting Flexibly with minmax()
As always, forcing objects to be a specific size in your CSS is typically not a great idea. We can instead use mixmax(), a function that allows us to select the minimum and maximum size properties for grid-auto-rows and its companion grid-auto-columns.
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
grid-auto-rows: minmax(75px, auto);
grid-gap: 20px;
}
This sets the rows’ minimum size to 75px and the maximum size to auto. This change won’t create an immediately obvious visual difference. But if we put content within the tracks, the track will stretch to accommodate it.
Learning More about CSS Grid Layout
This post only touches on the basics of CSS grid layout. If you want to learn more about how to implement it, check out MDN’s excellent tutorials.
You might also like the following posts:
What is Z-Index and How Does It Work?
Using CSS Pseudo-elements and Pseudo-classes like ::before and ::after
Avoiding Common Problems with CSS Grid
