How to Build a Responsive Website with CSS Grid

Responsiveness is a key feature of modern websites. With CSS Grid, we can easily create flexible and dynamic layouts that adapt to different screen resolutions. In this post, we’ll cover the basics of working with CSS Grid and show you how to create a simple, responsive layout.

What is CSS Grid?

CSS Grid is a modern layout system that allows you to create complex grid structures on a website. Compared to more traditional methods like Flexbox or float, Grid offers better control over the placement of elements.

Basic CSS Grid Structure

Let’s start by creating a simple grid. In HTML, we can define a few elements that will make up our page:

<div class="grid-container">
    <div class="header">Header</div>
    <div class="menu">Menu</div>
    <div class="main">Main Content</div>
    <div class="aside">Aside</div>
    <div class="footer">Footer</div>
</div>

Next, we add CSS properties to the container to create the grid:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "menu main"
    "footer footer";
  gap: 10px;
}

In this example, we create a grid with two columns and three rows. We also use grid-template-areas to assign different sections to specific areas.

Responsiveness with Media Queries

To make the page responsive, we can use media queries to adjust the layout depending on screen width:

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "menu"
      "main"
      "aside"
      "footer";
  }
}

This way, on smaller screens, the grid will switch to a single-column layout.

Learn More about CSS Grid

Want to learn more? Check out the official MDN documentation, where you’ll find detailed information on all available properties.

Conclusion

CSS Grid is a powerful tool for creating responsive page layouts. It makes managing the placement of elements on the page easier, regardless of screen size. Investing time in learning this technology can significantly simplify the web design process.