Grids don't have to be boring! You can easily spice up a classic 12x12 grid with very few lines of CSS — it's time to master grid-area
!
First, let's create a <figure>
-tag with a class:
<figure class="ui-bubble-grid">
<!--IMAGES-->
</figure>
Within that tag, add images — I'm using:
<img src="https://source.unsplash.com/random/300x300?sig=1"
alt="TEXT" width="300" height="300">
Replace the sig=1
with sig=2
etc. for more random images.
Next, let's add a simple 12x12 grid in CSS:
:where(.ui-bubble-grid) {
all: unset;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
}
Let's also add some nested default styles for images:
img {
background: #CCC;
height: auto;
object-fit: cover;
width: 100%;
}
This will ensure the images take up all of the assigned "grid-space".
Let's see what we have:
Note: For the grid-view, select the
<figure>
-tag in Dev Tools, and click on the "grid"-button:
OK, so not much going on yet. Each image automatically fills up one grid-cell.
Let's change that with grid-area
:
&:nth-child(1) { grid-area: 1 / 1 / 7 / 7; }
&:nth-child(2) { grid-area: 5 / 5 / 11 / 11; }
&:nth-child(3) { grid-area: 9 / 3 / 13 / 7; }
&:nth-child(4) { grid-area: 3 / 9 / 7 / 13; }
&:nth-child(5) { grid-area: 8 / 1 / 11 / 4; }
&:nth-child(6) { grid-area: 2 / 8 / 4 / 10; }
&:nth-child(7) { grid-area: 10 / 10 / 13 / 13; }
&:nth-child(8) { grid-area: 1 / 11 / 3 / 13; }
… and we get:
Wait! What? Let's dive into that! grid-area
is short for:
- grid-row-start
- grid-column-start
- grid-row-end
- grid-column-end
Note: If you find
grid-area
hard to read, you can usegrid-column
andgrid-row
instead.
Now, if we look at the first image, it has this code:
{ grid-area: 1 / 1 / 7 / 7; }
We start at the first row (1) and the first column (1).
We want the image to take up 6x6 cells, so the end row and end column are 7, as 7 - 1 = 6
.
For the next image, we want to layer it on top of the first image (bottom right) with a slight offset. Looking at the grid, that'll be column 5 and row 5. As we also want the next image to be 6x6, the CSS is:
{ grid-area: 5 / 5 / 11 / 11; }
Now, I encourage you to study the other grid-area
-parts I made. Play around with them, move stuff around: make your own grid!
When you're ready, let's add a border-radius: 50%
to the img
in CSS, and we get:
Nice! Now, let's de-select the grid-preview in Dev Tools and see what we've created:
I like it! But what happens if you add more images than you created grid-area
-parts for?
CSS grid will just find the first empty grid-cell, then the next etc.:
What about responsiveness? The grid is resizable, but some of the images might get too small on phones. If you want — add a @media
or @container
-query, and then simply change the grid-area
-parts for that breakpoint.
Demo
Here's a CodePen you can fork and play with:
Other Ideas
By removing the border-radius
from img
, adjusting the grid-area
-parts and adding a clip-path
:
clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
— you can create a hexagonal grid, with adjustable gap
:
Please share your crazy grid-ideas in the comments below!
Top comments (6)
Amazing
Thanks!
Interesting approach indeed. Well done 👌
Thanks!
Great article, thanks for sharing.
Thank you!