Skip to main content

Using CSS Grid for Responsive Layouts

Introduction to CSS Grid​

CSS Grid is a powerful layout system offered by CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. This makes it a great tool for building complex web layouts. Today, we will learn how to use CSS Grid to create responsive layouts.

Basics of CSS Grid​

To start using CSS Grid, you need to define a container as a grid with the display: grid; property. This makes all direct children of the container become grid items.

.container {
  display: grid;
}

Next, you can define the column and row sizes with the grid-template-columns and grid-template-rows properties.

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

In the example above, the grid will have three columns of equal width and two rows of equal height.

Creating Responsive Grids​

To create a responsive layout with CSS Grid, we need to use the fr unit. The fr unit represents a fraction of the available space in the grid container. 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

In the code above, the grid will have three columns of equal width, regardless of the size of the viewport.

Using Media Queries with CSS Grid​

Media queries can be used in conjunction with CSS Grid to create complex responsive layouts. Media queries allow us to apply different styles for different screen sizes.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

In the example above, the grid has three columns on screens larger than 600px and only one column on screens smaller than 600px.

Grid Gap​

To create space between the grid items, you can use the grid-gap property.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

In the above code, there will be a 10px gap between each grid item.

Conclusion​

CSS Grid is a powerful tool for creating complex and responsive web layouts. By understanding the basics of CSS Grid and how to use it in conjunction with media queries, you can start to create more flexible and responsive designs. Practice is key in mastering CSS Grid, so try to use it in your next project!