设计一个布局，左边2列2行1个div，右边2列2行4个div，类似于BBC网站答案

【问题标题】：Design a layout with one div on 2 columns and 2 rows at the left, and 4 divs on 2 columns and 2 rows at the right, similar to BBC website设计一个布局，左边2列2行1个div，右边2列2行4个div，类似于BBC网站
【发布时间】：2022-08-08 13:52:15
【问题描述】：

我想设计一个类似于 BBC 网站的英雄栏目。我开始使用CSS Grid 来解决这个问题，我认为它可以用最少的代码获得相同的设计。

我已经设法进行了基本设计，但我希望 item1 占据容器宽度的 50%，而其余项目每个占据 25% 的空间，使其看起来像上图。我可以跨行，但我不确定如何正确跨列，我试过这个：

.item1 {
   grid-column-end: span 2;
}

但它打破了设计，同样的事情发生在：

.item1 {
   grid-column: auto / span 2;
}

我的代码：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 0px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 0px 0;
  font-size: 30px;
}

.item1 {
  grid-row-end: span 2;
}
.grid-container div img {width:100%; max-width:600px;}

<div class=\"grid-container\">
  <div class=\"item1\">
    <img src=\"https://dummyimage.com/600x400/f09c00/fafafa&text=1\"/>
  </div>
  <div class=\"item2\">
    <img src=\"https://dummyimage.com/600x400/0010f0/fafafa&text=2\"/>
  </div>
  <div class=\"item3\">
    <img src=\"https://dummyimage.com/600x400/5310f0/fafafa&text=3\"/>
  </div>  
  <div class=\"item4\">
    <img src=\"https://dummyimage.com/600x400/0010f0/fafafa&text=4\"/>
  </div>
  <div class=\"item5\">
    <img src=\"https://dummyimage.com/600x400/0010f0/fafafa&text=5\"/>
  </div>

</div>

标签： html css

【解决方案1】：

您可以按如下方式进行。我通过删除与所需布局无关的代码并添加了 cmets 来简化代码。

.grid-container {
  background-color: #2196f3;
  /* with these 3 lines below, I'm creating a grid of 4 columns and 2 rows*/
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  grid-gap: 10px;
}

.grid-container > div:nth-of-type(1){ /* I grab the first div */
  grid-column: 1 / 3; /* I tell him to take 2 columns, 1 -> 3 with 3 excluded */
  grid-row: 1 / 3;    /* I tell him to take 2 rows, 1 -> 3 with 3 excluded */
}

.grid-container div img {
  width: 100%;
  height:100%;
  object-fit:cover;

}

<div class="grid-container">
  <div class="item1">
    <img src="https://dummyimage.com/600x400/f09c00/fafafa&text=1" />
  </div>
  <div class="item2">
    <img src="https://dummyimage.com/600x400/0010f0/fafafa&text=2" />
  </div>
  <div class="item3">
    <img src="https://dummyimage.com/600x400/5310f0/fafafa&text=3" />
  </div>
  <div class="item4">
    <img src="https://dummyimage.com/600x400/0010f0/fafafa&text=4" />
  </div>
  <div class="item5">
    <img src="https://dummyimage.com/600x400/0010f0/fafafa&text=5" />
  </div>
</div>

【讨论】：

太好了，您能否分享有关更改的详细信息，因为它似乎可以按预期工作.. 即使图像大小与实际要求不同，我将从博客中提取数据，每个博客都有 2-3 个不同尺寸的图像，例如 600x400， 600x350等，它工作正常..我会做其他的改变，这样它也适用于移动版本
很高兴我能帮上忙。我在代码中添加了 cmets，请看一下。
感谢您推荐的解决方案，我很高兴它可以用最少的代码来实现，我使用 list li 和很多 css 做了同样的事情。而这只需不到 15 行代码。我会标记你的答案是正确的，因为我不确定我们是否可以进一步改进它..