CODEWITHSUNDEEP
htmlcss
Jordan
Jordan

Reputation: 9901

How can I create a sizable grid layout in HTML5

I want to create a 6 by x grid. The columns remain uniform and size with the width of the outer container (i.e. body itself). The height should be uniform within each row and change with of the content of the cell.

Here is what I have so far: 

body {
    text-align: center;
}

.item {
    padding: 20px;
    margin-bottom: 10px;
    text-align: left;
    display: block;
    font-size: 0.75em;
}

.row {
    margin: 10px;
    display: block;
    margin-bottom: 25px;
    box-sizing: border-box;
    border: solid blue 1px;
    height: 100px;
}

.row div {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    float: left;
    height: 100%;
    width: 16.667%
}

.row a {
    text-align: center;
    margin: 5px;
    padding: 20px;
}

.row a * {
    display: block;
}

.row img {
    width: 100%;
    display: inline-block;
}
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Right Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack</span>
        </a>
    </div>
</div>
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Right Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack</span>
        </a>
    </div>
</div>
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Right Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack</span>
        </a>
    </div>
</div>

http://jsfiddle.net/aj8py9gu/4/

These requirements stem from a similar interface that was created in WPF. I was able to do all of this with three lines of XAML. I am having a lot of trouble getting this to work with HTML5. The row div's (in blue) are set to an fixed height because otherwise they shrink to a height of zero and all of the cells float left off of each other. I do not want a fixed dimension here.

I know quite a lot of HTML/CSS/JavaScript but I really need some other eyes on this. What am I doing wrong. I can handle a size event in javascript, but I would prefer to use CSS if at all possible.

Upvotes: 2

Views: 102

Answers (2)

Marcelo
Marcelo

Reputation: 4425

This is caused by all the children of an element being floated. The simplest fix is to set overflow:hidden; on .row and get rid of the set height.

This is called "clearing floats". More approaches can be found here: What methods of ‘clearfix’ can I use?

body {
    text-align: center;
}

.item {
    padding: 20px;
    margin-bottom: 10px;
    text-align: left;
    display: block;
    font-size: 0.75em;
}

.row {
    margin: 10px;
    display: block;
    margin-bottom: 25px;
    border: solid blue 1px;
    overflow:hidden;
}

.row div {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    float: left;
    height: 100%;
    width: 16.667%
}

.row a {
    text-align: center;
    margin: 5px;
    padding: 20px;
}

.row a * {
    display: block;
}

.row img {
    width: 100%;
    display: inline-block;
}
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Right Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack</span>
        </a>
    </div>
</div>
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Right Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack</span>
        </a>
    </div>
</div>
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Right Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 3 Drawer Stack</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack w-Applied Door</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Base - 4 Drawer Stack</span>
        </a>
    </div>
</div>

Upvotes: 1

Roumelis George
Roumelis George

Reputation: 6746

You can use display:flex like this:

.row {
    margin: 10px;
    display: flex;
    margin-bottom: 25px;
    border: solid blue 1px;
    height: auto;
}

.row > div {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    flex: 0 0 16.667%;
    height: auto;
}

Check your updated fiddle: http://jsfiddle.net/29skzne6/1/

Upvotes: 0

Related Questions