Unless you are supporting Internet Explorer 10 and earlier, there really is no excuse to be sleeping on CSS Grid these days. It makes web layouts much more intuitive and flexible. Let’s take a look at a basic layout to get started.
As you can see, there are four main sections: header, footer, sidebar, and content. The header, footer, and sidebar are sticky. Meaning, while the content might overflow the bounds of the page and require scrolling, these element will remain on screen at all times. Only the content will scroll as it overflows.
Getting Started
To start, let’s prevent the body from overflowing. This ensures that our parent grid container will retain full control of the entire browser viewport. There should be nothing outside of our parent.
body {
overflow: hidden;
}Next, let’s create the grid container element and give it a classname of .container.
<body>
<div class="container"></div>
</body>This grid container will take up the entirety of the viewport since it’s the outermost parent of our webpage. We can do this by setting the height and width of the container using the viewport units 100vh and 100vw.
.container {
height: 100vh;
width: 100vw;
}The Grid
A grid layout works in terms of columns and rows. Every immediate child of a grid container corresponds to a particular column or row (or spans a number of columns or rows). In our example, each immediate child element will take up exactly one column or row.
First let’s add the immediate child elements to the DOM: the header, footer, and body (which will eventually contain both the sidebar and page content).
<body>
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
</body>Next we’ll tell .container that it is indeed a grid container by adding the display property display: grid. Now that it knows that it’s a grid, let’s tell it exactly how many columns and rows it will container along with their sizes.
grid-template-columns: 1fr tells the grid container that it is one giant column spanning from end-to-end.
grid-template-rows: 30px 1fr 30px tells the grid container that the first and third row heights will be exactly 30px at all times. This refers to the .header and .footer. The second row 1fr tells the grid container that, having allocated 30px each for the header and footer, that the rest of the space should be allocated for .body which will include both the sidebar and the content sections.
.container {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 30px 1fr 30px;
}.body not body
Now, let’s turn our attention to the .body element which contains both the sidebar and the content. Although .body is the second row of the parent grid container, it can itself become a grid container for child elements nested within: .sidebar and .content.
Let’s add the child elements for the sidebar and content:
<div class="container">
<div class="header">.header</div>
<div class="body">
<div class="sidebar">.sidebar</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet... repeat
enough of these to overflow your browser's viewport.
<p>
</div>
</div>
<div class="footer">.footer</div>
</div>As with the parent grid container we tell .body that it is a grid container with two columns: 1fr 3fr. This means that the first column (the sidebar) will take up 1 fraction of the overall width of the parent, while the second columns (the page content) will take 3 fractions.
We will also hide any overflow to ensure that nothing leaks outside of the .content element that would disturb the parent’s layout.
.body {
display: grid;
grid-template-columns: 1fr 3fr;
overflow: hidden;
}Finishing Touches
The final piece of the puzzle is adding overflow to the .content element. Since it’s immediate parent hides all overflow, adding overflow-y: scroll ensures that content that would exceed the height of this element automatically adds scrolling from within.
.content {
overflow-y: scroll;
padding: 20px;
}That’s It
A simple grid layout that uses very few lines of css and a minimal DOM. It might not be apparent right now but this will save much more time as the webpage gets more complex. It’ll be easier to handle and make drastic layout changes based on device or browser width.
In 2019 there really is no reason not to use CSS Grid — unless you have to support IE10 or earlier :’(
Checkout the full CodePen here: https://codepen.io/lookininward/pen/zYOQjZM
