The non-transparent part (illustrated by the blue rectangle) will push the elements of the second line creating our beautiful responsive behavior. The shape-outside will create a repeating gradient having transparent within and non-transparent within. We need to repeat the logic for each 2 lines and the height of 2 lines is 2 height of hexagon + 4 margin + 2 negative margin-bottom = 2xS/cos(30deg) + 4xM - 2xSxtan(30deg)/2Īfter some simplification we get (3xS)/(2xcos(30deg)) + 4xM and this is our r variable. Each 'even' line of our grid need an indentation equal to half the width of an hexagon item plus a margin which will give us width:calc(var(-s)/2 + var(-m)). It's trivial that our float element need to fill all the container thus the use of height:100%. Let's move to the intresting part!Ī floated pseudo element where I will apply shape-outside to allow the hexagon items to wrap around a particular shape creating the perfect indentation between lines. Finally we apply a margin-bottom to create the overlap with the next line ( 0.2885 ~ tan(30deg)/2). We use clip-path to create the hexagon shape ref.

The width/height are defined with the variable s ( 1.15 ~ 1/cos(30deg)). No CSS here, this is our flex item that will allow us to use the height:100%. A basic div where I am defining some CSS variables and it need to be a flexbox container.

Enter fullscreen mode Exit fullscreen mode

Hexagon ri