之间有空格的盒子（不同的宽度/高度）答案

【问题标题】：Boxes with space between (different width/height)之间有空格的盒子（不同的宽度/高度）
【发布时间】：2019-01-15 11:58:49
【问题描述】：

我正在尝试为杂志网站构建一个元素，其中第一个元素由具有不同宽度和高度的帖子促销框组成，如下图所示：

我正在使用 ZURB 基金会
我需要在图片上的盒子之间留一个排水沟
使用折叠和适当的图像大小，我可以获得所需的结果，但图片之间没有排水沟。
当我手动定义自定义基础装订线时，左侧图片的高度会发生一些像素的变化

这是我的方法：

<div class="row collapse">

  <div class="column medium-6"><!-- Left Pic 50% width --></div>

  <div class="column medium-6">
  
    <div class="row collapse">

      <div class="column medium-12"><!-- Right Top Pic 50% width, 50% height --></div>

      <div class="column medium-6"><!-- Right Bottom Left Pic 25% width, 50% height --></div>
      
      <div class="column medium-6"><!-- Right Bottom Right Pic 25% width, 50% height --></div>
    
    </div>

  </div>

</div>

【问题讨论】：

标签： html css wordpress zurb-foundation gutter

【解决方案1】：

这对Grid layout来说似乎是一个不错的场景

基本思想是使用父容器上的grid-template 属性创建所需网格的模板，然后将每个区域分配给具有grid-area 属性的子元素。

Codepen demo

标记

<section class="grid">
  <div class="item first">
    <img src="https://placekitten.com/g/600/500" />
  </div>
  <div class="item second">
        <img src="https://placekitten.com/g/300/150" />
  </div>
  <div class="item third">
        <img src="https://placekitten.com/g/149/100" />
  </div>
  <div class="item fourth">
        <img src="https://placekitten.com/g/149/100" />
  </div>
</section>

CSS

.grid {
   width: 600px;
   height: 250px;
   display: grid;
   grid-column-gap: 3px;
   grid-row-gap: 3px;
   grid-template:
     "first first second second" 1fr  
     "first first second second" 1fr
     "first first second second" 1fr
     "first first third fourth" 1fr
     "first first third fourth" 1fr / 1fr 1fr 1fr 1fr;
}

.grid .first  { grid-area: first;  }
.grid .second { grid-area: second; }
.grid .third  { grid-area: third;  }
.grid .fourth { grid-area: fourth; }

图像可以添加为常规的img 元素，也可以添加为您喜欢的背景。

结果

【讨论】：