css - CSS grid formation of different height blocks

Question

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.

Answer 1

您可以只float留下大网格元素并制作所有其他的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;
}

Answer 2

嘿使用媒体查询开始

Cehck 以下链接

http://mediaqueri.es/

http://introducingthenovel.com/

http://mediaqueri.es/tuj/

Answer 3

帕西：嘿，这真是你的堆栈溢出。:D 无论如何，这就是我现在所拥有的：

<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>

正如您所看到的，我当前的解决方案要求我使用容器并且还以非线性模式对我的内容进行排序，因此它远非最佳。