Home and Learn: Web Design Course
CSS Grids
In previous lessons, you've seen how to lay out your pages using columns. But there is another way to position elements on your page, and that's with CSS Grids.
With HTML and CSS, it can be quite tricky to lay out images and text on your pages exactly where you want them. For example, suppose you want a layout like this:
You could use things like floats and position elements to do the job. But it's all very fiddly. That's where CSS Grids come in.
CSS Grids
In CSS, you can get a basic grid by using the display property and setting it to grid or inline-grid (there's a text file to download shortly, so you don't have to do anything yet):
<style>
.gridHolder {
display: grid;
}
</style>
<style>
.gridHolder {
display: inline-grid;
}
</style>
Here, we've set up a class called b (a totally made up name with no significance). Then we've used the property display. After a colon, type grid or inline-grid as the value for display. (The difference between the two is that the grid value means your row contents expand to the width of your web page. An inline-grid won't expand to the width.)
You'd then apply your class to some HTML, usually a DIV:
<DIV class="gridHolder">
</DIV>
But you need some more DIVS to get the rows of the grid:
<DIV class="gridHolder">
<DIV>Row One</DIV>
<DIV>Row Two</DIV>
<DIV>Row Three</DIV>
<DIV>Row Four</DIV>
</DIV>
To see what that gets you, click here:
Results: grid-1.html
The full HTML is here:
Source Code: grid-1
Save the file to your own computer with the name grid-1.html. Then you can edit the file and play around with the code.
OK, quite boring. It's just four rows with no formatting. Let's add some formatting.
Add a row color to the Style with this:
<style>
.gridHolder {
display: grid;
}
.rowColor {
background-color: rgb(219, 159, 159);
margin: 3px;
}
</style>
Now add the class to each row:
<DIV class="gridHolder">
<DIV class="rowColor">Row One</DIV>
<DIV class="rowColor">Row Two</DIV>
<DIV class="rowColor">Row Three</DIV>
<DIV class="rowColor">Row Four</DIV>
</DIV>
The above script would get you this:
Result: grid-2.html
The full HTML is here:
Source Code: grid-2
Try changing the grid to inline-grid to see what happens.
Setting Row Sizes
You can set heights for your rows with the grid-template-rows property:
.gridHolder {
display: grid;
grid-template-rows: 100px 120px;
}
Here's the results of the above script:
Result: grid-3.html
The full HTML is here:
Source Code: grid-3
Note the hyphens separating each word of grid-template-rows. After the colon, you can specify a size in pixels (px), as a percentage (%), or as an em value:
100px 120px;
30% 20%;
5em 10em
But note you don't use a comma to separate your values, just a space.
In the CSS above, we've only specified sizes for two of the rows. This will size the first two rows. The size of the other two rows will depend on the contents of those rows.
Grid Columns
Of course, you can set columns as well as rows. You do it with the grid-template-columns property:
.gridHolder {
display: grid;
grid-template-columns: auto auto;
}
Notice the new property value here - auto. We've used it twice, meaning two columns. The size will adjust automatically, depending on the size of the page. Reduced the width of the browser and the columns change size.
Here's the results of the above script:
Result: grid-4.html
The full HTML is here:
Source Code: grid-4
If you wanted three columns in a 3 by 2 grid, you'd first increase the number of divs you have:
<DIV class="gridHolder">
<DIV class="rowColor">One</DIV>
<DIV class="rowColor">Two</DIV>
<DIV class="rowColor">Three</DIV>
<DIV class="rowColor">Four</DIV>
<DIV class="rowColor"> Five</DIV>
<DIV class="rowColor"> Six</DIV>
</DIV>
And then use three autos:
.gridHolder {
display: grid;
grid-template-columns: auto auto auto;
}
Here's the results of the above script:
Result: grid-5.html
The full HTML is here:
Source Code: grid-5
If you want a fixed columns size, you can use the px, %, or em values again:
.gridHolder {
display: grid;
grid-template-columns: 100px 150px 500px;
}
Setting a fixed size like this means you don't want your grid to resize when the width of the browser is changed.
Notice that you don't need to set the rows, if you're setting the columns: the number of rows will be calculated based on how many columns you have.
Fractions
You can use the fraction value fr instead of auto, px, %, or em:
.gridHolder {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
}
Here, you're saying you want the first two columns to take up 1 fraction of the available space. The third column takes up 2 fractions. The advantage of using fr is that you get different column widths without using hard-code values like pixels or em values. (You can actually mix your values [100px, 25% 2fr]. But that only adds a whole new level of complexity that can ruin your day.)
If you want a neat number of rows and columns, you can use the repeat value. Suppose you wanted a 3 by 3 square of cells. You'd set up your divs like this:
<DIV class="gridHolder">
<DIV class="rowColor">Two</DIV>
<DIV class="rowColor">Three</DIV>
<DIV class="rowColor">Four</DIV>
<DIV class="rowColor">Five</DIV>
<DIV class="rowColor">Six</DIV>
<DIV class="rowColor">Seven</DIV>
<DIV class="rowColor">Eight</DIV>
<DIV class="rowColor">Nine</DIV>
</DIV>
And your CSS like this:
.gridHolder {
display: grid;
grid-template-rows: repeat(3, 150px);
grid-template-columns: repeat(3, 150px);
}
The repeat value is the word repeat followed by a pair of round brackets. Inside the round brackets, you first type how many rows or columns you want. After a comma, you then type a size for the rows and columns.
Here's the results of the above script:
Result: grid-6.html
The full HTML is here:
Source Code: grid-6
Grid Gaps
You can specify gaps between the rows or columns of your grid:
Use the grid-row-gap or grid-column-gap for this:
grid-row-gap: 10px;
grid-column-gap: 5px;
You can also use the shorthand grid-gap to set values for both:
grid-gap: 10px;
Or set values for the rows then the columns:
grid-gap: 10px 5px;
Row and Column Line Numbers
CSS Grids have imaginary lines that you can refer to. The line numbers are then used to span or position cells or cell contents. Examine this image:
If you wanted to point to the middle cell, Row2, Col2, you'd say that its column number started at column 2 and ended at column 3. Likewise, its row number started at row 2 and ended at row 3. In CSS, it would be this:
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
Or you could shorten it to this:
grid-row: 2 / 3;
grid-column: 2 / 3;
A forward slash separates the start number from the end number.
This all matters most when it comes to cell and col spanning. Suppose you wanted a grid like this:
The Heading is stretched across 3 columns. In which case, the line numbers to set would be this:
grid-column-start: 1;
grid-column-end: 4;
The CSS and DIVS would then be this:
.headerSpan {
grid-column-start: 1;
grid-column-end: 4;
background-color: rgb(159, 219, 172);
margin: 3px;
}
<DIV class="gridHolder">
<DIV class="headerSpan">Row
One</DIV>
<DIV class="rowColor">Row Two</DIV>
<DIV class="rowColor">Row Three</DIV>
<DIV class="rowColor">Row Four</DIV>
<DIV class="rowColor">Row Five</DIV>
<DIV class="rowColor">Row Six</DIV>
<DIV class="rowColor">Row Seven</DIV>
<DIV class="rowColor">Row Eight</DIV>
<DIV class="rowColor">Row Nine</DIV>
</DIV>
The result would be this:
Result: grid-8.html
The full HTML is here:
Source Code: grid-8
If you wanted a layout like this:
Then the CSS and divs would be this:
.rowSpan {
grid-row-start: 1;
grid-row-end: 4;
background-color: rgb(159, 219, 172);
margin: 3px;
}
<DIV class="gridHolder">
<DIV class="rowSpan">One</DIV>
<DIV class="rowColor">Two</DIV>
<DIV class="rowColor">Three</DIV>
<DIV class="rowColor">Four</DIV>
<DIV class="rowColor">Five</DIV>
<DIV class="rowColor">Six</DIV>
<DIV class="rowColor">Seven</DIV>
</DIV>
The result would be this (we'll do cell alignment next):
Result: grid-7.html
The full HTML is here:
Source Code: grid-7
So, just look at the line numbers and work out which ones you need. You may need to chop a few of your divs out to get the layout you need, though.
Aligning text in a CSS Grid
If you want to centre things in a cell, you can use the justify-items and align-items properties. The first is used for rows and the second for columns. You can then use the following as values:
auto
normal
start
end
center
stretch
baseline
first baseline
last baseline
Suppose you want all your text centred in each of the cells. You want this:
The CSS would be as follows, for the alignment part:
.colRowAlign {
display: grid;
align-items: center;
justify-items: center;
background-color: lightcoral;
}
And the DIVS would be this:
<DIV class="gridHolder">
<DIV class="colRowAlign">One</DIV>
<DIV class="colRowAlign">Two</DIV>
<DIV class="colRowAlign">Three</DIV>
<DIV class="colRowAlign">Four</DIV>
<DIV class="colRowAlign">Five</DIV>
<DIV class="colRowAlign">Six</DIV>
<DIV class="colRowAlign">Seven</DIV>
<DIV class="colRowAlign">Eight</DIV>
<DIV class="colRowAlign">Nine</DIV>
</DIV>
Notice that, for the CSS, we have display: grid again. Miss this out and the text won't align when we use align-items: center and justify-items: center.
And, finally, here, the page and code for the layout at the top of this lesson:
Result: grids-9.html
The full HTML is here:
Source Code: grid-9
In the next lesson, we'll take a look at adding text shadows and box shadows using CSS.
<< Two Column Layout | CSS Shadows >>