How to Create a Responsive 4-Column Grid Layout with Equal-Sized Squares Using CSS Grid?

CSS Grid Square Layout

Want to create a grid layout composed of squares, with each row containing four squares . These squares do not deform when the screen size changes and always maintain the same width and height (fixed values ​​are not desirable). CSS grid is required. Here's how to do it:

Using CSS, you can always maintain an aspect ratio of 1:1 via a pseudo-element, or use the new property aspect-ratio, for example:

.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>

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