In this week’s post, I wanted to explore CSS Grid. The pen that I created below is meant to be a personal start page but it is also a good example of how CSS Grid works.
See the Pen
CSS Grid 101 by Joe Steinbring (@steinbring)
on CodePen.
You will notice …
.grid-container {
display: grid;
grid-column-gap: 20px;
grid-template-columns: auto auto auto auto;
grid-row-gap: 10px;
}
… surrounds all of the content on the page. The display:grid; bit makes the element a grid container. The grid-column-gap and grid-row-gap are pretty self explainable. If you wanted to, you could also use grid-gap and define both the column gap and the row gap in the same line. The grid-template-columns bit is pretty powerful because you can use auto and evenly space the columns across the screen but you can also define them like grid-template-columns: 50px auto 50px auto; or grid-template-columns: 100px 50px 100px 50px; and it will adapt.
w3cschools has a pretty good illustration of how the grid-column-start and grid-column-end definitions work.
If you have a 3 by 3 grid and you say …
grid-column-start: 1;
grid-column-end: 3;
… the cell will start at line one and end at line three (meaning that it will fill the first and second cells in the grid). If you want to fill all three cells in the line, you need to do …
grid-column-start: 1;
grid-column-end: 4;
If you have any questions, let me know below. I am going to try to do a flexbox post soon, so we can start comparing and contrasting the approaches.