Grid with different size squares next to, and on top of each other

Question

I am trying to create something like so:

I am sure I am starting out wrong but I cannot see how else, plus I can't find anything online to help. My code so far is:

<div class="container">
    <div class="one">
        one
    </div>
    <div class="two">
        two
    </div>
    <div class="three">
        three
    </div>
    <div class="four">
        four
    </div>
    <div class="five">
        five
    </div>
    <div class="six">
        six
    </div>
</div>

And the css

.container {
  background-color: blue;
  display: flex;
}

.one {
  height: 400px;
  width: 30%;
  background-color: red;
}
.two {
  height: 250px;
  width: 35%;
  background-color: white;
}
.three {
  height: 400px;
  width: 35%;
  background-color: lightblue;
}

The problem is that I cannot get the next set of divs to line up under correctly. Jsfiddle

[Create a Masonry grid with flexbox (or other CSS)](https://stackoverflow.com/questions/43901955/create-a-masonry-grid-with-flexbox-or-other-css) — Michael Benjamin, Jun 05 '17 at 02:34
[Is it possible for flex items to align tightly to the items above them?](https://stackoverflow.com/q/34480760/3597276) — Michael Benjamin, Jun 05 '17 at 02:36
Possible duplicate of [Create a Masonry grid with flexbox (or other CSS)](https://stackoverflow.com/questions/43901955/create-a-masonry-grid-with-flexbox-or-other-css) — Rob, Jun 05 '17 at 02:42
This is exactly what I was looking for but I had no idea how to search for it., but thank you. — Jose Varela, Jun 05 '17 at 16:52

Utkarsh Dubey · Accepted Answer · 2017-06-05T04:53:07.737

Solution1: Why not you use Bootstrap, Thanks.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
        </div>
        <div class="col-md-5">
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
        </div>
        <div class="col-md-5">
        </div>
    </div>
    <div class="row">
        <div class="col-md-5">
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                </div>
                <div class="col-md-6">
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
        </div>
        <div class="col-md-2">
        </div>
    </div>
</div>

Solution2: Use Masonry Grid:

#container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
}
.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}

<div id="container" class="cols">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>

Grid with different size squares next to, and on top of each other

1 Answers1