A grid container is established by specifying either display: grid or display: inline-grid on an element. Within the grid container, grid items are positioned within rows and columns.
The CSS grid system generates a layout based on grids, eliminating the need for float and positioning. It structures webpages using rows and columns. The CSS grid functionality is compatible with popular browsers like Google Chrome, Internet Explorer, Firefox, Safari, and Opera.
Similar to the table, the grid enables a user to align the elements into columns and rows. But compare to tables, the designing of the layout is easier with the CSS grid. There are some of the properties of CSS grid are listed as follows:
- grid-template-columns: It is used to specify the size of the columns.
- grid-template-rows: It is used to specify the row size.
- grid-template-areas: It is used to specify the grid layout by using the named items.
- grid-auto-rows: It is used to specify the automatic size of the rows.
- grid-auto-columns: It is used to specify the automatic size of the columns.
- grid-auto-flow: It is used to specify how to place auto-placed items and the automatic row size.
Some additional attributes of CSS grid include grid-column-gap, grid-row-gap, grid-gap, grid-column-lines, grid-row-lines, and numerous others.
Syntax
.class {
display: grid;
}
We will explore instances of constructing a grid through the utilization of the display: grid and display: inline-grid properties.
Example
In this instance, we are also employing the grid-template-rows and grid-template-columns declaration. In this scenario, we are displaying a total of five rows where the dimensions of the initial three rows are set to auto, while the dimensions of the remaining two rows are specified as 50px. Additionally, there are three columns with dimensions set to auto.
<!DOCTYPE html>
<html>
<head>
<style>
.main{
display: grid;
grid-template-rows: auto auto auto 50px 50px;
grid-template-columns: auto auto auto;
background-color: gray;
padding: 5px;
}
.num {
background-color: lightgray;
border: 1px solid white;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="num">One</div>
<div class="num">Two</div>
<div class="num">Three</div>
<div class="num">Four</div>
<div class="num">Five</div>
<div class="num">Six</div>
<div class="num">Seven</div>
<div class="num">Eight</div>
</div>
</body>
</html>
Output
Example
In this instance, we generate the grid utilizing the display: inline-grid; attribute. Additionally, we specify the separation between rows and columns by employing the grid-row-gap and grid-column-gap properties.
<!DOCTYPE html>
<html>
<head>
<style>
.main{
display: inline-grid;
grid-template-rows: auto auto auto;
grid-template-columns: auto auto auto;
grid-column-gap: 50px;
grid-row-gap: 50px;
background-color: gray;
padding: 5px;
}
.num {
background-color: lightgray;
border: 3px solid white;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="num">One</div>
<div class="num">Two</div>
<div class="num">Three</div>
<div class="num">Four</div>
<div class="num">Five</div>
<div class="num">Six</div>
<div class="num">Seven</div>
<div class="num">Eight</div>
<div class="num">Nine</div>
</div>
</body>
</html>
Output