Creating Responsive Layouts with CSS Grid

Posted on:April 23, 2023 at 11:00 AM

CSS Grid is a powerful tool that allows web developers to create complex and flexible layouts for their websites. With the rise of mobile devices and responsive web design, it’s more important than ever to create layouts that adapt to different screen sizes. In this article, we’ll explore how to use CSS Grid to create responsive grids that work seamlessly across all devices.

Table of contents

Open Table of contents

What is CSS Grid?

CSS Grid is a two-dimensional grid layout system that allows you to create complex layouts with rows and columns. It’s supported by all major web browsers, including Chrome, Firefox, Safari, and Edge. With CSS Grid, you can create responsive layouts that adjust to different screen sizes, making it an ideal tool for modern web design.

Getting Started with CSS Grid

Before we dive into creating responsive layouts with CSS Grid, let’s first go over some of the basics. To use CSS Grid, you’ll need to create a container element that will hold your grid items. This container is known as the grid container.

To create a grid container, you’ll need to apply the display property with a value of grid to an element in your HTML. For example:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

In the above example, we’ve created a container element with a class of grid-container and three child elements with a class of grid-item. Now that we have our container set up, let’s add some styles to create a basic grid layout.

Creating a Basic Grid Layout

To create a basic grid layout, we’ll need to define the number of rows and columns in our grid. We can do this by using the grid-template-rows and grid-template-columns properties.

For example, let’s say we want to create a grid with two rows and three columns. We can do this by adding the following styles to our grid-container:

.grid-container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

In the above example, we’ve used the repeat function to define two rows and three columns with a value of 1fr for each row and column. 1fr is a unit of measurement that stands for “fraction of available space”. This means that each row and column will take up an equal amount of available space in the container.

Adding Grid Items

Now that we have our grid set up, let’s add some content to our grid. To do this, we’ll need to create some grid items and add them to our container.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
</div>

In the above example, we’ve added six grid items to our container. By default, grid items will fill the available space in the grid. However, we can control the size and placement of our grid items using CSS Grid.

Controlling Grid Item Size and Placement

To control the size and placement of our grid items, we can use a number of CSS Grid properties, including:

  1. grid-column-start and grid-column-end: These properties define the starting and ending columns of a grid item.
  2. grid-row-start and grid-row-end: These properties define the starting and ending rows of a grid item.
  3. grid-column and grid-row: These properties are shorthand for grid-column-start and grid-column-end, and grid-row-start and grid-row-end, respectively.
  4. grid-area: This property is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end.
  5. grid-template-areas: This property defines named grid areas that can be used to place grid items.
  6. grid-template-rows and grid-template-columns: These properties define the size and number of rows and columns in the grid.

Let’s take a look at an example of how we can use these properties to create a responsive grid.

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

.grid-item {
  background-color: #ddd;
  border: 1px solid #888;
  padding: 20px;
  text-align: center;
}

.grid-item:nth-child(odd) {
  background-color: #bbb;
}

In this example, we have a grid container with 9 grid items inside. We have used the repeat() function to create a flexible grid with a minimum width of 200 pixels and a maximum width of 1 fractional unit. This means that the grid items will adjust their width depending on the size of the viewport. We have also added a gap between the grid items using the grid-gap property.

To control the placement of our grid items, we can use the grid-column and grid-row properties. For example, to place the first grid item in the top-left corner of the grid, we can use:

.grid-item:first-child {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

This will set the starting row and column of the grid item to 1, and the ending row and column to 2.

We can also use the grid-template-areas property to create named grid areas that we can use to place our grid items. For example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}

.grid-item:first-child {
  grid-area: header;
}

.grid-item:nth-child(2),
.grid-item:nth-child(3) {
  grid-area: main;
}

.grid-item:nth-child(4) {
  grid-area: sidebar;
}

.grid-item:nth-child(5) {
  grid-area: footer;
}

In this example, we have defined named grid areas for the header, main content, sidebar, and footer sections of our grid. We can then use these named areas in the grid-template-areas property to specify how we want our grid items to be placed within these areas. For example, we could set the grid-template-areas property to:

grid-template-areas:
  "header header header"
  "main main sidebar"
  "footer footer footer";

This would create a three-row grid with three columns, where the header section takes up the entire first row, the main content section takes up the entire second row except for the last column, and the sidebar and footer sections each take up one column in the last row.

We can also use the grid-area property on individual grid items to specify which named area they should occupy. For example, to place an item with the class “logo” in the “header” area, we could use:

.logo {
  grid-area: header;
}

Similarly, we could place an item with the class “main-content” in the “main” area using:

.main-content {
  grid-area: main;
}

By using named grid areas and the grid-template-areas property, we can easily create complex grid layouts that adapt to different screen sizes. This makes it a powerful tool for creating responsive web designs that look great on a wide range of devices.

Conclusion

CSS Grid is a powerful tool that can help developers create responsive layouts that adapt to different screen sizes. By understanding the basics of CSS Grid and its properties, developers can create complex layouts with ease. By using media queries, developers can make their layouts responsive and ensure that they provide the best user experience across different devices. With CSS Grid, the possibilities for creating responsive layouts are endless.

What’s next?

In the coming article, we will be covering Mobile-first web design. Don’t forget to follow and share this with your friends that are just starting their web development journey