Responsive grid (height issue)

Question

Trying to make a grid of responsive squares.

Fiddle

HTML

<div class="container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

CSS

.container {
    width: 300px;
}
ul {
    list-style: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 300px;
}
li {
    width: 33%;
    height: 33vw;
    float: left;
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
}

Width is easy to figure out, i could also use css tables, however im trying to make perfect squares that are responsive.... only other way i know how to do this is by using javascript to get the width and apply it to the height. Is there a pure CSS way of making the height of each LI match the width?

Answer 1

You can take advantage of a little trick with margins .

Wrap the content in 0-width and 0-height elements:

<li><span>1</span></li>

and then use the following style for them:

li > span {
    display: block;
    width: 0;
    height: 0;
    margin: 0 100% 100% 0;
}

The little known fact is that margins with percentage lengths always refer to the width of the container, even if you're setting a vertical margin.

Answer 2

You could apply the following styling attributes to maintain square containers. I would definitely recommend the use of jQuery though, it will be much more stable and far less 'hacky'.

HTML

<ul>
    <li><p>Content</p></li>
</ul>

CSS

ul {
    width:100%;
    list-style-type:none;
    margin:0;
    padding:0;
}
ul li {
    width:33%;
    padding-bottom:33%;
    position:relative;
}
ul li p {
    position:absolute;
    width:100%;
}