Auto Hexagonal CSS Grid Layout

Hexagonal CSS Grid Layout

In this tutorial, I am going to share you hexagonal CSS grid layout which works with CSS. The grids are fully responsive and work well on all type of media devices.

It’s easy to design hexagon grid by using few advanced CSS3 properties. These grids also have hover effect and when user mouse over, it will able to see the text.

The hexagon grid has six sides instead of four and looks more awesome in design. These are similar to diamond grids.

Let’s have a look the HTML.

<section>
    <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>
</section>

If we take a look CSS, we find that it uses the calc in most case. Like width, height and margin, etc. manage through using Calc CSS property.

Have a look the how the CSS look like for section.

section {
  margin: calc(var(--size) * .5)
					auto
					0;
  width: calc(var(--size) * calc(var(--Nhexa) - 1));
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (1fr)[var];
	    grid-template-columns: repeat(var(--Nhexa), 1fr);
	grid-gap: var(--gap);
}

Similar here CSS for HTML5 element article which also use the similar techquie as section.

article {
	background: cadetblue;
  width: var(--size); 
  height: calc(var(--size) / 1.1111111);
	-webkit-clip-path: url(#hexagono);
	        clip-path: url(#hexagono);
  -webkit-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%);
  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);
}

There is another important thing to notice, i.e., is uses of clip-path which allow creating the shapes.

article::before {
	content: '';
	float: left;
	width: 25%;
	height: 100%;
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
	        clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
	-webkit-shape-outside: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
	        shape-outside: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
}
/*
article::after {
	content: '';
	float: right;
	width: 25%;
	height: 100%;
	clip-path: polygon(75% 0%, 100% 0%, 100% 100%, 100% 0%);
	shape-outside: polygon(75% 0%, 100% 0%, 100% 100%, 100% 0%);
}
*/

I have just mentioned few lines of CSS, but you will find the complete CSS and HTML code in the below demo. So let’s have a look the demo below.

See the Pen Auto Hexagonal CSS Grid Layout by Kseso (@Kseso) on CodePen.

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *