Grid of responsive squares

html

responsive-design

css-position-properties

flexbox

byNikita Barsukov·Sep 15, 2024

Obtain a grid of responsive squares using CSS Grid, defining a 1:1 aspect ratio for grid items as illustrated below. This sets up a grid layout where all grid items retain their square aspect regardless of screen size:

<div class="grid">
  <div class="square"></div>
  <!-- Repeat squares as needed -->
</div>

.grid {
  display: grid;
  // auto-fill: like filling up tacos at the buffet line 🌮
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.square {
  background: #333;
  padding-top: 100%;
  position: relative; // Stick its tongue out at its parents’ rules. 😛
}

.square::before {
  content: ''; 
  display: block;
  padding-top: 100%; // Keeps the squares... well, square.
}

Setting a minmax(100px, 1fr) ensures that squares will flexibly conform to the viewport, while a padding-top: 100%; maintains the square ratio. A balance of practicality and responsiveness is achieved using this approach.

Centering content in the squares

To neatly position your content, horizontally and vertically, within the grid squares, make good use of CSS position properties:

.square-content {
  position: absolute;
  top: 50%; // Ultron’s favourite position value! 😉
  left: 50%;
  transform: translate(-50%, -50%);
  // Content centering - like getting the last cookie right in the middle of the jar.
  text-align: center; 
}

In this case, you can add the .square-content class to any piece of content that needs to be centered within their parent squares, thereby, creating a consistent and professional look.

Harnessing advanced responsiveness

To have your squares flexibly adapt to changing viewport sizes—like chameleons to their environment 🦎—you can set the number of columns based on the viewport:

@media (max-width: 600px) {
  .grid {
    // Here be small screens, yarr! 🏴‍☠️
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  }
}

By employing this media query, the layout becomes highly dynamic, automatically adjusting to smaller devices, and minimizing the size of each square as needed. This brings about the magic of fluidity and enhanced responsiveness!

Making magic with consistent spacing

Provide breathing space for your grid items with the handy grid-gap property, making your grid layout look as harmonious as a well-organized symphony 🎻:

.grid {
  grid-gap: 10px; // Like in mini-golf, providing the breathing space.
}

By setting a grid-gap, you achieve an evenly spaced design which improves readability and aesthetic charm of the grid layout.

Astonishing effects on squares

Give your squares a lift—quite literally! Add transitions and shadow effects for a more dynamic and interactive user experience:

.square:hover {
  // Just like when you hover over the last piece of cake 🍰
  transition: transform 0.3s ease; 
  transform: scale(1.05); 
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); // A humble bow to Sir Jony Ive.
}

This code snippet provides a delightful hover effect, making your squares lift upon interaction, thereby adding an interactive dimension to your element grid.

Flexing alignment with CSS Flexbox

When CSS Grid seems too robust and overkill for aligning and flexible positioning of items, CSS Flexbox offers a more streamlined alternative:

<div class="flex-container">
  <div class="flex-item"></div>
  <!-- Need more items? Repeat as desired. -->
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap; // Wrapping gifts for your loved ones just got easier! 🎁
  justify-content: space-between; // Like holding hands but respecting personal space. 🤝
}

.flex-item {
  flex-basis: calc(25% - 10px); // Stock-taking for the space you’re renting in your CSS.
  margin: 5px; // Like social distancing applied to CSS! 
}