Grid Container
Last Updated :
03 Jan, 2024
The Grid Container is the container element where the property display with a value grid or the inline-grid is used for defining their direct children into a grid layout. The Grid Container offers various properties these are grid-template-columns Property, grid-template-rows Property, justify-content Property, and align-content property.
We will explore the above topics with the help of suitable examples.
Grid Container with display “grid” property
The “display: grid” property in CSS is used to create a grid container, allowing efficient organization of elements in rows and columns for responsive and structured web layouts.
Syntax
.gridbox {
display: grid;
}
The grid-template-columns Property
The grid-template-columns property is used to define the number of columns in the grid.
Example 1: The example illustrates defining a grid with grid-template-columns property for making columns.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div class = "gridbox" >
< div class = "divclass" id = "div1" >box1</ div >
< div class = "divclass" id = "div2" >box2</ div >
< div class = "divclass" id = "div3" >box3</ div >
< div class = "divclass" id = "div4" >box4</ div >
< div class = "divclass" id = "div5" >box5</ div >
< div class = "divclass" id = "div6" >box6</ div >
< div class = "divclass" id = "div7" >box7</ div >
< div class = "divclass" id = "div8" >box8</ div >
< div class = "divclass" id = "div9" >box9</ div >
< div class = "divclass" id = "div10" >box10</ div >
</ div >
</ body >
</ html >
|
CSS
.gridbox{
display : grid;
row-gap: 10px ;
column-gap: 10px ;
grid-template-columns: 1 fr 2 fr 1 fr 1 fr;
background-color : rgb ( 186 , 226 , 186 );
padding : 5px ;
border : 2px solid rgb ( 177 , 206 , 177 );
}
.divclass{
border : 2px solid green ;
text-align : center ;
}
|
Output:
grid-template-columns
Example 2: The example illustrates how to define a grid with grid-template-columns property for making columns.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div class = "gridbox" >
< div class = "divclass" id = "div1" >box1</ div >
< div class = "divclass" id = "div2" >box2</ div >
< div class = "divclass" id = "div3" >box3</ div >
< div class = "divclass" id = "div4" >box4</ div >
< div class = "divclass" id = "div5" >box5</ div >
< div class = "divclass" id = "div6" >box6</ div >
< div class = "divclass" id = "div7" >box7</ div >
< div class = "divclass" id = "div8" >box8</ div >
< div class = "divclass" id = "div9" >box9</ div >
</ div >
</ body >
</ html >
|
CSS
.gridbox{
display : grid;
row-gap: 10px ;
column-gap: 10px ;
grid-template-columns: 100px 200px auto ;
background-color : rgb ( 186 , 226 , 186 );
padding : 5px ;
border : 2px solid rgb ( 177 , 206 , 177 );
}
.divclass{
border : 2px solid green ;
text-align : center ;
}
|
Output:
grid-template-columns
The grid-template-rows Property
The grid-template-rows property is used to define the height of the rows in the grid.
Syntax
.grid-box{
display: grid;
grid-template-rows: 50px, 150px;
}
Example 1: The example illustrates how to define a grid with grid-template-rows property for giving rows height.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div class = "gridbox" >
< div class = "divclass" id = "div1" >box1</ div >
< div class = "divclass" id = "div2" >box2</ div >
< div class = "divclass" id = "div3" >box3</ div >
< div class = "divclass" id = "div4" >box4</ div >
< div class = "divclass" id = "div5" >box5</ div >
< div class = "divclass" id = "div6" >box6</ div >
< div class = "divclass" id = "div7" >box7</ div >
< div class = "divclass" id = "div8" >box8</ div >
< div class = "divclass" id = "div9" >box9</ div >
</ div >
</ body >
</ html >
|
CSS
.gridbox{
display : grid;
row-gap: 10px ;
column-gap: 10px ;
grid-template-columns: 200px 200px auto ;
grid-template-rows: 50px 80px ;
background-color : rgb ( 178 , 234 , 178 );
}
.divclass{
border : 2px solid green ;
background-color : rgb ( 232 , 245 , 232 );
text-align : center ;
padding : 2px ;
font-size : 20px ;
}
|
Output:
grid-template-rows
The justify-content Property
The justify-content property is used to horizontally align the complete grid inside the container.
Syntax
.grid-box {
display: grid;
justify-content: space-between;
}
Property with Syntax
|
Descriptions
|
justify-content: center; |
The property aligns the complete grid to the center |
justify-content: space-between; |
The property distributes the complete space equally, leaving no space at the beginning or end. |
justify-content: space-evenly; |
The property distributes the equal space at the beginning, between, and at the end. |
justify-content: space-around; |
The property creates equal space at the beginning, between, and at the end. |
justify-content: end; |
The property aligns the complete grid to the end. |
justify-content: start; |
The property aligns the complete grid to the start. |
Example 1: The example illustrates property justify-content and value as space-between.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div class = "grid-box" >
< div class = "divclass" id = "div1" >box1</ div >
< div class = "divclass" id = "div2" >box2</ div >
< div class = "divclass" id = "div3" >box3</ div >
< div class = "divclass" id = "div4" >box4</ div >
< div class = "divclass" id = "div5" >box5</ div >
< div class = "divclass" id = "div6" >box6</ div >
< div class = "divclass" id = "div7" >box7</ div >
< div class = "divclass" id = "div8" >box8</ div >
< div class = "divclass" id = "div9" >box9</ div >
</ div >
</ body >
</ html >
|
CSS
.grid-box{
display : grid;
gap: 5px ;
grid-template-columns: 200px 200px auto ;
grid-template-rows: 50px 150px ;
justify- content : space-between;
border : 2px solid green ;
background-color : rgb ( 188 , 233 , 188 );
padding : 10px ;
}
.divclass{
border : 3px solid green ;
padding : 5px ;
text-align : center ;
}
|
Output:
justify-content: space-between
Example 2: The example illustrates property justify-content and value as an end.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div class = "grid-box" >
< div class = "divclass" id = "div1" >box1</ div >
< div class = "divclass" id = "div2" >box2</ div >
< div class = "divclass" id = "div3" >box3</ div >
< div class = "divclass" id = "div4" >box4</ div >
< div class = "divclass" id = "div5" >box5</ div >
< div class = "divclass" id = "div6" >box6</ div >
< div class = "divclass" id = "div7" >box7</ div >
< div class = "divclass" id = "div8" >box8</ div >
< div class = "divclass" id = "div9" >box9</ div >
</ div >
</ body >
</ html >
|
CSS
.grid-box{
display : grid;
gap: 5px ;
grid-template-columns: 200px 200px auto ;
grid-template-rows: 50px 150px ;
justify- content : end;
border : 2px solid green ;
background-color : rgb ( 188 , 233 , 188 );
padding : 10px ;
}
.divclass{
border : 3px solid green ;
padding : 5px ;
text-align : center ;
}
|
Output:
justify-content: end
The align-content Property
The align-content property is used for vertically aligning the complete grid inside the container.
Syntax
.grid-box{
display: grid;
align-content: center;
}
Property with Syntax
|
Descriptions
|
align-content: center; |
The property vertically aligns the complete grid to the center. |
align-content: space-between; |
The property distributes the complete space equally, leaving no space at the beginning or end. |
align-content: space-evenly; |
The property distributes the equal space at the beginning, between, and at the end. |
align-content: space-around; |
The property creates equal space at the beginning, between, and at the end. |
align-content: end; |
The property vertically aligns the complete grid to the end. |
align-content: start; |
The property vertically aligns the complete grid to the start. |
Example 1: The example illustrates property align-content with the value center.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div class = "grid-box" >
< div class = "divclass" id = "div1" >box1</ div >
< div class = "divclass" id = "div2" >box2</ div >
< div class = "divclass" id = "div3" >box3</ div >
< div class = "divclass" id = "div4" >box4</ div >
< div class = "divclass" id = "div5" >box5</ div >
< div class = "divclass" id = "div6" >box6</ div >
< div class = "divclass" id = "div7" >box7</ div >
< div class = "divclass" id = "div8" >box8</ div >
< div class = "divclass" id = "div9" >box9</ div >
</ div >
</ body >
</ html >
|
CSS
.grid-box{
display : grid;
gap: 5px ;
grid-template-columns: 200px 200px auto ;
align- content : center ;
border : 2px solid green ;
background-color : rgb ( 188 , 233 , 188 );
padding : 10px ;
height : 240px ;
}
.divclass{
border : 3px solid green ;
padding : 5px ;
text-align : center ;
}
|
Output:
align-content: center
Example 2: The example illustrates to property align-content with value end.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div class = "grid-box" >
< div class = "divclass" id = "div1" >box1</ div >
< div class = "divclass" id = "div2" >box2</ div >
< div class = "divclass" id = "div3" >box3</ div >
< div class = "divclass" id = "div4" >box4</ div >
< div class = "divclass" id = "div5" >box5</ div >
< div class = "divclass" id = "div6" >box6</ div >
< div class = "divclass" id = "div7" >box7</ div >
< div class = "divclass" id = "div8" >box8</ div >
< div class = "divclass" id = "div9" >box9</ div >
</ div >
</ body >
</ html >
|
CSS
.grid-box{
display : grid;
gap: 5px ;
grid-template-columns: 200px 200px auto ;
align- content : end;
border : 2px solid green ;
background-color : rgb ( 188 , 233 , 188 );
padding : 10px ;
height : 240px ;
}
.divclass{
border : 3px solid green ;
padding : 5px ;
text-align : center ;
}
|
Output:
align-content: end
Share your thoughts in the comments
Please Login to comment...