If you’re a web developer, you already know the importance of a reliable responsive web layout that works across different browsers. There are several ways to control your webpage layout; you can use tables, the box model, or CSS Flexbox.
But, in this beginner-level CSS grid tutorial, I’m going to introduce the method I find most efficient: CSS Grid.
What is CSS Grid?
Working with the gird is pretty straightforward. Just like Flexbox, the grid is a value you can set for the CSS display property. Therefore, once you set display: grid on an element, the browser will render a block-level box. The element’s children, known as grid items, will behave differently from the normal block and inline elements.
The CSS grid layout
The two major elements of a CSS Grid are “wrappers” and “items.” You only need a few simple lines of code to set up your grid. With the following code you’ll get a wrapper with six items inside it:
<div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
Tip: You can force a grid container to behave like an inline-level box by setting display: inline-grid.
Columns and rows
To see the benefits of the grid, you need to start creating columns and rows. This is pretty simple to do:
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
The values you assign to grid-template-columns and grid-template-rows will define the number of columns and rows in your layout, respectively.
The above code will result in a basic grid with three equal-width columns and two equal-height rows:
Now that you have a grid, you should learn how to modify it. This is where you realize how simple CSS Grid will make your job easier when creating layouts.
Grid gap
The grid-gap property lets you set the distance between the items. It will allow you to add margins to each item. You can use grid-column-gap and grid-row-gap to set the size of the gap you want between the items. Using the code below, all the gaps to have the same size:
wrapper {
display: grid;
grid-template-columns: 10rem 10rem 10rem;
grid-gap: 1rem;}
Sizing
You already set the column and row sizes in grid-template-column and grid-template-row, but to resize any single item from the grid, you can use the span property to spread one item across the width of the column. You should be aware of how this will affect the other items’ placing. Here is an example to better demonstrate this:
.item5 { grid-column: span 2;}
Here, item5 is set to span across two columns.
You can use the same method for rows by using the grid-row property and span.
Placement
If you don’t like the blank spaces between your items, you can simply solve the problem by using grid-auto-flow: dense. The grid will check if the items fit and try to fill the gaps with any item that fits. For example, if we span the fifth item across three columns, we can add a seventh item and the grid-auto-flow will fit them together:
.wrapper {
display: grid; grid-template-columns: repeat(3, 10rem);
grid-gap: 1rem;
grid-auto-flow: dense;}
.item5 { grid-column: span 3;}
As you see, the number of rows has changed even though we had previously set it. This property automatically modifies the placement of columns and rows to fit the items.
You can also use grid-column-start and grid-column-end to resize the items manually. This is simpler than the first approach, but you need to understand how grid lines work before you can use it.
The number of column lines is the number of columns plus one because the first line starts before the first column and the last line is after the last one. This image can help you understand how it works:
Here, item1 is expanded from the first column line to the fourth, which is the span of three columns. This can be done using this code:
.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
You can achieve the same result, using the following code:
.item1 { grid-column: span 3;}
If you don’t want to use the grid-auto-flow, you can try to manipulate your items manually using the grid-column-start and grid-column-end properties. Here is an output of a grid fit together using this method. Try and figure out the code that was used to create this CSS grid layout, as an exercise.
Grid values and functions
Those were the basics of CSS grid for beginners but now it’s time to learn a few cool CSS grid tricks. Fortunately, the grid gives you a lot of flexibility. You can use other values for grid-template-columns to create more complex structures:
- Using grid-template-columns: min-content creates the smallest column possible without causing an overflow.
- Using grid-template-columns: max-content creates a column with the maximum space required to display its content without wrapping.
You can see how the two values work in the image below:
You can set the maximum space that a column is allowed to take using the fit-content() function. The value is passed as an argument of the function:
grid-template-columns: fit-content(200px)
It’s also possible to use the repeat() function to avoid typing out the same value(s) over and over again. For example, the first line of code below creates twelve columns, each of which is 150 pixels wide. On the other hand, the second example fills the container with as many 150px columns as will fit and leaving a gap at the end, if any space remains.
grid-template-columns: repeat(12, 150px); grid-template-columns: repeat(auto-fill, 150px);
Bottom line
The CSS Grid is an excellent tool for creating responsive layouts. After reading this beginner’s guide, now you have all the basic information you need to start using CSS Grid. As you saw in this CSS grid for beginners, working with the grid layout is easier than you think! Go ahead and practice what you’ve learned by creating great layouts.
Be First to Comment