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>![grid-image2]()
justify-items ( start, center, end, stretch )
1) start: align items content on horizontally left.
Example:
{ justify-items: start; }![grid-image3]()
2) center: align items content on horizontally center.
Example:
{ justify-items: center; }![grid-image4]()
3) end: align items content on horizontally right.
Example:
{ justify-items: end;}![grid-image5]()
4) stretch: align items content on horizontally stretch.
Example:
{ justify-items: stretch; }![grid-image2]()
align-items ( start, center, end, stretch )
1) start: align items content on vertically top.
Example:
{ align-items: start; }![grid-image6]()
2) center: align items content on vertically middle.
Example:
{ align-items: center; }![grid-image7]()
3) end: align items content on vertically bottom.
Example:
{ align-items: end;}![grid-image8]()
4) stretch: align items content on vertically stretch.
Example:
{ align-items: stretch; }![grid-image2]()
justify-content (start, center, end, stretch, space-around, space-between, space-evenly)
1) start: justify content on horizontally left.
Example:
{ justify-content: start; }![grid-image2]()
2) center: justify content on horizontally center.
Example:
{ justify-content: center; }![grid-image9]()
3) end: justify content on horizontally right.
Example:
{ justify-content: end; }![grid-image10]()
4) stretch: justify content on horizontally stretch.
Example:
{ justify-content: stretch; }![grid-image2]()
5) space-around: manage grid space horizontally same size around content items.
Example:
{ justify-content: space-around; }![grid-image11]()
6) space-between: manage grid space horizontally same size only in between items.
Example:
{ justify-content: space-between; }![grid-image12]()
7) space-evenly: manage grid space horizontally same size allover grid item.
Example:
{ justify-content: space-evenly; }![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:
{ align-content: start; }![grid-image14]()
2) center: align content on vertically center.
Example:
{ align-content: center; }![grid-image15]()
3) end: align content on vertically bottom.
Example:
{ align-content: end; }![grid-image16]()
4) stretch: align content on vertically stretch.
Example:
{ align-content: stretch; }![grid-image14]()
5) space-around: manage grid space vertically same size.
Example:
{ align-content: space-around; }![grid-image17]()
6) space-between: manage grid space horizontally same size only in between items.
Example:
{ align-content: space-between; }![grid-image18]()
7) space-evenly: manage grid space horizontally same size allover grid item.
Example:
{ align-content: space-evenly; }![grid-image19]()
"
}
