How to create a Grid of squares

PublishedJune 23, 2024

•3 min read•View as Markdown

Tiger Abrodi

Just a guy who loves to write code and watch anime.

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Become a cracked product engineer today

Qualities that make outstanding builders.

Jun 1, 20264 min read

Bipedal, humanoid, and the words for creature shapes in games

Bipedal vs quadrupedal: how many legs This is about the number of legs the creature walks on. Bipedal. Two legs. Humans, ostriches, T-rex, kangaroos, most fantasy humanoids. Quadrupedal. Four legs. Do

May 18, 20263 min read

Bipedal, humanoid, and the words for creature shapes in games

Lerp and smoothstep, what they actually do

Intro You hear "lerp" and "smoothstep" everywhere in game dev. They sound like math jargon. They're not. Both are small tools that do the same job: smoothly move from one value to another. The problem

May 18, 20264 min read

Lerp and smoothstep, what they actually do

IK and FK, what they actually are

What is Kinematics Kinematics is the math field. It's the study of how things move without worrying about forces (which would be dynamics). FK and IK are the two branches: forward kinematics and inver

May 10, 20267 min read

How to make your textures fast on the GPU

Intro Textures are usually the biggest cost in a 3D scene. Memory, bandwidth, and load time all get eaten by them. Resizing them is the obvious lever. There's more. This post is about the less obvious

May 10, 20268 min read

How to make your textures fast on the GPU

Tiger's Place

497 posts

The problem

You want to display items side by side in a grid. You set the number of columns, and you want each item's height to match its width to form a square. How do you do this?

I faced this problem at work. I needed to create a gallery like on iPhone, WhatsApp, or Telegram, where you see a grid of images and can click on them to view in full screen.

Achieve equal width

To achieve the items having equal width, we can use display Grid.

<div className="grid grid-cols-4 gap-1"> {images && images.map((image) => ( <img key={image.id} src={image.url} alt="image" className="w-full" /> ))} </div>

This will give us a grid of 4 columns with a gap of 4px. Each column will take equal width. The images will take the full width of the column and their height will adjust to maintain the aspect ratio.

The issue here is that we want the images to take equal height. Once that's done, we could use object-fit: cover; to ensure the images cover the entire space and their aspect ratio is maintained.

Achieve equal height

To make height the same value as the width, we can use padding-top: 100%; to achieve this. When you use padding with percentage, it's calculated based on the width of the element.

<div className="grid grid-cols-4 gap-1"> {images && images.map((image) => ( <div // padding top 100% to ensure square based off the width className="relative w-full pt-[100%]" key={image.id} > <img src={image.url} alt="" className="absolute left-0 top-0 h-full w-full object-cover" /> </div> ))} </div>

As you can see, we now have a wrapper around the image.

Let's try to understand how things work here in chronological order:

div is the wrapper. It takes full width and its height is the same as the width.

div has padding-top: 100%;. This means it will naturally push down the image inside of it to fill the space.

Therefore, the image can not be inside the normal flow of the document.

div is given relative positioning.

img is given absolute positioning and can be placed anywhere.

Because the parent of img has relative positioning, the img will be positioned relative to its closest ancestor that has relative or absolute positioning.

img is given left: 0; top: 0;. This means the top left corner of the image will be at the top left corner of the div.

img is given h-full w-full. This means the image will take the full height and width of the div.

img is given object-cover. This means the image will cover the entire space of the div and its aspect ratio is maintained.

And that's how you achieve a grid of squares.

Command Palette

Comments

More from this blog

The problem

Achieve equal width

Achieve equal height