How to create a Hex grid using CSS? Pretty simple, just follow the steps below.

You must have already seen different sort of grids in different webpages throughout your web browsing life. But I can bet that other than seeing general square styles, or masonry types you have not seen a hex type that regularly.

In this tutorial, I’m gonna teach you about Creating a Hex grid using CSS. This grid is auto adjustable, mobile-friendly, and totally responsive. You can easily use it anywhere.

Good usage of this grid can be used to show teams or projects. Check the preview out, if you like this, follow the steps and source code below.

Preview of Hex Grid using CSS

You might also like this.

How to create a Hex grid with CSS?

Hex Grid using CSS

In order to create it, we will first create 2 files, one for HTML and other for SCSS.

Inside the HTML file, I’ll create an unordered list <ul>. Inside this unordered list, I’ll create multiple list elements, in order to do it fast, I’ll just add one line of text. These <li> elements will have a class-name of list-item. Inside these <li> elements, there will be one div which is going to contain the text.

CSS Part

I’ll simply use the grid templates to give it a fixed size. This fixed size will decide the width of each element inside the main list, now for the list-item, I’ll use SCSS conditional elements to make it look like a grid, it’s simple math so IMO there is no need to explain something that simple.

And to make it look like HEX, I’ll change the borders of the inner element by using the polygon property of CSS. Remember to add padding.

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Source Code.

HTML

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<TITLE>Evil Web Dev | Hex grid using CSS</TITLE>
	<link rel="stylesheet" href="style.scss">
</head>

<body>
	<ul class="list">
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
		<li class="list-item">
			<div class="item-inside">List item</div>
		</li>
	</ul>
</body>

</html>

SCSS

// Change this!
$amount: 7;

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	display: flex;
	justify-content: center;
	background-image: linear-gradient( 135deg, royalblue 10%, skyblue 100%);
	background-attachment: fixed;
	padding: 2.5rem;
}

.list {
	padding: 2rem;
	margin: 0;
	width: 100%;
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(#{$amount}, 1fr 2fr) 1fr;
	grid-auto-rows: 1fr 1fr;
	grid-gap: 2.5rem 5rem;
	--counter: 1;
}



.list-item {
	position: relative;
	grid-column: 1 / span 3;
	grid-row: calc(var(--counter) + var(--counter)) / span 2;
	filter: drop-shadow(0 0 10px rgba(#444, .04));
	height: 0;
	padding-bottom: 90%;
&:hover {
		transform: scale(1.1);
	transition: all .5s;
	}
	@for $i from 1 through $amount {
		&:nth-of-type(#{$amount}n + #{$i}) {
			grid-column: #{$i + $i - 1} / span 3;
			@if $i % 2 == 0 {
				grid-row: calc(var(--counter) + var(--counter) - 1) / span 2;
			}
		}
	}

	@for $i from 1 through 20 {
		&:nth-of-type(n + #{$i * $amount + 1}) {
			--counter: #{$i + 1};
		}
	}
}

.item-inside {
	position: absolute;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: sans-serif;
	font-size: 1.25rem;
	color: #111111;
	background-color: #eee;
	clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
	padding: 2rem 25%;
}

So this is how we createit.

CodePen

See the Pen Hex (CSS) grid by Kamran Tahir (@EvilSpark) on CodePen.

unsplash-logoPranav Kumar Jain
0 CommentsClose Comments

Leave a comment