DEV Community

Cover image for Getting Creative with CSS Grid
Mads Stoumann
Mads Stoumann

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

Within that tag, add images — I'm using:

<img src="https://source.unsplash.com/random/300x300?sig=1" 
alt="TEXT" width="300" height="300">
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Let's also add some nested default styles for images:

img {
  background: #CCC;
  height: auto;
  object-fit: cover;
  width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

This will ensure the images take up all of the assigned "grid-space".

Let's see what we have:

Initial

Note: For the grid-view, select the <figure>-tag in Dev Tools, and click on the "grid"-button:

Dev Tools


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; }
Enter fullscreen mode Exit fullscreen mode

… and we get:

Grid Area

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; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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:

Border Radius

Nice! Now, let's de-select the grid-preview in Dev Tools and see what we've created:

Bubble Grid

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

More images


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);
Enter fullscreen mode Exit fullscreen mode

— you can create a hexagonal grid, with adjustable gap:

Hex Grid

Please share your crazy grid-ideas in the comments below!

Top comments (6)

Collapse
 
redwansikder profile image
redwansikder

Amazing

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Collapse
 
r4nd3l profile image
Matt Miller

Interesting approach indeed. Well done 👌

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Collapse
 
stephensamra profile image
Stephen Samra

Great article, thanks for sharing.

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!