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:
- Property which is related to grid container or grid wrapper.
- Property which is related to grid items.
First we take some html structure for understanding further properties.
Example:
<style>
.parent { background: #d4d4d4;}
.parent > div { min-height: 40px;}
.child1 { background: #ff00d0;}
.child2 { background: #9800ff;}
.child3 { background: #2200ff;}
.child4 { background: #0083ff;}
.child5 { background: #00e9ff;}
.child6 { background: #00ff90;}
.child7 { background: #19ff00;}
.child8 { background: #ffaa00;}
.child9 { background: #ff0000;}
</style>
<div class=”parent” >
<div class=”child-1’></div>
<div class=”child-2’></div>
<div class=”child-3’></div>
<div class=”child-4’></div>
<div class=”child-5’></div>
<div class=”child-6’></div>
<div class=”child-7’></div>
<div class=”child-8’></div>
<div class=”child-9’></div>
</div>
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:
{ display: grid; }
grid-template-columns
This property is used to define how many columns are in your grid with how much width.
Example:
{ grid-template-columns: 150px 150px 150px; }– 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:
{ grid-template-rows: 150px 150px 150px; }– 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:
{ grid-template: 150px 150px 150px / 150px 150px 150px; }– 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:
{ grid-template: 150px 150px 150px / 150px 150px 150px;
grid-template-areas: “child1 child2 child3”
“child4 child5 child6”
“child7 child8 child9”;}– 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:
{ grid-gap: 15px 15px;}
{ grid-column-gap: 15px; grid-row-gap: 15px;}– 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:
{ grid-template-columns: repeat(3, 150px); grid-template-rows: repeat(3, 150px); }– 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:
{ grid-template-columns: 1fr 1fr 1fr;}– Above styles make three equal size columns.
Demo Sample for grid-container property:
<style>
.parent { background: #D4D4D4;
display: grid;
grid-template: 150px 150px 150px / 150px 150px 150px;
grid-template-areas: "child1 child2 child3" "child4 child5 child6" "child7 child8 child9";
grid-gap: 15px 15px; }
.child1 { background: #ff00d0; grid-area: child1;}
.child2 { background: #9800ff; grid-area: child2;}
.child3 { background: #2200ff; grid-area: child3;}
.child4 { background: #0083ff; grid-area: child4;}
.child5 { background: #00e9ff; grid-area: child5;}
.child6 { background: #00ff90; grid-area: child6;}
.child7 { background: #19ff00; grid-area: child7;}
.child8 { background: #ffaa00; grid-area: child8;}
.child9 { background: #ff0000; grid-area: child9;}
</style>
<div class=”parent” >
<div class=”child-1”>Item 1</div>
<div class=”child-2”>Item 2</div>
<div class=”child-3”>Item 3</div>
<div class=”child-4”>Item 4</div>
<div class=”child-5”>Item 5</div>
<div class=”child-6”>Item 6</div>
<div class=”child-7”>Item 7</div>
<div class=”child-8”>Item 8</div>
<div class=”child-9”>Item 9</div>
</div>
justify-items ( start, center, end, stretch )
1) start: align items content on horizontally left.
Example:
{ justify-items: start; }
2) center: align items content on horizontally center.
Example:
{ justify-items: center; }
3) end: align items content on horizontally right.
Example:
{ justify-items: end;}
4) stretch: align items content on horizontally stretch.
Example:
{ justify-items: stretch; }
align-items ( start, center, end, stretch )
1) start: align items content on vertically top.
Example:
{ align-items: start; }
2) center: align items content on vertically middle.
Example:
{ align-items: center; }
3) end: align items content on vertically bottom.
Example:
{ align-items: end;}
4) stretch: align items content on vertically stretch.
Example:
{ align-items: stretch; }
justify-content (start, center, end, stretch, space-around, space-between, space-evenly)
1) start: justify content on horizontally left.
Example:
{ justify-content: start; }
2) center: justify content on horizontally center.
Example:
{ justify-content: center; }
3) end: justify content on horizontally right.
Example:
{ justify-content: end; }
4) stretch: justify content on horizontally stretch.
Example:
{ justify-content: stretch; }
5) space-around: manage grid space horizontally same size around content items.
Example:
{ justify-content: space-around; }
6) space-between: manage grid space horizontally same size only in between items.
Example:
{ justify-content: space-between; }
7) space-evenly: manage grid space horizontally same size allover grid item.
Example:
{ justify-content: space-evenly; }
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:
{ align-content: start; }
2) center: align content on vertically center.
Example:
{ align-content: center; }
3) end: align content on vertically bottom.
Example:
{ align-content: end; }
4) stretch: align content on vertically stretch.
Example:
{ align-content: stretch; }
5) space-around: manage grid space vertically same size.
Example:
{ align-content: space-around; }
6) space-between: manage grid space horizontally same size only in between items.
Example:
{ align-content: space-between; }
7) space-evenly: manage grid space horizontally same size allover grid item.
Example:
{ align-content: space-evenly; }
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
<style>
.parent { background: #D4D4D4;
display: grid;
grid-template-columns: [column1] 150px [column2] 150px [column3] 150px [column4];
grid-template-rows: [row1] 150px [row2] 150px [row3] 150px [row4];
grid-template-areas: "child1 child2 child3";
grid-gap: 15px 15px; }
.child1 { background: #ff00d0; grid-area: child1;}
.child2 { background: #9800ff; grid-area: child2;}
.child3 { background: #2200ff; grid-area: child3;}
</style>
<div style=”background: #ccc” class=”parent” >
<div class=”child-1”>Item 1</div>
<div class=”child-2”>Item 2</div>
<div class=”child-3”>Item 3</div>
</div>
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:
child1 { grid-column-start: column2; }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:
child1 { grid-column-start: 2; }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:
{ grid-column-end: column3; }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:
{ grid-column-end: 3; }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:
{ grid-row-start: row2; }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:
{ grid-row-start: 2; }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:
{ grid-row-end: row3; }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:
{ grid-row-end: 3; }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:
{ grid-row-end: row3; }{ justify-self: start; }, { justify-self: center;}, { justify-self: end; }, { justify-self: stretch;}
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:
{ align-self: start; }, { align-self: center;}, { align-self: end; }, { align-self: stretch;}Demo sample for grid-item property:
<style>
.parent { background: #D4D4D4;
display: grid;
grid-template-columns: [column1] 150px [column2] 150px [column3] 150px [column4];
grid-template-rows: [row1] 150px [row2] 150px [row3] 150px [row4];
grid-template-areas: "child1 child2 child3";
grid-gap: 15px 15px; }
.child1 { background: #ff00d0; grid-area: child1; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; justify-self: end; align-self: center;}
.child2 { background: #9800ff; grid-area: child2;}
.child3 { background: #2200ff; grid-area: child3;}
</style>
<div style=”background: #ccc” class=”parent” >
<div class=”child-1”>Item 1</div>
<div class=”child-2”>Item 2</div>
<div class=”child-3”>Item 3</div>
</div>
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!