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:

CSS Grid