Mastering CSS Grid: A Beginner's Guide to Grid Layout Properties

CSS Grid is a powerful two-dimensional layout system that enables developers to create responsive, structured designs with ease. If you want to move beyond float-based layouts and unlock the full potential of modern CSS, Grid is the way to go.

In this guide, we'll break down each CSS Grid property with clear explanations and practical examples to help you build intuitive and flexible web layouts.

---

We will be using this HTML for our demonstration

<div class="flex-container">
  <div class="grid-container-1">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
  </div>
  <div class="grid-container-2">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
  </div>
  <div class="grid-container-3">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
  </div>
  <div class="grid-container-4">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
  </div>
</div>

1. display: grid; - Enabling Grid Layout

To use Grid, you need to set display: grid; on a container.

.grid-container-1 {
  display: grid;
}

✅ This turns .grid-container into a grid container, making all its direct children grid items.

---

2. grid-template-columns - Defining Columns

This property sets the number and size of columns.

.grid-container-1 {
  display: grid;
  grid-template-columns: 100px 200px auto;
}

✅ This creates three columns:

• The first is 100px wide,

• The Second is 200px wide,

• Third takes up the remaining available space (due to the auto assigned to it. If a fixed width was given to it, it will be contained to that fixed width like the rest.)

---

3. grid-template-rows - Defining Rows

This property sets the number and size of rows.

.grid-container-2 {
  display: grid;
  grid-template-rows: 50px 100px auto;
}

✅ Creates three rows:

• The first is 50px high

• The second is 100px high

• Third takes up the remaining available space (due to the auto assigned to it. If a fixed height was given to it, it will be contained to that fixed height like the rest.)

4. gap, column-gap, row-gap - Spacing Between Items

.grid-container-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* This assigns each item to one fraction of available space*/
  gap: 10px;
}

✅ Adds 10px spacing between all grid items.

The gap property can also be used to give different gaps for the column and row

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* This assigns each item to one fraction of available space*/
  gap: 10px 30px;
}

If you wish to assign the gaps individually. You can achieve it using either the column-gap or row-gap

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* This assigns each item to one fraction of available space*/
  column-gap: 10px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* This assigns each item to one fraction of available space*/
  row-gap: 10px;
}

5. grid-auto-rows, grid-auto-columns - Automatic Sizing

These properties define the default size of rows and columns that are created automatically when more items are added than explicitly defined in grid-template-rows or grid-template-columns.

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-auto-rows: 100px;
}

✅ Any extra row created beyond the ones explicitly defined will have a height of 100px.

This is especially useful when you don’t know the exact number of grid items that will be added dynamically. So any added item will just take the height of 100px.

6. grid-column, grid-row - Spanning Multiple Cells

These properties allow grid items to span across multiple columns or rows.

.grid-container-4 {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: dodgerblue;
  padding: 10px;
  width: 600px;
  height: 300px;
}

.grid-container-4 > div {
  background: red;
  text-align: center;
  padding: 10px;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / span 2; /* Spans from column 1 to 3 */
  grid-row: 1 / span 2; /* Spans row 1 */
}

7. align-items, justify-items, place-items - Aligning Grid Items

.grid-container-4 {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: dodgerblue;
  padding: 10px;
  width: 600px;
  height: 300px;
  align-items: center;
  justify-items: center;
}

✅ Centers items inside each grid cell.

---

Conclusion

CSS Grid is an incredibly flexible layout system that enables precise control over page structure. By mastering these properties, you’ll be able to create modern, responsive, and maintainable web layouts with ease.

Now that you've got a solid understanding of CSS Grid, if you're also interested in learning about CSS Flexbox, check out this guide on mastering Flexbox.

Happy coding!

The full code can be found in my codepen.io: https://codepen.io/Chummy-Geraldenne/pen/emOoMXX

Check out more properties from W3Schools or MDN web Docs