CSS Grid
A CSS grid can be defined as an intersecting set of horizontal lines and vertical lines. CSS Grid layout divides a web page into major regions. We can provide columns and rows on the grid by using grid-template-rows and grid-template-columns properties.
Grid Container:
- grid container by setting the display property to grid/inline-grid on an element.
- Grid container contains grid items that are placed inside rows and columns.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main {
display: grid;
grid: auto auto / auto auto auto auto;
grid-gap: 10px;
background-color: black;
padding: 10px;
}
.num {
background-color: grey;
text-align: center;
color: white;
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:
