A grid is described as a network of vertical and horizontal lines that intersect. The CSS Grid layout divides a webpage into main segments. The grid feature provides a layout system based on grids with both rows and columns. This simplifies web page design by eliminating the need for positioning and floating elements. With grid layout, we can construct grid patterns using CSS rather than HTML.
Similar to a table, the CSS grid allows users to arrange elements in rows and columns. However, unlike tables, designing layouts with the CSS grid is more straightforward. Users can specify the number of columns and rows on the grid using the grid-template-rows and grid-template-columns properties.
A grid container is formed by specifying either display: grid or display: inline-grid on an element. Within the grid container, grid items are positioned within rows and columns.
Grid v/s Flexbox
It is a frequent inquiry that often emerges regarding the dissimilarities between the grid and flexbox. The grid is tailored for creating two-dimensional layouts, enabling the arrangement of content in both rows and columns simultaneously. In contrast, flexbox is designed for one-dimensional layouts, allowing content to be aligned either horizontally in a row or vertically in a column. Flexbox is preferred for achieving a linear arrangement of elements.
Flexbox is employed to organize the elements either in a vertical column or a horizontal row. In contrast, the grid system is ideal for organizing elements across multiple columns and rows.
Let's explore the concept of CSS grid through an illustrative example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.main {
display: grid;
grid: auto auto / auto auto auto auto;
grid-gap: 10px;
background-color: blue;
padding: 10px;
}
.num {
background-color: lightblue;
text-align: center;
color: black;
padding: 10px 10px;
font-size: 30px;
}
</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