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(,); /*The min size, max size unit can be percentage, px, fr or auto (fit the content size)*/

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

Leave a Reply

Your email address will not be published.