Nowadays, more and more web developers are using CSS Grid layout to define their layout system. In this tutorial, I am going to show you some essential concepts of grid layout in order to help you can understand and use it. Let’s start
What can the Grid layout do while other CSS can not?
Before start trying out the Grid system, we must know why we need to use it? Basically, we can define our layout without the Grid system, we can use Flex CSS, display or position… ? But those CSS techniques require some hacks and tricks and is not convenient to make it work. However, with the Grid CSS, we can do that very easily without pulling your hair.
HTML structure
Start with HTML structure. In most case, to use Grid system, we need a wrapper element which contains several children element that is treated as a cell in the table. Our grid css will mostly apply for the wrapper element. This approach is easier compare to flexbox CSS which requires setting CSS for both wrapper element and children element.
<div class="wrapper"> <div>Cell 1</div> <div>Cell 2</div> <div>Cell 3</div> <div>Cell 3</div> <div>Cell 4</div> <div>Cell 5</div> <div>Cell 6</div> </div>
Display:grid and display:inline-grid
After having the HTML structure, we will apply the grid layout for it by using
display:grid
(for the full size grid) or
display:inline-grid
(for matching the content size).
See the Pen Grid 1 by hieu (@phuchieuct93abc) on CodePen.
Come with
display:grid
or
display:inline-grid
, we have 2 other essential properties:
grid-templates-columns
and
grid-templates-columns
. That CSS defined how much space will be taken by columns or rows. Beside that other css property
grid-gap
help us to define the space between columns and rows (Keep in mind that grid-gap doesn’t affect the space between columns/row with their wrapper element)
Syntax:
.wrapper {
display: grid;
grid-templates-columns: <Size column 1> <Size column 2> <Size column 3> <Size column 4> ...;
grid-templates-rows: <Size row 1> <Size row 2> <Size row 3> ...;
grid-gap: <Size>
}
/*The unit for grid-template can be percentage, px,em, and fr(1fr - 1 fraction, means that column/row take the remaining space, if there is more than 1 column is set by 1fr, the reamining space will be divided equally with the number of columns)*/
Example
See the Pen Grid 2 by hieu (@phuchieuct93abc) on CodePen.
What can be easier than this?
Shorthand
Ok, but we have a minor problem here, what happens if we have a huge number of columns/rows. We need to copy/paste the size for each columns/rows template, don’t we? No absolutely, because we have a CSS shorthand to help us define grid-tempalte-columns/grid-template-rows more efficient in case a lot of cells inside.
Syntax
.wrapper {
grid-templates-columns: repeat(<Number of columns>, <Size each columns>);
grid-templates-rows: repeat(<Number of rows>, <Size each rows>);
}
/* Or even shorter*/
.wrapper {
grid-templates: repeat(<Number of rows>, <Size each rows>) / repeat(<Number of columns>, <Size each columns>);
}
Example
See the Pen Grid 3 by hieu (@phuchieuct93abc) on CodePen.
Advanced usages
Minimum-maximum size
In the basic grid layout, we need to define the fixed size for each column/row. However in some cases, the size can’t be fixed because it depends on the content size, but we also need to limit that size in a range to make sure if something go too big, it doesn’t break our layout
In the grid layout, we can use
minmax
as a value for
grid-template-columns
or
grid-template-rows
, it can be used in
repeat
as well
Syntax
grid-template:minmax(Example
See the Pen Grid 4 by hieu (@phuchieuct93abc) on CodePen.
Explanation:
Spanning
With the grid layout, each cell is not limited in its own column/row, it can be put in any cell and can span to next columns/rows
Example:
See the Pen Grid 3 by hieu (@phuchieuct93abc) on CodePen.
Auto-fill
In the above examples, we can see that we need to define the fixed number of columns/rows in a grid layout.
repeat
function come up to help us define a size for a large number of columns/rows. But something it’s not enough, we can’t determine the exact number for columns/rows because it depends on the screen size, dynamic data… These factors can impact on the number of columns/row we want to display on the screen. We need another way to make grid layout become responsive
auto-fit can help us to solve this problem,
auto-fill
can replace the number of columns/rows that we use in
repeat
. Auto-fit mean the grid layout will try to put as many as columns in a row until it can not put more. The remaining white space will be kept.
Example
See the Pen Grid 5 auto-fit by hieu (@phuchieuct93abc) on CodePen.
Auto-fit
The same purpose with auto-fill but auto-fit make the white space will be distributed for other columns rather than be kept like auto-fit
See the Pen Grid 5 auto-fit by hieu (@phuchieuct93abc) on CodePen.
Final words
You have learned the basic usage of the grid layout system, why don’t you spent a little time to practice it and see how could we design a layout before the grid system was introduced