Getting Creative with CSS Grid

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 use grid-column and grid-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!

Comments

[Matt Miller]

Interesting approach indeed. Well done 👌

[Mads Stoumann]

Thanks!

[Stephen Samra]

Great article, thanks for sharing.

[Mads Stoumann]

Thank you!