Intro to CSS Grids - CSS

HTML Setup

CSS Grids are often used to organize the layout of a page. To create a grid in CSS, we first have to add the grid elements to HTML. Each grid cell needs its own HTML element, and all of them have to be grouped inside another element, which will be the grid container.

HTML

<div class="container">
  <div class="item" id="one">Item 1</div>
  <div class="item" id="two">Item 2</div>
  <div class="item" id="three">Item 3</div>
  <div class="item" id="four">Item 4</div>
  <div class="item" id="five">Item 5</div>
  <div class="item" id="six">Item 6</div>
</div>

Now for the CSS

Next, set the display property of the container element to grid.

CSS

.container {
  display: grid;
}

Finally, add some background color and borders to make the grid structure easier to see.

CSS

.container {
    display: grid;
    border: 3px solid #007bff;
  }
.item {
    background-color: #20c997;
    border: 1px solid #6610f2;
}