使CSS网格行高度灵活

Question

我正在构建一个CSS Grid布局，不知怎的，我无法获得＆＃34; auto＆＃34;用于确定行高的大小的值。

物品的最小高度保持在1fr，即使它们的含量足够小，也可以缩小。

以下是解释问题的代码示例 - 您还可以在https://codepen.io/16kbit/pen/RJbMWM

上查看

＆＃13;

＆＃13;

section {
  display: grid;
  grid-template-areas: "one top" "one bottom";
  align-items: start;
  border: 1px solid hotpink;
}

article {
  border: 1px solid green;
}

#one {
  grid-area: one;
}

#top {
  grid-area: top;
}

#bottom {
  grid-area: bottom;
  background: yellow;
}

＆＃13;

<section>
  <article id=one>
    <h1>One</h1>
    <p>Lorem cool dolizzle sit amizzle, dope sizzle elizzle. Nullam shiznit velizzle, get down get down volutpizzle, suscipizzle quizzle, dizzle mammasay mammasa mamma oo sa, arcu. Pellentesque sheezy tortizzle. Sed erizzle. Fusce izzle dolor shiznit pimpin'
      tempizzle tempor. Maurizzle pellentesque nibh shizzlin dizzle turpizzle. Vestibulum in tortor. Pellentesque cool rhoncus black. In hac fo shizzle my nizzle check out this dictumst. Black uhuh ... yih!. Mammasay mammasa mamma oo sa tellizzle shiz,
      pretizzle shiznit, mattizzle fo, gangster vitae, nunc. Get down get down suscipizzle. Own yo' away izzle sed cool.Nullizzle fizzle shut the shizzle up yo mamma orci daahng dawg viverra. Phasellus nizzle shizzle my nizzle crocodizzle. Curabitizzle
      sure velit vizzle check out this dizzle doggy. Maecenas sapien nulla, iaculis shiz, molestie hizzle, egestas a, erizzle. Shit vitae turpis quizzle nibh bibendizzle boom shackalack. Nizzle pulvinar dope velizzle. Aliquizzle mammasay mammasa mamma
      oo sa volutpat. Nunc izzle its fo rizzle at lectus pretizzle faucibizzle. We gonna chung nec lacizzle own yo' fizzle pizzle ultricizzle. Ut nisl. Crunk et owned. Integer laoreet ipsum shizzlin dizzle mi. Donizzle at shiz.</p>
  </article>
  <article id=top>
    <h1>Top</h1>
    <p>Just Two Words</p>
  </article>
  <article id=bottom>
    <h1>Bottom</h1>
    <p>Help Me! How can I get closer to my Top neighbour?</p>
  </article>
</section>

＆＃13;

＆＃13;

＆＃13;

我想要的结果：

我希望#bottom项目尽可能靠近#top项目移动。我希望它们缩小到它们的内容大小。

实际结果：

CSS网格不允许项目的高度小于1fr单位（总高度的50％） - 这取决于具有大量文本的#one项目。

视觉解释：我想要右边的结果，而不是左边的结果：

Answer 1

经过一些试验和错误，我找到了一个有效的解决方案：

grid-template-rows: auto 1fr;

如果最后一项的值为1fr，则允许另一项使用auto调整其大小。

如果我们的右栏中有三行，那么工作的CSS将如下所示：

grid-template-rows: auto auto 1fr;

这样做的结果是：两个第一项（auto）根据其内容进行调整，第三项（1fr）将填充剩余的任何垂直空间。

换句话说：您需要一个项目的值为1fr，以便其他项目在auto内完全灵活。

Answer 2

It appears, based on what you've written in your question and answer, that you are overlooking an important concept of grid layout (and grids, in general).

A row extends across an entire grid. It's not confined to a single column.

So when you write:

If we had three rows in our right column...

There's no such thing. All rows exist in all columns (and vice versa).

Here's an illustration of your layout from dev tools:

As you can see, all rows extend across all columns.

The height of the third row is set by the content in #one, just as you specified.

The third row in the right column must be the same height as the third row in the left column, because a row can only have one height.

However, you can adjust the size and alignment of grid areas within rows and columns.

align-self: stretch (default value)

align-self: end

align-self: center

align-self: start (what you may be looking for)

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: 
            "one top"
            "one center"
            "one bottom";
  border: 1px solid hotpink;
}

article {
  border: 1px solid green;
}

#one    { grid-area: one;}
#top    { grid-area: top;}
#center { grid-area: center;}
#bottom { grid-area: bottom; align-self: start; background-color: aqua;}

<section>
  <article id=one><h1>One</h1><p>Lorem cool dolizzle sit amizzle, dope sizzle elizzle. Nullam shiznit velizzle, get down get down volutpizzle, suscipizzle quizzle, dizzle mammasay mammasa mamma oo sa, arcu. Pellentesque sheezy tortizzle. Sed erizzle. Fusce izzle dolor shiznit pimpin' tempizzle tempor. Maurizzle pellentesque nibh shizzlin dizzle turpizzle. Vestibulum in tortor. Pellentesque cool rhoncus black. In hac fo shizzle my nizzle check out this dictumst. Black uhuh ... yih!. Mammasay mammasa mamma oo sa tellizzle shiz, pretizzle shiznit, mattizzle fo, gangster vitae, nunc. Get down get down suscipizzle. Own yo' away izzle sed cool.Nullizzle fizzle shut the shizzle up yo mamma orci daahng dawg viverra. Phasellus nizzle shizzle my nizzle crocodizzle. Curabitizzle sure velit vizzle check out this dizzle doggy. Maecenas sapien nulla, iaculis shiz, molestie hizzle, egestas a, erizzle. Shit vitae turpis quizzle nibh bibendizzle boom shackalack. Nizzle pulvinar dope velizzle. Aliquizzle mammasay mammasa mamma oo sa volutpat. Nunc izzle its fo rizzle at lectus pretizzle faucibizzle. We gonna chung nec lacizzle own yo' fizzle pizzle ultricizzle. Ut nisl. Crunk et owned. Integer laoreet ipsum shizzlin dizzle mi. Donizzle at shiz.</p>
</article>
  
<article id=top><h1>Top</h1> <p>Just Two Words</p></article>
  
  <article id=center><h1>Center</h1></article>
  
<article id=bottom><h1>Bottom</h1><p>Help Me! How can I get closer to my Top neighbour?</p></article>
  
</section>