高度和宽度不相等的CSS网格 [英] CSS grid with columns of unequal height and width

问题描述

我有5个盒子：第一行三个，第二行第二个：

I have 5 boxes: three on the first row, the next two on the second row:

我要所有盒子但是第二个具有相同的高度 ，并且第5个 ^th 框位于第3个 ^th 下方。

I want all the boxes but the second to be of equal height and the 5^th box to go right under the 3^th.

我在flexbox上尝试过，现在在 display：grid 上尝试过。如果可能的话，我正在寻找一种CSS only 解决方案。

I tried this with flexbox and I am now trying it with display: grid. I am looking for a CSS only solution, if possible.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-rows: min-content;
  grid-gap: 0;
  background-color: #2196F3;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: 1px solid #ccc;
  font-size: 30px;
}
.item4 {
  grid-column-start: 1;
  grid-column-end: 3;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-container">
  <div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
  <div class="item3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>  
  <div class="item4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>

我正在寻找的东西在下面的图片中得到了很好的说明：

我应该怎么做才能达到预期的效果？

What I am looking for is well illustrated in the picture bellow:

推荐答案

对父容器使用grid-template-areas，对子项指定grid-area。

解决方案

这篇关于高度和宽度不相等的CSS网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！