How to create a responsive flexbox grid in CSS

Arif Billah Babu

          

  CSS



Image not found!!

Creating a responsive flexbox grid in CSS involves using the flexbox layout model to create a grid system that adjusts to different screen sizes. Here's a basic example to help you get started:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 20px;
    }

    .item {
      box-sizing: border-box;
      flex: 0 1 calc(33.333% - 20px); /* Three items per row with 20px spacing */
      margin-bottom: 20px;
    }

    @media screen and (max-width: 768px) {
      .item {
        flex: 0 1 calc(50% - 20px); /* Two items per row on smaller screens */
      }
    }

    @media screen and (max-width: 480px) {
      .item {
        flex: 0 1 100%; /* One item per row on even smaller screens */
      }
    }

    .item img {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="item">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <!-- Add more items as needed -->
</div>

</body>
</html>

In this example:

  • The .container class represents the flex container.
  • The .item class represents each flex item within the container.
  • flex-wrap: wrap; allows items to wrap onto the next line when the container's width is not enough.
  • flex: 0 1 calc(33.333% - 20px); is used to distribute the items evenly in a row with a 20px margin between items. Adjust percentages and margins as needed.
  • Media queries (@media) are used to change the layout on different screen sizes.

Feel free to customize the code according to your specific needs and add more items to the grid as required.

Category List