How to Create a Responsive Grid of Squares Using CSS?

Creating a Responsive Grid of Squares

Introduction:
Creating a layout featuring responsive squares can often be a challenging task. However, with the help of CSS techniques, achieving this effect is possible.

Responsive Squares Layout:
The provided example demonstrates a grid of squares with vertically and horizontally aligned content. To implement this layout, we'll utilize the "grid" and "aspect-ratio" properties.

CSS Implementation:
The CSS code below establishes the grid and sets the aspect ratio of each square to maintain its square shape:

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

.square {
  aspect-ratio: 1 / 1;
}

Content Alignment:
To align the content within each square, we'll employ the "flex" property and "align-items" property:

.square {
  display: flex;
  align-items: center;
}

Flexible Content Handling:
The squares can accommodate various content types, including text, images, and lists. To ensure the content remains centered, we'll apply appropriate padding and ensure images are contained within the squares:

.square {
  padding: 5%;
}

.square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

Full-Width Images:
For squares displaying full-width images, we'll remove the padding and adjust the object-fit property to cover the square completely:

.square.fullImg {
  padding: 0;
}

.square.fullImg img {
  object-fit: cover;
}

Dynamic Sizing:
By defining the "grid-template-columns" property as "repeat(3, 1fr)", the squares adjust their width dynamically based on the available space, maintaining a responsive layout on different screen sizes.

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