How Can I Create a Responsive Square Grid Layout Using CSS Grid?

Creating a Square Grid Layout with CSS Grid

Creating a layout of squares, with four squares in each row, can be achieved using CSS Grid. To ensure that the squares retain their shape even upon screen resize, it's crucial to avoid using fixed values.

Example Code

The following code demonstrates how to create such a layout:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}

.container div {
  background-color: red;
  aspect-ratio: 1;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Explanation

• The .container element is set to display: grid and uses a grid template with four columns of equal width.
• The grid-gap property adds a 5px gap between the squares.
• Each square, represented by the .container div selector, has a red background color.
• The aspect-ratio property, supported by modern browsers, is used to maintain a 1:1 aspect ratio for each square, ensuring that they remain square regardless of screen size or orientation.

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