In a earlier article, I checked out CSS Grid’s capacity to create advanced layouts utilizing its auto-placement powers. I took that one step additional in one other article that added a zooming hover impact to photographs in a grid format. This time, I need to dive into one other sort of grid, one which works with shapes.
Like, what if the photographs aren’t completely sq. however as a substitute are formed like hexagons or rhombuses? Spoiler alert: we are able to do it. Actually, we’re going to mix CSS Grid strategies we’ve checked out and drop in some CSS clip-path and masks magic to create fancy grids of pictures for almost any form you’ll be able to think about!
Let’s begin with some markup
A lot of the layouts we’re going to have a look at could look straightforward to attain at first look, however the difficult half is to attain them with the identical HTML markup. We are able to use a whole lot of wrappers, divs, and whatnot, however the purpose of this submit is to make use of the identical and smallest quantity of HTML code and nonetheless get all of the completely different grids we wish. In spite of everything, what’s CSS however a solution to separate styling and markup? Our styling mustn’t rely upon the markup, and vice versa.
This stated, let’s begin with this:
<div class="gallery">
<img src="https://css-tricks.com/css-grid-and-custom-shapes-part-1/..." alt="https://css-tricks.com/css-grid-and-custom-shapes-part-1/...">
<img src="https://css-tricks.com/css-grid-and-custom-shapes-part-1/..." alt="https://css-tricks.com/css-grid-and-custom-shapes-part-1/...">
<img src="https://css-tricks.com/css-grid-and-custom-shapes-part-1/..." alt="https://css-tricks.com/css-grid-and-custom-shapes-part-1/...">
<img src="https://css-tricks.com/css-grid-and-custom-shapes-part-1/..." alt="https://css-tricks.com/css-grid-and-custom-shapes-part-1/...">
<!-- as many occasions as we wish -->
</div>A container with pictures is all that we want right here. Nothing extra!
CSS Grid of Hexagons
That is additionally typically known as a “honeycomb” grid.
There are already loads of different weblog posts on the market that present how you can make this. Heck, I wrote one right here on CSS-Methods! That article remains to be good and goes manner deep on making a responsive format. However for this particular case, we’re going to depend on a a lot easier CSS strategy.
First, let’s use clip-path on the photographs to create the hexagon form and we place all of them in the identical grid space so that they overlap.
.gallery {
--s: 150px; /* controls the scale */
show: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cowl;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%)Nothing fancy but. All the photographs are hexagons and above one another. So it seems to be like all now we have is a single hexagon-shaped picture factor, however there are actually seven.
The following step is to use a translation to the photographs to appropriately place them on the grid.
Discover that we nonetheless need one of many pictures to stay within the middle. The remaining are positioned round it utilizing CSS translate and good ol’ original geometry. Right here’s are the mock formulation I got here up with for every picture within the grid:
translate((top + hole)*sin(0deg), (top + hole)*cos(0))
translate((top + hole)*sin(60deg), (top + hole)*cos(60deg))
translate((top + hole)*sin(120deg), (top + hole)*cos(120deg))
translate((top + hole)*sin(180deg), (top + hole)*cos(180deg))
translate((top + hole)*sin(240deg), (top + hole)*cos(240deg))
translate((top + hole)*sin(300deg), (top + hole)*cos(300deg))Just a few calculations and optimization later (let’s skip that boring half, proper?) we get the next CSS:
.gallery {
--s: 150px; /* management the scale */
--g: 10px; /* management the hole */
show: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cowl;
clip-path: polygon(25% 0%, 75% 0%, 100% 50% ,75% 100%, 25% 100%, 0 50%);
rework: translate(var(--_x,0), var(--_y,0));
}
.gallery > img:nth-child(1) { --_y: calc(-100% - var(--g)); }
.gallery > img:nth-child(7) { --_y: calc( 100% + var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) { --_x: calc(-75% - .87*var(--g)); }
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) { --_x: calc( 75% + .87*var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) { --_y: calc(-50% - .5*var(--g)); }
.gallery > img:nth-child(5),
.gallery > img:nth-child(6) { --_y: calc( 50% + .5*var(--g)); }Perhaps that’ll be simpler after we get actual trigonometry capabilities in CSS!
Every picture is translated by the --_x and --_y variables which are primarily based on these formulation. Solely the second picture (nth-child(2)) is undefined in any selector as a result of it’s the one within the middle. It may be any picture for those who resolve to make use of a special order. Right here’s the order I’m utilizing:
With only some traces of code, we get a cool grid of pictures. To this, I added a little bit hover impact to the photographs to make issues fancier.
Guess what? We are able to get one other hexagon grid by merely updating a number of values.
Should you verify the code and examine it with the earlier one you’ll discover that I’ve merely swapped the values inside clip-path and I switched between --x and --y. That’s all!
CSS Grid of Rhombuses
Rhombus is such a flowery phrase for a sq. that’s rotated 45 levels.
Identical HTML, bear in mind? We first begin by defining a 2×2 grid of pictures in CSS:
.gallery {
--s: 150px; /* controls the scale */
show: grid;
hole: 10px;
grid: auto-flow var(--s) / repeat(2, var(--s));
place-items: middle;
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
object-fit: cowl;
}The very first thing which may catch your eye is the grid property. It’s fairly uncommonly used however is tremendous useful in that it’s a shorthand that allows you to outline an entire grid in a single declaration. It’s not essentially the most intuitive — and to not point out readable — property, however we’re right here to study and uncover new issues, so let’s use it moderately than writing out all the particular person grid properties.
grid: auto-flow var(--s) / repeat(2,var(--s));
/* is equal to this: */
grid-template-columns: repeat(2, var(--s));
grid-auto-rows: var(--s);This defines two columns equal to the --s variable and units the peak of all of the rows to --s as nicely. Since now we have 4 pictures, we’ll robotically get a 2×2 grid.
Right here’s one other manner we may have written it:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));…which may be decreased with the grid shorthand:
grid: repeat(2,var(--s)) / repeat(2,var(--s));After setting the grid, we rotate it and the photographs with CSS reworks and we get this:
Notice how I rotate them each by 45deg, however in the other way.
.gallery {
/* and so forth. */
rework: rotate(45deg);
}
.gallery > img {
/* and so forth. */
rework: rotate(-45deg);
}Rotating the photographs within the unfavourable path prevents them from getting rotated with the grid so that they keep straight. Now, we apply a clip-path to clip a rhombus form out of them.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)We’re nearly performed! We have to rectify the scale of the picture to make them match collectively. In any other case, they’re spaced far aside to the purpose the place it doesn’t seem like a grid of pictures.
The picture is inside the boundary of the inexperienced circle, which is the inscribed circle of the grid space the place the picture is positioned. What we wish is to make the picture greater to suit contained in the crimson circle, which is the circumscribed circle of the grid space.
Don’t fear, I received’t introduce any extra boring geometry. All you must know is that the connection between the radius of every circle is the sq. root of two (sqrt(2)). That is the worth we have to improve the scale of our pictures to fill the realm. We are going to use 100%*sqrt(2) = 141% and be performed!
.gallery {
--s: 150px; /* management the scale */
show: grid;
grid: auto-flow var(--s) / repeat(2,var(--s));
hole: 10px;
place-items: middle;
rework: rotate(45deg);
}
.gallery > img {
width: 141%; /* 100%*sqrt(2) = 141% */
aspect-ratio: 1;
object-fit: cowl;
rework: rotate(-45deg);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}Just like the hexagon grid, we are able to make issues fancier with that good zooming hover impact:
CSS Grid of Triangular Shapes
You in all probability know by now that the massive trick is determining the clip-path to get the shapes we wish. For this grid, every factor has its personal clip-path worth whereas the final two grids labored with a constant form. So, this time round, it’s like we’re working with a number of completely different triangular shapes that come collectively to type an oblong grid of pictures.
We place them inside a 3×2 grid with the next CSS:
.gallery {
show: grid;
hole: 10px;
grid-template-columns: auto auto auto; /* 3 columns */
place-items: middle;
}
.gallery > img {
width: 200px; /* controls the scale */
aspect-ratio: 1;
object-fit: cowl;
}
/* the clip-path values */
.gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); }
.gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gallery > img:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%); }
.gallery > img:nth-child(4) { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); }
.gallery > img:nth-child(5) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); }
.gallery > img:nth-child(6) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 100%); } }Right here’s what we get:
The ultimate contact is to make the width of the center column equal 0 to eliminate the areas between the photographs. The identical type of spacing drawback we had with the rhombus grid, however with a special strategy for the shapes we’re utilizing:
grid-template-columns: auto 0 auto;I needed to fiddle with the clip-path values to ensure they might all seem to suit collectively properly like a puzzle. The unique pictures overlap when the center column has zero width, however after slicing the photographs, the phantasm is ideal:
CSS Pizza Pie Grid
Guess what? We are able to get one other cool grid by merely including border-radius and overflow to our grid or triangular shapes. 🎉
CSS Grid of Puzzle Items
This time we’re going to play with the CSS masks property to make the photographs seem like items of a puzzle.
Should you haven’t used masks with CSS gradients, I extremely advocate this different article I wrote on the subject as a result of it’ll assist with what comes subsequent. Why gradients? As a result of that’s what we’re utilizing to get the spherical notches within the puzzle piece shapes.
Organising the grid ought to be a cinch by now, so let’s focus as a substitute on the masks half.
As illustrated within the above demo, we want two gradients to create the ultimate form. One gradient creates a circle (the inexperienced half) and the opposite creates the best curve whereas filling within the high half.
--g: 6px; /* controls the hole */
--r: 42px; /* management the round shapes */
background:
radial-gradient(var(--r) at left 50% backside var(--r), inexperienced 95%, #0000),
radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%, #0000 95%, crimson)
high/100% calc(100% - var(--r)) no-repeat;Two variables management the form. The --g variable is nothing however the grid hole. We have to account for the hole to appropriately place our circles so that they overlap completely when the entire puzzle is assembled. The --r variable controls the scale of round elements of the puzzle form.
Now we take the identical CSS and replace a number of values in it to create the three different shapes:
We’ve got the shapes, however not the overlapping edges we have to make them match collectively. Every picture is restricted to the grid cell it’s in, so it is smart why the shapes are type of jumbled in the intervening time:
We have to create an overflow by rising the peak/width of the photographs. From the above determine, now we have to extend the peak of the primary and fourth pictures whereas we improve the width of the second and third ones. You will have in all probability already guessed that we have to improve them utilizing the --r variable.
.gallery > img:is(:nth-child(1),:nth-child(4)) {
width: 100%;
top: calc(100% + var(--r));
}
.gallery > img:is(:nth-child(2),:nth-child(3)) {
top: 100%;
width: calc(100% + var(--r));
}We’re getting nearer!
We created the overlap however, by default, our pictures both overlap on the best (if we improve the width) or the underside (if we improve the peak). However that’s not what we wish for the second and fourth pictures. The repair is to make use of place-self: finish on these two pictures and our full code turns into this:
Right here is one other instance the place I’m utilizing a conic gradient as a substitute of a radial gradient. This offers us triangular puzzle items whereas maintaining the identical underlying HTML and CSS.
A final one! This time I’m utilizing clip-path and because it’s a property we are able to animate, we get a cool hover by merely updating the {custom} property that controls the form.
Wrapping up
That’s all for this primary half! By combining the issues we’ve already realized about CSS Grid with some added clip-path and masks magic, we have been in a position to make grid layouts that includes completely different sorts of shapes. And we used the identical HTML markup every time! And the markup itself is nothing greater than a container with a handful of picture parts!
Within the second half, we’re going to discover extra complex-looking grids with extra fancy shapes and hover results.
I’m planning to take the demo of increasing picture panels we made collectively in this different article:
…and rework it right into a zig-zag picture panels! And this is just one instance among the many many we’ll uncover within the subsequent article.
