</CSS3 Grid System>

What is a CSS3 Grid system?

CSS3 Grid system is used to create responsive layouts. The grid layout is based on row and column system. A grid layout consist 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 value to create a grid container.



<style>
.tdb-grid-container{
  display: grid;
  grid-template-columns: auto auto auto;
}
</style>

Grid items
All children of Grid container are Grid items. A grid container may contains row and coloumns of grid items. The space between columns and rows is called gap.

A grid container may contains row and columns of grid items. The space between columns and rows is called 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>

Try it Yourself

What is a Grid Line?

The lines between rows and column are called Grid lines. 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>

item 1

item 2

item 1

item 2

item 1

Here we can see the column and row lines
When we talk about the columns, green colored line represent the first line
And for rows a orange color line represent the first row line

To understand this concept..please run the code.

	
	
	<!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>

Try it Yourself

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".



<style>
.grid-container{
	grid-template-columns: auto auto auto auto auto;
}
</style>

grid-template-colums: 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.

	
	<!DOCTYPE html>
<html>
<head>
<style>
.tdb-grid-container{
  display: grid;
  grid-template-columns: auto 100px auto;
  grid-template-rows: 100px 150px;
  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 class="tdb-grid-box">5</div>
  <div class="tdb-grid-box">6</div>
</div>

</body>
</html>

Try it Yourself

CSS3 GRID

</CSS3 GRID>

</CSS3 Grid System>

What is a CSS3 Grid system?

What is a Grid Line?

How to use grid-template-columns Property

How to use grid-template-rows Property