How to Create a Responsive CSS Grid Layout of Equal-Sized Squares?

CSS Grid Squared Layout

This question explores the intricacies of creating a CSS grid layout composed of squares, where each square retains its aspect ratio during screen resize.

Implementing the Layout

To achieve this layout, consider the following CSS code:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
  aspect-ratio: 1;
}

Understanding the Code

• display: grid;: Activates the grid layout for the container element.
• grid-template-columns: 1fr 1fr 1fr 1fr;: Defines a grid with four columns of equal width (1fr = one fraction of available space).
• grid-gap: 5px;: Sets a 5-pixel gap between grid cells.
• background-color: red;: Styles the grid cells with a red background.
• aspect-ratio: 1;: Maintains the aspect ratio of each cell as 1:1. This property ensures that the squares remain square-shaped regardless of screen size.

This approach allows you to create a grid of squares that retains its aspect ratio during resizing, providing a flexible and responsive layout.

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