Skip to main content

Flexible Grid Layouts (Live Playground)

In this tutorial, we will discuss how to create flexible grid layouts in your web designs, which is an essential part of responsive design. Flexible grid layouts allow your website to adapt to different devices and screen sizes by automatically adjusting the width and height of the elements based on the available space.

What is a flexible grid layout?​

A flexible grid layout is a layout method that allows your web page elements to resize and reposition based on the available space. It is created using relative units (such as percentages) instead of fixed units (such as pixels) to define the size and position of the elements.

By using a flexible grid layout, you can ensure that your website looks great and functions well on a variety of devices, providing a better user experience.

Creating a flexible grid layout​

To create a flexible grid layout, you need to use relative units like percentages or viewport units (such as vw, vh, vmin, vmax) to define the width and height of your elements. Let's create a simple grid layout using percentages:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Flexible Grid Layout Example</title>
    <style>
      .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1rem;
      }

      .item {
        background-color: lightblue;
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
    </div>
  </body>
</html>

In this example, we have created a simple grid layout using the CSS Grid Layout module. We defined a .container class with display: grid; to create a grid container. We used grid-template-columns: repeat(3, 1fr); to create three equal-width columns, and grid-gap: 1rem; to add space between the grid items.

The .item class is applied to each grid item and includes a background color and padding. By using the fr unit, we create a flexible grid layout that adapts to different screen sizes.

Live Playground, Try it Yourself

Making the grid responsive​

To make the grid responsive, we can use media queries to change the number of columns based on the screen size. Let's update our CSS to include media queries:

CSS
.container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1rem;
}

@media screen and (min-width: 480px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 768px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

.item {
  background-color: lightblue;
  padding: 1rem;
}

In this updated CSS, we have modified the .container class to have one column by default. We then added two media queries:

  • For screens with a minimum width of 480px, we change the number of columns to 2.
  • For screens with a minimum width of 768px, we change the number of columns to 3.

Now our grid layout will adapt to different screen sizes by adjusting the number of columns.

Live Playground, Try it Yourself

Using CSS Flexbox​

Another way to create flexible grid layouts is by using the CSS Flexbox module. Let's create a responsive grid layout using Flexbox:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Flexible Grid Layout Example - Flexbox</title>
    <style>
      .container {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
      }

      .item {
        flex: 1 1 calc(100% - 1rem);
        background-color: lightblue;
        padding: 1rem;
      }

      @media screen and (min-width: 480px) {
        .item {
          flex: 1 1 calc(50% - 1rem);
        }
      }

      @media screen and (min-width: 768px) {
        .item {
          flex: 1 1 calc(33.333% - 1rem);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
    </div>
  </body>
</html>

In this example, we have created a flexible grid layout using Flexbox. We defined the .container class with display: flex; to create a flex container and flex-wrap: wrap; to allow the flex items to wrap onto multiple lines. The gap: 1rem; property adds space between the flex items.

The .item class uses the flex property to define the size and grow/shrink behavior of the flex items. The calc() function is used to calculate the width of the items, accounting for the gap.

Media queries are added to change the width of the flex items based on the screen size, making the grid responsive.

Live Playground, Try it Yourself

Conclusion​

In conclusion, flexible grid layouts are essential for creating responsive web designs that adapt to different devices and screen sizes. By using CSS Grid Layout or Flexbox and relative units like percentages or viewport units, you can create fluid layouts that look great and provide a better user experience.