如何制作那个网格？

Question

你知道如何制作这样的网格吗？

我尝试使用边距来创建白色空格。但是，它不适用于第一个foreach (var n in newItemValues) { Item item = oldItems.FirstOrDefault(x => x.Id == n.Id); if (item != null) { n.field1 = item.field1; n.field2 = item.field2; } } ，因为它有自己的高度和边距[％]。

<div>

.block {
  height: 270px;
  width: 47%;
  margin: 1.5%;
  display: block;
  float: left;
}

.blockbig {
  width: 97%;
  margin: 1.5%;
  height: 540px;
  display: block;
  float: left;
}

.blockw {
  width: 97%;
  margin: 1.5%;
  height: 270px;
  display: block;
  float: left;
}

.rectagle {
  height: 550px;
  width: 47%;
  margin: 1.5%;
  display: block;
  float: left;
}

.row1 {
  width: 50%;
  float: left;
}

@media (max-width: 1160px) {
  .container {
    width: 90%;
  }
}

@media (max-width: 900px) {
  #b4 {
    clear: both;
  }
  .block {
    width: 28.83%;
  }
}

View on JSFiddle

我的尝试看起来像这样：

如果它有回应，我会很高兴 这是template，我必须转换。

Answer 1

好的，我做到了。

＆＃13;

＆＃13;

* {
box-sizing: border-box;
}

#b1 {
display: block;
float: left;
width: 25%;
height: 540px;
}

#b2, #b3, #b4, #b6 {
display: block;
float: left;
width: 25%;
height: 270px;
}

#b5, #b7 {
display: block;
width: 50%;
height: 540px;
}

#b5 {
float: right;	
}

#b7 {
float: left;
}	

#b8 {
display: block;
float: left;
width: 50%;
height: 270px;
}	

.row1 {
width: 100%;
}

@media (max-width: 1160px) {

.container {
width: 90%;
}

.container1 {
width: 100%;
	
}

@media (max-width: 850px) {

#b1, #b7 {
height: 428px;	
}

#b2, #b3, #b4, #b6 {
height: 214px;
}	

#b1, #b2, #b3, #b4, #b6 {	
width: calc(100%/3);	
}

#b5, #b8 {
height: 214px;
}	

}

@media (max-width: 640px) {
	
#b1, #b2, #b3, #b4, #b6, #b7, #b5 {
width: 50%;
}	

#b7 {
height: 214px;		
}

#b8 {
width: 100%;
}	
	
}


@media (max-width: 480px) {
	
#b1, #b2, #b3, #b4, #b6, #b7, #b5, #b8 {
width: 100%;
height: 400px; 
}	
	
}	

＆＃13;

<div class="container1">

<div class="row1">

<div id="b1" class="inline-block" style="background-color: Beige;"><div class="block-content">1</div></div>
<div id="b2" class="inline-block" style="background-color: orange;"><div class="block-content">2</div></div>
<div id="b3" class="inline-block" style="background-color: black;"><div class="block-content">3</div></div>
<div id="b4" class="inline-block" style="background-color: orange;"><div class="block-content">4</div></div>

<div id="b6" class="inline-block" style="background-color: blue;"><div class="block-content">6</div></div>
<div id="b5" class="inline-block" style="background-color: Aquamarine"><div class="block-content">5</div></div>
<div id="b7" class="inline-block" style="background-color: black;"><div class="block-content">7</div></div>
<div id="b8" class="inline-block" style="background-color: Azure ;"><div class="block-content">8</div></div>

</div>
</div>

＆＃13;

＆＃13;

＆＃13;

但是，对于border-box，我不知道如何使用填充在所有块周围添加空格[10px]。