Getting Creative with CSS Grid
Tags: css, webdev, tutorial, showdev
Published: 2024-05-24 06:54:41


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:

```html
<figure class="ui-bubble-grid">
 <!--IMAGES-->
</figure>
```

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

```html
<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:


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

```css
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:

![Initial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ot3vzgxmo7aazqgf5ev.png)

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

![Dev Tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfhgh4z9yx6xo72bp82g.png)

---

OK, so not much going on yet. Each image automatically fills up one grid-cell.

Let's change that with `grid-area`:

```css
&: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:

![Grid Area](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6im4x88nwtr5tn7qtx2q.png)

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

![Border Radius](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6hfffrhjg6e1at48p0p.png)

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

![Bubble Grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ccgu65y5vb7ula2l3ri.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/af6pei7y3g8fxqt7w57m.png)

---

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:

{% codepen https://codepen.io/stoumann/pen/vYwKqbp %}

---

## 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`:

![Hex Grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fok6tv2fzs0hxjze7vpe.png)

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