In this tutorial, I am going to share your hexagonal CSS grid layout. The grids are fully responsive and work well on all type of media devices.
It’s easy to design a hexagon grid by using a few advanced CSS3 properties. These grids also have hover effect and when user mouse over the will able to see the text.
In your web design careers you sure try out responsive CSS image grids with caption which show an image along with title and description below it.
But how about making them hexagonal and diamond looking grids? Yep that’s look more nice and attract users.
The CSS grids allow arranging the content in good looking way. You can show the important information to your site users quickly.
The hexagon grid has six sides instead of four and looks more awesome in design. These are similar to diamond grids.
There is another way to create grids is a CSS Masonry Grid Layout which show the content & Images blocks in different sizes but auto adjustable.
Anyway Let’s start building hexagonal grids blocks.
Basic Layout Idea
Let’s start with basic HTML markup and add link to a stylesheet hexagonal.css to contain the CSS styles that will be applied throughout the article:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Auto Hexagonal CSS Grid Layout</title>
<meta name="description" content="Hexagonal Grid by Codin @ Codesmite.com">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="hexagonal.css">
</head>
<body>
</body>
</html>
Next we will define a main wrapper div with class name grids. In this div, We will place the hexagonal grid HTML and it will be define as article HTML5 element.
To keep the markup simple and easy to understand. We have add addional element figure to place some content and place an image below the figure element.
<div class="grids">
<article>
<figure>
<h2>@Xavisu</h2>
<p>Hola, vengo a flotar. Front~end</p>
</figure>
<img alt src='https://pbs.twimg.com/profile_images/791963745178181632/rtQQ36JW.jpg' />
</article>
</div>
Create Hexagonal Shape with CSS
I have used the CSS calc property to manage the margin and width. The calc element allows us to position the grid in the center of the page by automatic left and right margin.
You can adjust the value to any size as you wish as the hexagonal grid will stay full responsive.
.grids {
margin: calc(var(--size) * .5) auto 0;
width: calc(var(--size) * calc(var(--Nhexa) - 1));
display: grid;
grid-template-columns: repeat(var(--Nhexa), 1fr);
grid-gap: var(--gap);
display:inline-grid;
}
Similar here CSS for HTML5 element article which also uses the similar technique as a section.
Its time to play with inner (child) element article. We will set background and apply the width and height. Again here the height will be manage though calc property.
There is another important thing to notice, i.e., is uses of clip-path which allow creating the shapes.
article {
background: cadetblue;
width: var(--size);
height: calc(var(--size) / 1.1111111);
clip-path: url(#hexagono);
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
margin-right: calc(var(--size) / 2);
color: #fff;
overflow: hidden;
}
article:nth-child(2n) {margin: calc(var(--size) * -.5) calc(var(--size) * -.25) 0 calc(var(--size) * -.75);}
article::before {
content: '';
float: left;
width: 25%;
height: 100%;
clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
shape-outside: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
}
The images inside the grids should be responsive and for this, we will apply position element with its absolute settings.
img {
width: var(--size);
height: var(--size);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: 0% 50%;
transition: .75s;
clip-path: url(#hexagono);
clip-path: inherit;
z-index: 10;
}
article:hover img {
transform: translate(-50%, -50%) rotate(-110deg);
}
You know we have text to show on hover the Hexagonal grid and we implemented it using figure element. Here we will apply the style to make it work.
We are going to use the flex element from display property along with flex-direction and flex-wrap. Furthermore, We will apply some basic styles like font-size and line-height, etc.
figure {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
max-width: 50%;
height: 100%;
font-size: calc(9 / var(--Nhexa) * 1vw);
line-height: 1;
color: #fff;
transition: .75s .05s;
text-align: center;
}
h2 {font-size: 100%;}
figure p {
font-size: 70%;
line-height: 1.2;
width: 100%;
}
body > p {
font-size: 1.5rem;
margin: 2rem 0 1rem calc(var(--size) * .5);
font-weight: 200;
}
Our Grids are almost ready but before implement on live site, you need to make sure to add the following CSS.
*, *:after, *:before {box-sizing: inherit;}
* {margin:0;padding:0;border: 0 none; position: relative;}
:root {
--sinSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--Nhexa: 4;
--gap: 2vw;
--size: calc(calc(100vw / var(--Nhexa)) - var(--gap));
}
@media only screen and (min-width: 1100px) {:root {--Nhexa: 6;}}
@media only screen and (max-width: 600px) {
:root {--Nhexa: 2;}
body {margin-right: calc(var(--size) * .3);}
}
html {
background: #e9e9e7;
box-sizing: border-box;
font-family: var(--sinSerif);
font-size: 1rem;
}
That’s it! I hope you’ll like this CSS based Hexagonal Grid layout. Enjoy the coding.