Indent even rows of hexagons in CSS

Question

I currently have a list of hexagons (images) that I have wrap to the next line when the browser width decreases. However, when this happens, they form even lines as seen in the first image, each starting at the same point on the x axis.

Current solution where each row starts at the same point on the x axis

Here is the JS Fiddle (albeit, the hexes don't flow right because they aren't images). The real code for this is:

<div class="container">
    <span>
        <img class="hex" src="img/hex.png">
    </span>
    ...
</div>

And the CSS is:

.container {
    padding-top: 80px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.container span {
    line-height: 129px;
    display: inline-block;
}

.container .hex {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

What I would like to do is alternate the rows such that every other row starts at an offset of the hexagon size as seen in figure two. It should also be noted that this example also has a negative y position relative to the respective position as determined from the first image. hexagon rows interlocking, with an offset for even rows

Is there a way to do this with just CSS? I'd like to avoid using a library if at all possible.

This is similar to the question asked here, but I need the entire structure to be able to have an undetermined number of rows, so the solution where I specify which items are in which rows isn't feasible for my application.

@web-tiki, this is different requirement. Not related to responsive gird of hexagons. — Shyam
– Shyam, Commented Jan 7, 2015 at 7:07
@ShyamBabuKushwaha even though the link I provided doesn't fully answer the question, it does provide a way to position even/odd rows of hexagons so it is related to the OP. — web-tiki
– web-tiki, Commented Jan 7, 2015 at 8:29
@JTate: you want this to be happen only on window re-size right? — Kavitha Velayutham
– Kavitha Velayutham, Commented Jan 7, 2015 at 9:00

JTate · Accepted Answer · 2015-01-12 21:59:26Z

Solution in JS Fiddle Demo :

Demo 1 :

http://jsfiddle.net/mkginfo/bhxohocv/

HTML Code :

<div class="container">
     <!-- odd line -->
    <span>
        <div class="hexagon"> </div>
    </span>
    <span>
        <div class="hexagon"> </div>
    </span>
    <span>
        <div class="hexagon"> </div>
    </span>
    <!-- even line -->
     <span class="odd">
        <div class="hexagon"> </div>
    </span>
     <span>
        <div class="hexagon"> </div>
    </span>
    <!-- odd line -->
    <span>
        <div class="hexagon"> </div>
    </span>
    <span>
        <div class="hexagon"> </div>
    </span>
    <span>
        <div class="hexagon"> </div>
    </span>
</div>

CSS Code :

.container {
    padding-top: 80px;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

.container span {
    line-height: 129px;
    display: inline-block;
    position: relative;
    margin-bottom: 25px;
}
.container span.odd {
    line-height: 129px;
    display: inline-block;
    position: relative;
    margin-bottom: 25px;
    margin-left: 52px;
    margin-top: -20px;
}

.container .hex {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.hexagon {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
}

.hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}

.hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}

Demo 2 :

http://jsfiddle.net/mkginfo/wnsjfwt0/

JTate · Accepted Answer · 2015-01-13 21:07:05Z

Here's a solution that uses javascript to add the necessary transformations to the elements.

CSS:

.container {
    padding-top: 80px;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

.floatBox {
    margin-left: 15px;
    margin-right: 15px;
}

.floatBox div {
    display: inline-block;

}
.floatBox div.odd {
    margin-left: 67px;
}

JS:

var floatBox = $(".floatBox");
var elements = floatBox.children();
var numElements = elements.length;

//reset all styles so they don't compound
elements.removeClass("odd");
elements.css("transform", "translateY(0)");
elements.css("-ms-transform", "translateY(0)");
elements.css("-webkit-transform", "translateY(0)");

var width = $(window).width() *.65;
var evenRowWidth = Math.floor(width / 135);
var oddRowWidth = Math.max(evenRowWidth - 1, 1);
var numberOfRows = 0;

var floatBoxWidth = evenRowWidth *138;
var delta = Math.floor((width-floatBoxWidth)/2);
floatBox.css("margin-left", delta);
floatBox.css("margin-right", delta);

var test = numElements;
var j = 2;
while (test > 0)
{
    if (j % 2 == 0)
    {
        test -= evenRowWidth;
    }
    else
    {
        test -= oddRowWidth;
    }
    numberOfRows++;
    j++;
}

j = 0;
var actionRow = 2;
var rowCount = 1;
var first = true;
for (var i = evenRowWidth; i < numElements; i++)
{
    var translationAmt = -37*(actionRow-1);
    if (actionRow % 2 == 0 && first)
    {
        first = true;
    }
    if (first)
    {
        $(elements.get(i)).addClass("odd");
        first = false;
    }
    $(elements.get(i)).css("transform", "translateY(" + translationAmt + "px)");
    $(elements.get(i)).css("-ms-transform", "translateY(" + translationAmt + "px)");
    $(elements.get(i)).css("-webkit-transform", "translateY(" + translationAmt + "px)");

    if (actionRow % 2 == 0)
    {
        if (rowCount == oddRowWidth)
        {
            actionRow++;
            rowCount = 0;
        }
    }
    else
    {
        if (rowCount == evenRowWidth)
        {
            actionRow++;
            rowCount = 0;
            first = true;
        }
    }
    rowCount++;
}

HTML:

<div class="container">
    <div class="floatBox">

        <div>
            <span>
                <img src="image.png">
            </span>
        </div>
        ...
    </div>
</div>

Collectives™ on Stack Overflow

Indent even rows of hexagons in CSS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related