CODEWITHSUNDEEP
css
quinnirill
quinnirill

Reputation: 834

CSS grid formation of different height blocks

I need to implement a grid formation as follows:

+-------------------+ +--------+ +--------+
|1                  | |2       | |4       |
|                   | |        | |        |
|                   | |        | |        |
|                   | |        | |        |
|                   | +--------+ +--------+
|                   |
|                   | +--------+ +--------+
|                   | |3       | |5       |
|                   | |        | |        |
|                   | |        | |        |
|                   | |        | |        |
+-------------------+ +--------+ +--------+

+--------+ +--------+ +--------+ +--------+
|6       | |7       | |8       | |9       |
|        | |        | |        | |        |
|        | |        | |        | |        |
|        | |        | |        | |        |
+--------+ +--------+ +--------+ +--------+

Where the size of 1 is 2x the size of the other items (images) + margin. Also if the viewport is big enough, 6 and 7 should fall back next to 4 and 5. Ideally there would be a clean solution that would not involve having to wrap the elements into containers and/or no JavaScript, but I'm interested in hearing all the possible solutions.

P.S. Flexbox is out of question for my use case because of browser support, but I'm still interested in hearing possible solutions made with it.

P.P.S. 3 and 4 can swap places, but ideally they'd be in that order.

Upvotes: 0

Views: 1013

Answers (3)

thgaskell
thgaskell

Reputation: 13226

You could just float the big grid element left and make all the other one's inline-block.

JSFiddle

HTML

<div class="big">1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>

CSS

div {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
    background-color: red;
}

.big {
    float: left;
    width: 210px;
    height: 210px;
}

Upvotes: 1

Arun Bertil
Arun Bertil

Reputation: 4638

Hey use media queries to get started

Cehck the following links

http://mediaqueri.es/

http://introducingthenovel.com/

http://mediaqueri.es/tuj/

Upvotes: 0

quinnirill
quinnirill

Reputation: 834

Patsy: Heh, that's very stackoverflow of you. :D Anyway, here's what I have now:

<style>
.grid1, .grid2, .grid2-container {
    display: block;
    float: left;
}

.grid1, .grid2 {
    margin: 10px;
    border: 1px solid black;
    background-color: #ccc;
}

.grid1 {
    width: 98px;
    height: 98px;
}

.grid2 {
    width: 218px;
    height: 218px;
}

.grid2-container {
    width: 250px;
    height: 230px;
}

.clear {
    clear: both;
}
</style>
<div class="grid2">1</div>
<div class="grid2-container">
    <div class="grid1">2</div>
    <div class="grid1">4</div>
    <div class="grid1">3</div>
    <div class="grid1">5</div>
</div>
<div class="clear">
    <div class="grid1">6</div>
    <div class="grid1">7</div>
    <div class="grid1">8</div>
    <div class="grid1">9</div>
</div>

As you can see, my current solution requires me to use containers and also to order my content in a non-linear pattern, so it's very far from optimal.

Upvotes: 0

Related Questions