CSS 网格元素未正确对齐

Question

这似乎是一项简单的任务，我从几个小时开始就努力完成。我无法正确垂直对齐我的网格元素。请看一下 fiddle 来了解一下。也许有人可以帮我解决这个问题。

HTML

 <section class="top">
   <div></div>
   <div></div>
 </section>

 <section class="bottom">
   <div></div>
   <div></div>
   <div></div>
 </section>

CSS

 section {
   display: grid; 
   grid-template-rows:auto; 
   margin: 40px 0 0 0
 }

 section.top {
   grid-template-columns:2fr 1fr;
   grid-column-gap: 50px;
 }

 section.bottom {
   grid-template-columns:1fr 1fr 1fr;
   grid-column-gap: 50px;
 }

 section div {
   background:lightblue;
   height:400px
 }

https://jsfiddle.net/ecj1wrae/

Answer 1

好吧，经过一些思考和计算，这里的这个就可以了

CSS

section.top {
  grid-template-columns:calc(66% + 2vw) 34%;
  grid-column-gap: 2vw;
}

section.bottom {
  grid-template-columns:33% 33% 34%;
  grid-column-gap: 2vw;
}

https://jsfiddle.net/ecj1wrae/3/

Answer 2

如果您想只使用 1 个父元素，这可能是一个解决方案：

.wrapper {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-row-gap: 50px;
  grid-column-gap: 10px;
  grid-template-areas: 
    'item1 item1 item1 item1 item2'
    'item3 item3 item4 item4 item5';
}
.wrapper > div {
  background: red;
  height: 400px;
}

.item1 {
  grid-area: item1;
}
.item2 {
  grid-area: item2;
}
.item3 {
  grid-area: item3;
}
.item4 {
  grid-area: item4;
}
.item5 {
  grid-area: item5;
}

<div class="wrapper">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="item4"></div>
  <div class="item5"></div>
</div>

Answer 3

我知道这是一个老问题...但我遇到了类似的问题，我想我会与其他需要帮助的人分享我的解决方案。

这条评论帮助我朝着正确的方向前进

But you're dividing space using fr units, which applies only free space in the container. And the bottom section has 50px less free space than the top. So they cannot be aligned in this manner

由于布局需要考虑列之间的间隙，我发现最好将问题框起来，因为它需要占用 3 列布局的 2 列，而不是认为它需要占用 3fr 布局的 2fr .

有用的网格允许我们指定一个元素可以跨越多少列grid-column: span 2;

使用问题中的 html 我们可以在顶部的第一个 div 上使用跨度：

section {
  display: grid; 
  margin: 40px 0 0 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column-gap: 50px;
}

section.top div:first-child {
   grid-column: span 2;
}

Answer 4

一个非常简单的解决方案是将 grid-column-gap 更改为 margin（如果两侧有 space 不是问题）：

HTML

<section class="top">
   <div></div>
   <div></div>
</section>

<section class="bottom">
   <div></div>
   <div></div>
   <div></div>
</section>

CSS

section {
   display: grid; 
   grid-template-rows:auto; 
   margin: 4px 0 0 0
 }

 section.top {
   grid-template-columns:2fr 1fr;
 }

 section.bottom {
   grid-template-columns:1fr 1fr 1fr;
 }

 section div { 
   background:lightblue;
   height:400px;
   margin: 5px;
 }

https://codepen.io/fillsanches/pen/oNEpKWN

CSS 网格元素未正确对齐

CSS grid elements not aligned properly

css

css-grid