Basic concepts

A grid is an intersecting set of horizontal and vertical lines – one set defining columns and the other rows. Elements can be placed onto the grid, respecting these column and row lines. CSS grid layout has the following features:

Crid container

We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this all direct children of that element will become grid items.

See:


            #grid{
            display: grid;
            }

1

2

3

4

Grid Tracks

We define rows and columns on our grid with the grid-template-columns and grid-template-rows properties. These define grid tracks. A grid track is the space between any two lines on the grid.

Set width column 100 pixels:

#grid{
            display: grid;
            grid-template-columns:
            100px 100px 100px 100px;
            }

1

2

3

4

Set width columns with fr:

#grid{
            display: grid;
            grid-template-columns:
            1fr 1fr 1fr 1fr;
            }

1

2

3

4

Grid Tracks with repeat notation

Repeat notation can be used for a part of the track listing.

Create grid with 50px track then repeating section of 3 2fr tracks:

#grid{
            display: grid;
            grid-template-columns:
            50px repeat(3, 2fr);
            }

1

2

3

4

Create a repeating pattern of tracks:

#grid{
            display: grid;
            grid-template-columns:
            repeat(3, 3fr 1fr);
            }

1

2

3

4

5

6

Grid track sizing and minmax()

We can define a set size for tracks with the grid-auto-rows and grid-auto-columns properties.

In grid we may give tracks a minimum and maximum size with the minmax() function. We using minmax() in the value of grid-auto-rows.

Using auto means that the size will look at the content size and will stretch to give space for the tallest item in a cell, in this row.

Set track 50px tall:

#grid{
            display: grid;
            grid-template-columns:
            repeat(3, 1fr);
            grid-auto-rows: 50px
            }

1

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis nibh ligula. Donec non lectus et elit pharetra fringilla a in magna. Aenean pellentesque efficitur porta.

4

5

6

7

8

9

Create grid with minimum 50px tall and maximum of auto:

#grid{
            display: grid;
            grid-template-columns:
            50px repeat(3, 2fr);
            grid-auto-rows: minmax(50px, auto)
            }

1

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis nibh ligula. Donec non lectus et elit pharetra fringilla a in magna. Aenean pellentesque efficitur porta.

4

5

6

Grid lines

It should be noted that when we define a grid we define the grid tracks, not the lines. Grid then gives us numbered lines to use when positioning items.

Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Lines can also be named, and we will look at how to do this with grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-row, grid-column properties.

Grid-column-start and grid-column-end properties:

#grid{
            display: grid;
            grid-template-columns:
            repeat(3, 1fr);
            }
            #block-1{
            background-color: #ffe5d4
            grid-column-start: 1;
            grid-column-end: 3;
            }

#block-1

2

3

4

5

6

7

8

Grid-row-start and grid-row-end properties:

#grid{
            display: grid;
            grid-template-columns:
            repeat(2, 1fr);
            }
            #block-1{
            background-color: #ffe5d4;
            grid-row-start: 1;
            grid-row-end: 3;
            }

#block-1

2

3

4

5

6

7

8

9

Grid-column and grid-row properties:

#grid{
            display: grid;
            grid-template-columns:
            repeat(3, 1fr);
            }
            #block-1{
            background-color: #ffe5d4
            grid-column: 1/3;
            grid-row: 1/3;
            }
            #block-8{
            background-color: #ffe5d4
            grid-column: span 4;
            grid-row: 4;
            }

#block-1 grid-column: 1/3;
//starting in the 1 column and ending in the 3th
grid-row: 1/3;
//starting in the 1 row and ending in the 3th

2

3

4

5

6

7

#block-8 grid-column: span 4;
// Starting in the 1 column and ending in the 5th
grid-row: 4;
//starting in the 4th row and ending in the 5th

Gutters

Gutters or alleys between grid cells can be created using the column-gap and row-gap properties, or the shorthand gap.

Column-gap and row-gap properties:

#grid{
            display: grid;
            grid-template-columns:
            repeat(3, 1fr);
            column-gap: 5px;
            row-gap: 15px
            }

1

2

3

4

5

6

Gap property:

#grid{
            display: grid;
            grid-template-columns:
            repeat(3, 1fr);
            gap: 10px;
            }

1

2

3

4

5

6

Aligment in CSS Grids

In the grid layout, we are aligning the items inside their grid area. We can use justify-items, justify-self, align-self and align-items properties with values: auto, normal, start, end, center, stretch, baseline.

Justify-items and align-items properties:

#grid{
            display: grid;
            grid-template-columns:
            repeat(3, 1fr);
            grid-auto-rows: 130px;
            justify-items: end;
            align-items: end;
            }

1

2

3

4

Align-self and justify-self properties:

#grid{
            display: grid;
            grid-template-columns:
            repeat(3, 1fr);
            grid-auto-rows: 140px;
            justify-items: start
            align-items: center;
            }
            #block-1{
            align-self: stretch;
            justify-self: stretch;
            }

#block-1

2

3

4

Auto-filling trucks in CSS Grids

Grid can to create as many column tracks as will fit in the container. We use repeat notation and the auto-fill and auto-fit properties for it. And for flexibility we can use minmax() function in repeat notation.

Auto-fill property:

#grid{
            display: grid;
            grid-template-columns:
            repeat(auto-fill, 120px);
            }

1

2

3

4

5

6

7

8

Auto-fill property with minmax():

#grid{
            display: grid;
            grid-template-columns:
            repeat(auto-fill, minmax(120px, 1fr));
            }

1

2

3

Long long long long long long long very long text...

5

6

7

8

Automatic Placement in Grid

Grid items that aren’t explicitly placed are automatically placed into an unoccupied space in the grid container by the auto-placement algorithm. grid-auto-flow controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. Grid-auto-flow has values: row, column, dense.

row: The auto-placement algorithm places items by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.
column: The auto-placement algorithm places items by filling each column in turn, adding new columns as necessary.
dense: If specified, the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

Grid-auto-flow property with row value:

#grid{
            display: grid;
            grid-template-columns:
            repeat(3, 1fr);
            grid-auto-flow: row;
            }
            #block-1{
            grid-column: 1/span 2;
            }
            #block-2{
            grid-row: 2/span 2;
            }

#block-1 grid-column: 1/span 2;
//start in the 1 column and ending in the 3th

#block-2 grid-row: 2/span 2;
//start in the 2 row and ending in the 4th

3

4

5

6

7

8

Grid-auto-flow property with column value:

#grid{
            display: grid;
            grid-template-columns:
            repeat(3, 1fr);
            grid-auto-flow: column;
            }
            #block-1{
            grid-row: 1/span 3;
            }
            #block-2{
            grid-row: 1/span 2;
            }

#block-1 grid-row: 1/span 3;
//start in the 1 row and ending in the 4th

#block-2 grid-row: 1/span 2;
//start in the 1 row and ending in the 3th

3

4

5

6

7

8

Grid-auto-flow property with dense value:

#grid{
            display: grid;
            grid-template-columns:
            repeat(3, 1fr);
            grid-auto-flow: dense;
            }
            #block-1{
            grid-column: span 2 / 4 ;
            }
            #block-2{
            grid-row: 1/span 4;
            }
            #block-4{
            grid-row: 3 / span 2;
            }

#block-1 grid-column: span 2 / 4 ;
// start in the 4 column and ending in the 2th column

#block-2 grid-row: 1/span 4;
// start in the 1 row and endind in the 5th

3

#block-4 grid-row: 3 / span 2;
//start in the 3 row and ending in the 5th

5

6

7