CSS Grid.

CSS Grid is a CSS layout which has a two-dimensional system and can handle both rows & columns. The basics are that you apply CSS rules to both the parent element and to the element’s children. The parent elements become the grid containers, and the children become items within the grid. Though CSS Grid is two-dimensional it can still do pretty much do everything the same as Flexbox. Some people though may still try and say that CSS Grid is only good for multi-dimensional layouts. This is far from true as CSS Grid is just as great at one-dimensional layouts as it is with multi-dimensional. Below is a basic example showing you that all you need to get started is pretty minimal and easy to understand.

HTML

<div class=”wrapper”>
  <div class=”item”>1</div>
  <div class=”item”>2</div>
  <div class=”item”>3</div>
  <div class=”item”>4</div>
  <div class=”item”>5</div>
  <div class=”item”>6</div>
  <div class=”item”>7</div> 
  <div class=”item”>8</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: 8rem 8rem 8rem;
  grid-gap: 2rem;
}

There’s plenty of useful resources that can be found online if you ever need help while using CSS Grid. Click here to search for some….