5 Box CSS Grid Layout as a fluid design

Question

I try to create a simply CSS grid layout, maybe with bootstrap, with exactly 5 boxes in different sizes which should fill a container box fully. I searched through stackoverflow and several websites but found nothing really suitable.

Here is the problem code, go to http://galaxy.vandango.org/test/index1.htm to see the result:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

<style>

    .box {
        border: 1px solid #336c96;
        border-radius: 5px;
        margin: 5px;
        width: 300px;
    }

    .item1 {
        height: 500px;
    }

</style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-4 box item1">
            <h4>1</h4>
            <p>
                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet
                risus. Etiam porta sem malesuada magna mollis euismod.
                Donec sed odio dui.
                <br>
                7897897
                <br>
                7897897
                <br>
                7897897
                <br>
                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet
                risus. Etiam porta sem malesuada magna mollis euismod.
                Donec sed odio dui.
            </p>
        </div>

        <div class="col-md-4 box">
            <h4>2</h4>
            <p>
                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet
                risus. Etiam porta sem malesuada magna mollis euismod.
                Donec sed odio dui.
            </p>
        </div>

        <div class="col-md-4 box">
            <h4>3</h4>
            <p>
                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh.
            </p>
        </div>

        <div class="col-md-4 box">
            <h4>4</h4>
            <p>
                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet
                risus. Etiam porta sem malesuada magna mollis euismod.
                Donec sed odio dui.
            </p>
        </div>

        <div class="col-md-4 box">
            <h4>5</h4>
            <p>
                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet
                risus. Etiam porta sem malesuada magna mollis euismod.
                Donec sed odio dui.

                <br>
                123
                <br>

                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet
                risus. Etiam porta sem malesuada magna mollis euismod.
                Donec sed odio dui.
            </p>
        </div>
    </div>
</div>

<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body></html>

What i really need is the following: http://galaxy.vandango.org/test/index2.htm

But i can only get it done if i add the following css classes and add the classnames to the box 4 and 5.

.item4 {
    position: relative;
    top: 40px;
    right: 310px;
}

.item5 {
    position: relative;
    top: -185px;
    right: -310px;
}

Is there any good way to make this simplier and more flexible?

That's a masonry layout and you would need javascript for that. — Paulie_D, Jul 20 '16 at 11:40
Duplicate - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Jul 20 '16 at 11:41

Henrik Aronsson · Accepted Answer · 2016-07-20T12:14:18.770

Don't use Javascript (or even more, jQuery!), use flex-box.

I've found the resource at css-tricks very helpful.

The container is using display: flex to be able to use the justify-content: space-around that makes sure your columns are aligned inside the container.

Every column is then using display: inline-flex and flex-direction: column to accomplish what you're looking for.

The only drawback with this solution (in my head) is the fact that you need to generate your divs in wrong order, namely 1, 2, 4, 3, 5, but it's hard to judge if this will be a problem or not.

Also, in reply to "It's not compatible", it's pretty usable throughout the web.

I used javascript to populate the textboxes to make the HTML easier to inspect.

var texts = {
  1: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. <br> 7897897 <br>7897897 <br>7897897 <br>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.",
  2: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.",
  3: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.",
  4: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.",
  5: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 123 Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui."
}
for (x in texts) {
  document.getElementById(String(x)).innerHTML = '<h4>' + String(x) + '</h4>' + texts[x];
}

.container {
  display: flex;
  justify-content: space-around;
  width: 1000px;
  margin: 0 auto;
}
.col {
  display: inline-flex;
  flex-direction: column;
}
.box {
  width: 300px;
  border: 1px #336c96 solid;
  padding: 0 10px 10px 10px;
  border-radius: 5px;
  margin: 10px;
}

<div class="container">
  <div class="col">
    <div id="1" class="box">1</div>
  </div>
  <div class="col">
    <div id="2" class="box">2</div>
    <div id="4" class="box">4</div>
  </div>
  <div class="col">
    <div id="3" class="box">3</div>
    <div id="5" class="box">5</div>
  </div>
</div>

score 0 · Answer 2 · answered Jul 20 '16 at 11:51

0

See comment from paulie_D: Masonry layout from JQuery is the correct one!

answered Jul 20 '16 at 11:51

vandango

567
1
4
13

5 Box CSS Grid Layout as a fluid design

2 Answers2