Working with CSS Grid Property

Overview

First of all we have to understand what is the actual structure or layout followed by CSS grid, CSS grid follows 2 dimensional structure for layout like for column and row. Where as, floex and other dom element follow the 1 dimensional structure that is column base.

From these concept the CSS grid is able to make grid with same facilities which is provided by flex structure and even more than that. Let’s understand how it works and what is the scenario behind it.

How it works?

To understand how it works we will first divide all properties into two parts:

  1. Property which is related to grid container or grid wrapper.
  2. Property which is related to grid items.

First we take some html structure for understanding further properties.

Example:

grid-image1

Property related to grid container or grid wrapper

Display as grid

First we set parent as display: grid; so every child behave like a grid item.
Example:

grid-template-columns

This property is used to define how many columns are in your grid with how much width.
Example:

– It will create 3 columns with width of 150px.

grid-template-rows

This property is used to define how many rows are in your grid with how much height.
Example:

– It will create 3 rows with height of 150px.

grid-template

This property is shorthand property for column and row both in one line declaration.
Example:

– It will create 3 rows with height of 150px, and 3 columns with width of 150px. Please make sure parameter before “/” are for rows value, and after “/” are for column value.

grid-template-areas

This property is used to define grid item location for specific column and row. Here we supposed that child elements has already set their grid-area name with their class name.
Example:

– It will create 3 rows with height of 150px, and 3 columns with width of 150px. Also it sets child element as their template area name defined.

grid-gap ( grid-column-gap, grid-row-gap)

This property is used for putting gap between columns and rows. You can give different property for the individuality like only for columns using “grid-column-gap” and only for rows using “grid-row-gap”.
Example:

– Above both styles make gap of 15px for column and rows, for “grid-gap” the first parameter are for row gap size and second for column gap size.

repeat

This property is used for making loop base continuous grid.
Example:

– Above styles make three 150px width columns and three 150px height rows.

fr

This stands for fraction of the free space of the grid. It calculates the non fixed free space of the grid.
Example:

– Above styles make three equal size columns.

Demo Sample for grid-container property:

grid-image2

justify-items ( start, center, end, stretch )

1) start: align items content on horizontally left.
Example:

grid-image3

2) center: align items content on horizontally center.
Example:

grid-image4

3) end: align items content on horizontally right.
Example:

grid-image5

4) stretch: align items content on horizontally stretch.
Example:

grid-image2

align-items ( start, center, end, stretch )

1) start: align items content on vertically top.
Example:

grid-image6

2) center: align items content on vertically middle.
Example:

grid-image7

3) end: align items content on vertically bottom.
Example:

grid-image8

4) stretch: align items content on vertically stretch.
Example:

grid-image2

justify-content (start, center, end, stretch, space-around, space-between, space-evenly)

1) start: justify content on horizontally left.
Example:

grid-image2

2) center: justify content on horizontally center.
Example:

grid-image9

3) end: justify content on horizontally right.
Example:

grid-image10

4) stretch: justify content on horizontally stretch.
Example:

grid-image2

5) space-around: manage grid space horizontally same size around content items.
Example:

grid-image11

6) space-between: manage grid space horizontally same size only in between items.
Example:

grid-image12

7) space-evenly: manage grid space horizontally same size allover grid item.
Example:

grid-image13

align-content (start, center, end, stretch, space-around, space-between, space-evenly)

same as the “justify-content” only difference is the direction change, it makes all control in vertical direction.

1) start: align content on vertically top.
Example:

grid-image14

2) center: align content on vertically center.
Example:

grid-image15

3) end: align content on vertically bottom.
Example:

grid-image16

4) stretch: align content on vertically stretch.
Example:

grid-image14

5) space-around: manage grid space vertically same size.
Example:

grid-image17

6) space-between: manage grid space horizontally same size only in between items.
Example:

grid-image18

7) space-evenly: manage grid space horizontally same size allover grid item.
Example:

grid-image19

Property related to grid container items

Here all properties are related to individual grid item, so scope of the property is limited to that item only. To get better understanding we take one general Example.

Demo sample for single grid item

grid-image20

Note: line-name value does not support “grid-template” property of grid-container, it supports available grid templates for “grid-template-columns” and “grid-template-rows” properties.

grid-column-start ( line, number, name )

1) line / name: It may be number or name of column based on grid container where line-names are defined.
Example:

Above property start child1 from second number column because of parent div containing “column2” line-name at second column place.

2) number: This is based on default column numbering, this property does not rely on grid-container line-name.
Example:

Above property start child1 from second number column.

grid-column-end ( line, number, name )

1) line / name: It may be number or name of column based on grid container where line-names are defined.
Example:

Above property end child1 to third number column because of parent div containing “column3” line-name at third column place.

2) number: This is based on default column numbering, this property does not rely on grid-container line-name.
Example:

Above property end child1 to third number column.

grid-row-start ( line, number, name )

1) line / name: It may be number or name of row based on grid container were line-names defined.
Example:

Above property start child1 from second number row because of parent div containing “row2” line-name at second row place.

2) number: This is based on default row numbering, this property does not rely on grid-container line-name.
Example:

Above property start child1 from second number row.

grid-row-end ( line, number, name )

1) line / name: It may be number or name of row based on grid container where line-names are defined.
Example:

Above property end child1 to third number row because of parent div containing “row3” line-name at third row place.

2) number: This is based on default row numbering, this property does not rely on grid-container line-name.
Example:

Above property end child1 to third number row.

justify-self ( start, center, end, stretch )

It works completely same as “justify-items” property of grid-container only difference is that it is limited to only an individual item itself.

Example:

align-self ( start, center, end, stretch )

It works completely same as “align-items” property of grid-container only difference is that it is limited to only an individual item itself.

Example:

Demo sample for grid-item property:

grid-image21

Conclusion

If you have good hands on CSS and HTML, and you want to make custom grid structure using CSS rather than HTML and want to move block through CSS then definitely this the best way to do that, because you do not write any js code or does not change HTML structure code from HTML file, you only just need CSS for that. Hope it will help you!

mm

Parthiv Butani Web Designer

I am a web designer and a creative artist at Yudiz Solutions Pvt. Ltd. - a leading Web and Mobile Apps development company. I am willing to find an effective solution with a cup of coffee for difficult design problems which I faced.

Comments are closed.

Top