CSS3 GRID
2021-11-16 23:36 · 5 min read
CSS3 Grid system is useful for designing the responsive layout. Bootstrap framework is also using the Grid system for responsiveness. It's very easy to design a layout using a Grid system without using positioning and float property.
What is a CSS3 Grid system?
The CSS3 Grid system is used to create responsive layouts. The grid layout is based on a row and column system. A grid layout consists of a parent HTML element and with its child Elements.
- Grid Container
We use display property to create a grid container. We can use grid or inline grid values to create a grid container. - Grid items
All children of Grid containers are Grid items. A grid container may contain rows and columns of grid items. The space between columns and rows is called a gap. - A grid container may contain rows and columns of grid items. The space between columns and rows is called a gap.
<style>
.tdb-grid-container{
display: grid;
grid-column-gap:20px;
grid-row-gap:20px;
/*grid gap is a shorthand property*/
grid-gap:<grid-row-gap> <grid-colum-gap>;
}
</style><!DOCTYPE html>
<html>
<head>
<style>
.tdb-grid-container{
display: grid;
grid-template-columns: auto auto auto;
background-color: black;
grid-gap:10px;
}
.tdb-grid-box {
margin:2px;
padding: 20px;
border: 1px solid white;
color:white;
font-size: 28px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS3 Grid System</h1>
<div class="tdb-grid-container">
<div class="tdb-grid-box">1</div>
<div class="tdb-grid-box">2</div>
<div class="tdb-grid-box">3</div>
<div class="tdb-grid-box">4</div>
</div>
</body>
</html>
What is a Grid Line?
The lines between rows and columns are called Gridlines. The lines between columns are called column lines and for rows, it is called row lines.
<style>
.grid-item1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
</style><!DOCTYPE html>
<html>
<head>
<style>
.tdb-grid-container{
display: grid;
grid-template-columns: auto auto auto;
background-color: black;
grid-gap:10px;
}
.tdb-grid-box {
margin:2px;
padding: 20px;
border: 1px solid white;
color:white;
font-size: 28px;
text-align: center;
}
.tdb-item{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 4;
}
</style>
</head>
<body>
<h1>CSS3 Grid System</h1>
<div class="tdb-grid-container">
<div class="tdb-grid-box tdb-item">1</div>
<div class="tdb-grid-box">2</div>
<div class="tdb-grid-box">3</div>
<div class="tdb-grid-box">4</div>
<div class="tdb-grid-box">5</div>
<div class="tdb-grid-box">6</div>
<div class="tdb-grid-box">7</div>
<div class="tdb-grid-box">8</div>
</div>
</body>
</html>
How to use grid-template-columns Property
The grid-template-columns property is used to specify the number of columns in a grid layout.
- If we want to add 5 columns in a grid layout, we just need to specify the width of the items or we can also use "auto".
grid-template-columns: auto auto auto auto;
Here auto is used for the same width of items.
How to use grid-template-rows Property
The grid-template-row property is used to specify the number of rows in a grid layout.
- If we want to add 2 rows in a grid layout, we just need to specify the height of the items or we can also use "auto" for the same height of the item blocks.
<style>
.grid-container{
display: grid;
grid-template-rows: 100px 150px;
}
</style>Click on the try it button and try to run the code.
