Taught by Tina May
There are lots of different tools that we have in CSS for dividing up our content - making them sit next to each other, creating more advanced layouts than what we’ve probably done so far. We’ve got display: inline-block; which lets content sit next to each other, kind of naturally flowing like text; then we’ve got float, which if you have been around web development for a while you definitely have heard this one. Then we have flex (Flexbox) which is another property we’re going to get into later in this course, but the one I’m going to be teaching you today is the CSS Grid.
CSS Grid is very powerful. There’s a lot you can do with it. If you have a look in the coding specification, you’re probably going to find pages and pages of documentation that make it seem like it’s pretty complex. But we’re going to start with the foundation here. One of the reasons I love CSS Grid is that it’s so easy to get started - you don’t have to understand all the different options and ways to manipulate it, if you just want to create, say, 2-column or 3-column grid.
Let’s dive in to Codepen and try it for ourselves:
<section class=”grid”>
<div class=”column”> </div>
<div class=”column”> </div>
</section>
Our universal CSS reset:
* {
padding: 0;
margin: 0;
}
Now, when you load this in Codepen and wonder why it’s not working, it’s because container elements (i.e. section, div, nav, header, footer) by default take 0 height and 100% width. They take up the full width of whatever the parent container they’re inside of (in this case the body element of the page itself).
You can imagine it as a flat-pack box where there’s nothing inside and it’s currently being collapsed down to zero. If we want to see what’s going on, we need to give it some height and color.
So on our CSS, let’s start by giving the border some height and color:
.column { border: 2px solid red;}
At this point, what you’ll see is a red line which is actually the border on all 4 sides of the two <div> containers being squeezed together due to either no content or no spacing inside it. What we can do is we can either add HTML elements like paragraph or add a height property on the CSS.
However, we don’t normally want to give our containers a fixed height, because if we add, say, 10px of fixed height, and then add two lines of paragraph with a height of, say, 20px, what’s going to happen is the text is going to break the container, which can look ugly.
As a general rule, we use padding so that the space will be consistent along with whatever heights the content inside the container takes:
.column {
border: 2px solid red;
padding: 5%;
}
Then let’s work on our grid class. Here’s how we write it on our CSS:
.grid { display: grid;}
Now, it’s not going to do anything on it’s own, because we haven’t told how we want that grid to work. There’s a few ways we can do this, but the easiest way is with the grid-template-columns property. So on our CSS:
.grid {
display: grid;
grid-template-columns: 25% 75%;
}
Here we have specified how many columns we want (2 columns) and added the width we want each column to be.
The next we want to do is add the gap around each column. This could be in %, px, rem, or any valid CSS measurement you want:
.grid {
display: grid;
grid-template-columns: 25% 75%;
grid-column-gap: 10px;
}
You’ll see that it’s only adding the vertical gap intelligently just in between each column, unlike margin that would apply on all 4 sides of each column. But the problem is all of a sudden our grid is taking up more than 100% width of the page. We want them to keep everything 100% of the page width, regardless of how big the column gap is.
There’s another CSS Grid unit we can use called fr which literally means the fraction of the available space. Let’s add that instead to the grid-template-columns property on our CSS:
grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 10px;
}
You only need to calculate the total number of fr you’ve set (in this case 2fr) and distribute them however you like with how many grid columns you want. For example:
On our HTML:
<section class=”grid”>
<div class=”column”> </div>
<div class=”column”> </div>
<div class=”column”> </div>
</section>
On our CSS:
.grid {
display: grid;
grid-template-columns: 2fr 3fr 2fr;
grid-column-gap: 20px;
}
You’ll see that even with a new column being introduced and the grid column gap being widened, all of them are nicely taking up 100% width of the page.
In a mixed grid, essentially, we’re going to set multiple columns taking multiple lines where some of them are taking more width than the others. This is going to help us immensely when it comes to creating beautiful galleries or more advanced landing pages.
On our HTML:
<section class=”grid”>
<div class=”column column-big”> </div>
<div class=”column”> </div>
<div class=”column”> </div>
<div class=”column column-big”> </div>
</section>
On our CSS:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 20px;
}
.column-big {
grid-column: span 2;
}
You’ll see that the first and the fourth column is taking two-thirds of the 3 frs available on each of their lines.
To wrap this up, let’s do an activity of creating a checkerboard grid. So first, let’s rebuild our Codepen project:
On our HTML:
<section class=”grid”>
<div class=”column dark”>
<h2>Dark</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla purus vel arcu feugiat, vel vestibulum libero mattis. Phasellus sit amet aliquam magna. Vestibulum quis ligula ligula.</p>
</div>
<div class=”column light”>
<h2>Light</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla purus vel arcu feugiat, vel vestibulum libero mattis. Phasellus sit amet aliquam magna. Vestibulum quis ligula ligula.</p>
</div>
<div class=”column light”>
<h2>Light</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla purus vel arcu feugiat, vel vestibulum libero mattis. Phasellus sit amet aliquam magna. Vestibulum quis ligula ligula.</p>
</div>
<div class="column dark">
<h2>Dark</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla purus vel arcu feugiat, vel vestibulum libero mattis. Phasellus sit amet aliquam magna. Vestibulum quis ligula ligula.</p>
</div>
</section>
On our CSS:
.column {
padding: 10%;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.dark {
background-color: #2d3436;
color: white;
}
.light {
background-color: #dfe6e9;
color: #2d3436;
}
h2 {
margin-bottom: 2rem;
}
Give that a go guys, try to add something new to the things we’ve learned in this lesson and layer them on top of each other to cement that learning further. Good luck!
Practice what you’ve learned so far - play with creating a couple of different grids, make some of the columns bigger or taller, give the background and the text different colors, etc.