CSS Grids
Written By: Avinash Malhotra
Updated on:
Display Grid
CSS Grids Layout is a modern approach to build layouts in css. Layout designing is one of the most important aspect in css. Earlier we were using tables, display inline-block, positions, CSS Float and flexbox to build layouts. We can even use flexbox to build layouts, but flexbox is used for One Dimensional layouts, whereas CSS Grids are used to build 2D layouts.
In flexbox, flex items wraps in same or next row if flex container use flex-flow: row wrap. But Grids use 2D layouts technique. Which mean we can add next item in next row without wrapping in grids.
Advantage of using Grids?
- 2D Layout Design
- Advantage of using row and columns.
- Supports IE 11 (partial).
Understanding CSS Grid
CSS Grids use 2d grid system layout which includes rows and columns. To know grid better, one should know following terms in grid.
- Grid Lines
- Grid Rows
- Grid Columns
- Grid Cell
- Grid Area
- Grid Gap
For IE 11 and below, use css flexbox layout.
Display Grid
display grid is the compulsory property in grid layouts. display grid is the property of grid container. Apart from display grid property, we also need to add other properties for grid rows and grid columns. We can use fraction , i.e fr scale, px, % , rem, em, vw, vh scales or auto as values.
grid-template-rows and grid-template-columns properties are used to specify the track size.
Grid (block level grid)
<style>
.grid{
display: grid; // grid
}
</style> Inline-grid (inline level grid)
<style>
.grid{
display: inline-grid; // inline-grid
}
</style>Grid Template
Grid Template property is shortcut of grid-template-row and grid-template-column. Grid Template defines the size of track. We can use px, em, rem, %, auto or fr (fraction) scale.
Grid Template columns
<style>
.grid{
display: grid;
grid-template-columns: 25% auto;
}
.grid .col{
border:1px solid #666;
padding:10px;
}
</style>
<div class="grid">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
repeat() in grids
we can also use css repeat function to repeat columns. repeat has two values, first is no of columns and size of column. For equal columns, use fr. fr stands for fraction.
<style>
.grid{
display: grid;
grid-template-columns: repeat( 4, 1fr);
}
.grid .col{
border:1px solid #666;
padding:10px;
}
</style>
<div class="grid">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
<div class="col">Col 7</div>
<div class="col">Col 8</div>
</div>
auto-fill with minmax
Use auto-fill in repeat function is used to fill as many as columns automatically in the row.
<!--Change size of div to check -->
<style>
.grid{
display: grid;
grid-template-columns: repeat( auto-fill, minmax(100px, 1fr));
}
.grid .col{
border:1px solid #666;
padding:10px;
}
</style>
<div class="grid">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
</div>
auto-fit with minmax
auto-fit works same like auto-fill, but it expands the columns in extra space.
<!--Change size of div to check -->
<style>
.grid{
display: grid;
grid-template-columns: repeat( auto-fit, minmax(100px, 1fr));
}
.grid .col{
border:1px solid #666;
padding:10px;
}
</style>
<div class="grid">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
</div>
Grid Template Rows
<style>
.grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 100px 200px;
}
.grid .col{
border:1px solid #666;
padding:10px;
}
</style>
<div class="grid">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
Grid row and column
Grid row and Grid column properties are used to set positioning of grid item in 2d grid layout. grid-row property defines the number of row starting from 1 to any number. grid-column property defines the start and end column.
In the example below, grid-column:1/5 means 1 to 5 columns. grid-column 1/2 means 1 to 2 columns which is equals to 25% and grid-column 2/5 means column 2 to 5 which is equals to 75%. aside and section has same grid-row:3, whereas header has row 1, nav has row 2 and footer has row 4.
<style>
.grid{
display: grid;
}
header{
grid-row:1;
grid-column:1/5;
}
nav{
grid-row:2;
grid-column:1/5;
}
aside{
grid-row:3;
grid-column:1/2;
}
section{
grid-row:3;
grid-column:2/5;
}
footer{
grid-row:4;
grid-column:1/5;
}
</style>
<div class="grid">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<section>section</section>
<footer>footer</footer>
</div>
Grid row in two columns
<style>
.grid{
display: grid;
}
header{
grid-row:1;
grid-column:1/5;
}
nav{
grid-row:2;
grid-column:1/5;
}
aside{
grid-row:3/5;
grid-column:1/2;
}
.sec1{
grid-row:3;
grid-column:2/5;
}
.sec2{
grid-row:4;
grid-column:2/5;
}
footer{
grid-row:5;
grid-column:1/5;
}
</style>
<div class="grid">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<section class="sec1">section 1</section>
<section class="sec2">section 2</section>
<footer>footer</footer>
</div>
Grid Area
Grid Area property of grid items is a string value used in grid-template-areas property of grid parent. The grid-template-areas property use strings values to named grid items. These values are given to grid items using grid-area property.
In the below example, i am using "header" "nav" "aside" "section" and "footer" names for grid areas. First assign these values in grid-template-areas. Next step is to use them in grid-area property.
<style>
.grid{
display: grid;
grid-template-columns:1fr 3fr;
grid-template-rows: 1fr 1fr 2fr;
grid-template-areas:"header header"
"nav nav"
"aside section"
"footer footer";
}
header{
grid-area:header;
}
nav{
grid-area:nav;
}
aside{
grid-area:aside;
}
section{
grid-area:section;
}
footer{
grid-area:footer;
}
</style>
<div class="grid">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<section>section</section>
<footer>footer</footer>
</div>
Gap
CSS Gap property add gaps (gutters) between grid cells or flex items. Gap property is the shortcut of row-gap and column-gap. Gap with single value is both row-gap and column-gap. We can also use two values in gap, where first value is row-gap and second is column-gap.
CSS Gap is used in flexbox now.
<style>
.grid{
display: grid;
grid-template-columns: repeat( 4, 1fr);
gap: 10px ;
}
.grid .col{
border:1px solid #666;
padding:10px;
}
</style>
<div class="grid">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
<div class="col">Col 7</div>
<div class="col">Col 8</div>
</div>
row-gap and column-gap
gap can have two values, first for row-gap second for column-gap. This shortcut is quite helpful when using both row and column gaps.
<style>
.grid{
display: grid;
grid-template-columns: repeat( 4, 1fr);
gap:20px 10px;
}
.grid .col{
border:1px solid #666;
padding:10px;
}
</style>
<div class="grid">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
<div class="col">Col 7</div>
<div class="col">Col 8</div>
</div>