How to Create a Responsive Grid Layout with Equal-Height Squares Using CSS Grid and Flexbox?

Responsive Grid Layout with Equal-Height Squares

Introduction

Creating a grid layout with responsive squares can be a challenge, especially when trying to maintain equal height and spacing between squares. While both CSS Grid and Flexbox can be used for this purpose, this article will explore how to achieve this with CSS Grid and the "padding-bottom" trick.

Setting Height Equal to Width

Using CSS Grid

To set the height of squares equal to their width using CSS Grid, apply the "padding-bottom" trick, which creates a pseudo-element that maintains the aspect ratio of the square. The following CSS rules can be applied:

.square-container {
  display: grid;
  grid-template-columns: 30% 30% 30%;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

This ensures that the squares remain squares no matter what the content is.

Using Flexbox

To achieve the same effect with Flexbox, a similar approach can be used:

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

In Flexbox, the content property is used to position the square's content absolutely within it.

Setting Gutter Between Squares

The "padding-bottom" trick can also be used to create a gutter between squares:

.square-container {
  gap: 10px;  /* Set the gap between squares */
}

This adds a 10px gap between each square.

Responsive Behavior

To make the layout responsive, a media query can be used to change the grid layout to a single column for smaller screen sizes:

@media (max-width: 600px) {
  .square-container {
    grid-template-columns: 100%;
  }
}

This ensures that the squares stack vertically on narrow screens.

Conclusion

By using the "padding-bottom" trick, both CSS Grid and Flexbox can be used to create a responsive grid layout with equal-height squares and gutters between them. This technique is widely used and provides a reliable solution for this common layout requirement.

The above is the detailed content of How to Create a Responsive Grid Layout with Equal-Height Squares Using CSS Grid and Flexbox?. For more information, please follow other related articles on the PHP Chinese website!