Grid in CSS
Introduction
Grid layout aligns the items in a row and column. It is a two-dimensional layout. It makes responsiveness easy by changing a couple of lines for different screens. Grid property applied on the parent container. Hence, an HTML element becomes a grid container.
.container {
display: grid;
}
Children inside grid container automatically become grid items.
Grid Columns
Vertical lines of grid items are called columns.
Grid Rows
Horizontal lines of grid items are called rows.
Grid Gaps
The spaces between each column or row are called gaps.
#Grid Container Grid property is set on the parent element to make that element as grid container. Grid container has grid items inside it.
Grid-template-columns
The grid-template-columns property defines the number of columns in the grid layout and defines the width of each column.
.container{
display:grid;
grid-template-columns: auto auto auto ;
column-gap: 10px;
row-gap:10px;
}
.items{
background-color: red;
}
<div class="container">
<div class="item1 items">one</div>
<div class="item2 items">two</div>
<div class="item3 items">three</div>
<div class="item4 items">four</div>
<div class="item5 items">five</div>
<div class="item6 items">six</div>
<div class="item7 items">seven</div>
<div class="item8 items">eight</div>
<div class="item9 items">nine</div>
</div>
Grid-template-rows
Grid-template-row defines the height of each row.
.container{
display:grid;
grid-template-columns: auto auto auto ;
column-gap: 10px;
row-gap:10px;
grid-template-rows: 100px 50px 20px;
}
.items{
background-color: red;
}
<div class="container">
<div class="item1 items">one</div>
<div class="item2 items">two</div>
<div class="item3 items">three</div>
<div class="item4 items">four</div>
<div class="item5 items">five</div>
<div class="item6 items">six</div>
<div class="item7 items">seven</div>
<div class="item8 items">eight</div>
<div class="item9 items">nine</div>
</div>
Justify-content
Justify-content is used to align the items horizontally inside the grid container. Values for justify-content are space-around, space-evenly, space-between, center, start, and end.
space-around
.container{
display:grid;
grid-template-columns: auto auto auto ;
column-gap: 10px;
row-gap:10px;
grid-template-rows: auto auto auto;
justify-content: space-around;
height:500px;
border:3px solid black;
}
.items{
background-color: red;
}
<div class="container">
<div class="item1 items">one</div>
<div class="item2 items">two</div>
<div class="item3 items">three</div>
<div class="item4 items">four</div>
<div class="item5 items">five</div>
<div class="item6 items">six</div>
<div class="item7 items">seven</div>
<div class="item8 items">eight</div>
<div class="item9 items">nine</div>
</div>
space-between
.container{
display:grid;
grid-template-columns: auto auto auto ;
column-gap: 10px;
row-gap:10px;
grid-template-rows: auto auto auto;
justify-content: space-between;
height:500px;
border:3px solid black;
}
.items{
background-color: red;
}
<div class="container">
<div class="item1 items">one</div>
<div class="item2 items">two</div>
<div class="item3 items">three</div>
<div class="item4 items">four</div>
<div class="item5 items">five</div>
<div class="item6 items">six</div>
<div class="item7 items">seven</div>
<div class="item8 items">eight</div>
<div class="item9 items">nine</div>
</div>
space-evenly
.container{
display:grid;
grid-template-columns: auto auto auto ;
column-gap: 10px;
row-gap:10px;
grid-template-rows: auto auto auto;
justify-content: space-evenly;
height:500px;
border:3px solid black;
}
.items{
background-color: red;
}
<div class="container">
<div class="item1 items">one</div>
<div class="item2 items">two</div>
<div class="item3 items">three</div>
<div class="item4 items">four</div>
<div class="item5 items">five</div>
<div class="item6 items">six</div>
<div class="item7 items">seven</div>
<div class="item8 items">eight</div>
<div class="item9 items">nine</div>
</div>
Center
.container{
display:grid;
grid-template-columns: auto auto auto ;
column-gap: 10px;
row-gap:10px;
grid-template-rows: auto auto auto;
justify-content: center;
height:500px;
border:3px solid black;
}
.items{
background-color: red;
}
<div class="container">
<div class="item1 items">one</div>
<div class="item2 items">two</div>
<div class="item3 items">three</div>
<div class="item4 items">four</div>
<div class="item5 items">five</div>
<div class="item6 items">six</div>
<div class="item7 items">seven</div>
<div class="item8 items">eight</div>
<div class="item9 items">nine</div>
</div>
start
.container{
display:grid;
grid-template-columns: auto auto auto ;
column-gap: 10px;
row-gap:10px;
grid-template-rows: auto auto auto;
justify-content: start;
height:500px;
border:3px solid black;
}
.items{
background-color: red;
}
<div class="container">
<div class="item1 items">one</div>
<div class="item2 items">two</div>
<div class="item3 items">three</div>
<div class="item4 items">four</div>
<div class="item5 items">five</div>
<div class="item6 items">six</div>
<div class="item7 items">seven</div>
<div class="item8 items">eight</div>
<div class="item9 items">nine</div>
</div>
end
.container{
display:grid;
grid-template-columns: auto auto auto ;
column-gap: 10px;
row-gap:10px;
grid-template-rows: auto auto auto;
justify-content: end
height:500px;
border:3px solid black;
}
.items{
background-color: red;
}
<div class="container">
<div class="item1 items">one</div>
<div class="item2 items">two</div>
<div class="item3 items">three</div>
<div class="item4 items">four</div>
<div class="item5 items">five</div>
<div class="item6 items">six</div>
<div class="item7 items">seven</div>
<div class="item8 items">eight</div>
<div class="item9 items">nine</div>
</div>
Align-content
Align-content aligns the items vertically inside the grid container. Values for align-content are a space-around, space-between, space-evenly, space-between, center, start, and end.
.container{
display:grid;
grid-template-columns: auto auto auto ;
column-gap: 10px;
row-gap:10px;
grid-template-rows: auto auto auto;
align-content: center;
height:500px;
border:3px solid black;
}
.items{
background-color: red;
}
<div class="container">
<div class="item1 items">one</div>
<div class="item2 items">two</div>
<div class="item3 items">three</div>
<div class="item4 items">four</div>
<div class="item5 items">five</div>
<div class="item6 items">six</div>
<div class="item7 items">seven</div>
<div class="item8 items">eight</div>
<div class="item9 items">nine</div>
</div>
The rest of the values are the same as the justify-content value.
Grid items
We can style the grid items so that they will span multiple columns and/or rows.
Grid-column
Grid-column property defines how many columns to span. Suppose we want to span column2 use the following line of code.
.container{
display:grid;
grid-template-columns: auto auto auto ;
column-gap: 10px;
row-gap:10px;
grid-template-rows: auto auto auto;
height:500px;
border:3px solid black;
}
.items{
background-color: red;
}
.item2{
grid-column: 2/ span 2;
}
<div class="container">
<div class="item1 items">one</div>
<div class="item2 items">two</div>
<div class="item3 items">three</div>
<div class="item4 items">four</div>
<div class="item5 items">five</div>
<div class="item6 items">six</div>
<div class="item7 items">seven</div>
<div class="item8 items">eight</div>
<div class="item9 items">nine</div>
</div>
Grid-row
Grid-row property defines how many rows to span. Suppose we want to span row1 use the following line of code
.container{
display:grid;
grid-template-columns: auto auto auto ;
column-gap: 10px;
row-gap:10px;
grid-template-rows: auto auto auto;
height:500px;
border:3px solid black;
}
.items{
background-color: red;
}
.item1{
grid-row: 1/ span 3
}
<div class="container">
<div class="item1 items">one</div>
<div class="item2 items">two</div>
<div class="item3 items">three</div>
<div class="item4 items">four</div>
<div class="item5 items">five</div>
<div class="item6 items">six</div>
<div class="item7 items">seven</div>
<div class="item8 items">eight</div>
<div class="item9 items">nine</div>
</div>
order
Order property rearranges the grid items inside the container. By default -1 is considered is the first order.
.container{
display:grid;
grid-template-columns: auto auto auto ;
column-gap: 10px;
row-gap:10px;
grid-template-rows: auto auto auto;
height:500px;
border:3px solid black;
}
.items{
background-color: red;
}
.item2{
order:-1;
}
<div class="container">
<div class="item1 items">one</div>
<div class="item2 items">two</div>
<div class="item3 items">three</div>
<div class="item4 items">four</div>
<div class="item5 items">five</div>
<div class="item6 items">six</div>
<div class="item7 items">seven</div>
<div class="item8 items">eight</div>
<div class="item9 items">nine</div>
</div>
