A Complete Guide to CSS Grid Layout

CSS Grid is a two-dimensional layout that you can use to create responsive web items. The Grid items are arranged in columns, and you can easily position rows without messing with the HTML code.

Benefits of CSS Grid:

1. CSS Grid is very flexible and responsive. It makes it easy to create two-dimensional layouts. CSS Grid is also easy to use and is supported by most web browsers.
2. The CSS grid makes your markup cleaner (in your HTML code) and gives you a lot more flexibility. This is partly because you don’t have to change the mark-up (HTML code) to change the position of an item using the CSS grid.

When Should You Use CSS Grid:

1. When we have a complex design layout to implement, CSS Grid is better than the CSS float property. This is because Grid is a two-dimensional layout (with columns and rows), whereas the CSS float property is a one-dimensional layout (with columns or rows).
2. Grid is also a good choice when we need a space or gap between elements. By using the CSS grid-gap property, the spacing of two elements is much easier than using the CSS margin and padding properties which might end up complicating things.

Grid properties:

This is a CSS grid property that houses the grid items/elements. We implement the CSS grid container property by setting the container to a display property of grid.

HTML

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

Grid all containers properties:

A grid container is a box/container that contains grid items and can place these items within the rows and columns. See the bellow screenshot, it shows all properties

How to Use Grid Container Properties in CSS:

Now, we will practically implement some of the above-described properties for a profound understanding.

• The grid-template-columns & grid-template-rows Properties:

These properties can take multiple space-separated values such as auto, percentage, etc.

grid-template-columns: 1fr auto auto;

Similarly, we can use the grid-template-rows property to specify the size of rows.

• The align-content Property

To align the grid along the vertical/block axis or columns, we can use the align-content property, and it can take different values to perform different functionalities such as “center”, “start”, “end”, “space-evenly”, etc.

.container-class {
  display: grid;
  grid-template-columns: auto auto auto;
  height: 300px;
  align-content: end;
  background-color: green;
  padding: 10px;
}

Here are some more screenshots for reference:

Hope you now have a fair knowledge of CSS Grid Layout. Thanks