What is Grid?
The Grid module offers the items arranged in rows and columns of the grid in 2D. Whereas the flex offers only 1D either row-wise or column-wise.
Elements
The gird contains one parent and many children items.
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Output:
Display
The display: grid; property is mainly because the output will display based on the display value.
Row-gap
The row-gap: 10px; will fix the row gaps with a 10px size.
Column-gap
The column-gap: 10px; will fix the column gaps with a 10px size.
Gap
The gap: 10px; will fix the gap to both rows and columns with a 10px size.
Grid-lines
This property is used to span the item into multiple columns and rows.
We use property called grid-column-start: line number; for column.
We use a property called grid-row-start: line number; for row.
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
Output:
The above code explains that we are selecting one item and spanning that item into 3 column lines. If you see the output the item starts and column line 1 and ends at column line 3.
Grid-template-columns
The grid-template-columns: auto auto auto; property defines the number of columns in your grid layout, and it can define the width of each column.
The value is a space-separated list, where each value defines the width of the respective column.
If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
Output:
The above code tells that four columns so out is four columns.
we can also specify the grid-template-rows: auto auto auto; so it produces the rows in specified pixels.
Justify-content
The justify-content: start; property is used to align the whole grid inside the container. The justify-content works horizontally.
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: start;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Output:
Here we can also use many values like; justify-content: center; , end, space-around, space-evenly, space-between.
Align-content
The align-content: center; property is used to vertically align the whole grid inside the container. The align content works vertically.
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: center;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Output:
Here we can also use many values like; align-content: start; , end, space-around, space-evenly, space-between.
Child elements
Grid-column
The grid-column property defines on which column(s) to place an item.
You define where the item will start, and where the item will end.
Note: The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties.
To place an item, you can refer to line numbers, or use the keyword "span" to define how many columns the item will span.
.item1 {
grid-column: 1 / 5; /* start at column 1 , end at column 5.*/
}
Output:
We can also use grid-row: value; will span the rows.
.item1 {
grid-row: 1 / 4; /* row start 1 , row end 4. */
}
Grid-area
The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.
.item8 {
grid-area: 1 / 2 / 5 / 6; /* row start 1, column start 2, row end 5, column end 6. */
}
