CSS Grid layout review with examples: Part 1

CSS Grid layout review with examples: Part 1

6th July 2018 0 By Azadeh

This post is the first post about CSS grid layouts. It is more based on examples and I don’t want to go to details as there are many sources for this. I want it to be more practical and visual instead.

A grid container

The grid container is boxes placed within certain boundaries and every website has made upon that. The below gif by gif by chris bannister shows the grid layout:

gif by chris bannister

Simply a grid is just horizontal and vertical lines that define the placement of other design elements.

Grid Lines

They are the horizontal and vertical lines that divide the grid.

The grid Cell

A Grid cell is the smallest unit of area in a grid layout.

Grid Area

A grid area may be as small as the area contained within a grid cell. Or it may be as large as all the cells within the grid.

Now we will have a look at some examples from grid by example.

Line-based placement

See the Pen Grid by Example 2: Line-based placement by rachelandrew (@rachelandrew) on CodePen.

The main container has display: gridProperty which defines the grid. It also has grid-template-columns: 100px 100px 100pxproperty which defines three column of 100px width.We could use fr which is fr. The fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one third the width of the grid container:

grid-template-columns: 1fr fr 1fr;

Each cell has grid-column-startproperty that sets the staarting column of the cell and grid-column-end  sets the column that the cell end in. We have the same properties with row to define the grid cell positioning inside the rows as well. grid-row-start and  grid-row-end.

Shorthand – grid-row and grid-column

In the example below the shorthand syntax has been used column and row properties:

See the Pen Grid by Example 3: Line-based placement shorthand by rachelandrew (@rachelandrew) on CodePen.

For example for the F word we use grid-column: 3 / 4; and grid-row: 1 / 2; to define start and end of the column and row.( start from 3rd column and end in column for and so on).

Placement named lines

We could also name the cells ( or lines as grid layout is made of lines) as in the below example:

See the Pen Grid by Example 7: Line-based placement named lines by rachelandrew (@rachelandrew) on CodePen.

For example to define the rows we use names like this: grid-template-rows: [row1-start] auto [row2-start] auto [row2-end]; which is more definitive and descriptive if you wish.

Using repeat notation

The values for repeat are the number of times you want the expression to repeat and then the expression. In this example:

See the Pen Grid by Example 9: The repeat keyword by rachelandrew (@rachelandrew) on CodePen.

Instead of naming the columns and rows, we use the shorter syntax called repeat notation like this:

grid-template-columns: repeat(4, [col] 100px ) ;

Which means we create 4 columns with 100px width.

We saw the grid layout with some practical examples. In the next article we will show more examples and will explain mroe properties in practice around grid layout.