Сделайте CSS Grid высотой строки гибким

Question

Я строю макет CSS Grid, и я почему-то не могу заставить значение "auto" работать для определения размера строки.

Элементы сохраняют минимальную высоту 1fr, даже еслиих содержание достаточно мало, чтобы позволить им сжиматься.

Вот пример кода, который объясняет проблему - вы также можете проверить его на https://codepen.io/16kbit/pen/RJbMWM

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;
}

<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>

Результат, который я хочу:

Я хочу, чтобы нижний элемент перемещался как можно ближе к элементу #top.И я хочу, чтобы они сократились до размера их содержимого.

Фактический результат:

Сетка CSS не позволяет высоте элемента быть меньше 1 единицы (50% от общей высоты)- который меняется в зависимости от элемента #one, который имеет много текста.

Визуальное объяснение: вместо результата слева я хочу получить результат справа:

Answer 1

Судя по тому, что вы написали в своем вопросе и ответе, вы упускаете из виду важную концепцию компоновки сетки (и сеток в целом).

Строка проходит по всей сетке.,Он не ограничен одним столбцом.

Поэтому, когда вы пишете:

Если бы в нашем правом столбце было три строки ...

Естьнет такой вещи.Все строки существуют во всех столбцах (и наоборот).

Вот иллюстрация вашего макета из инструментов разработчика:

КакВы можете видеть, что все строки распространяются на все столбцы.

Высота третьей строки задается содержимым в #one, как вы и указали.

Третья строка в правом столбце должна быть такой же высоты, как и третья строка в левом столбце, поскольку строка может иметь только одну высоту.

Однако,Вы можете настроить размер и выравнивание областей сетки в строках и столбцах.

align-self: stretch (значение по умолчанию)

выровнять себя: конец

align-self: center

align-self: start (что вы можете искать)

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>

Answer 2

После еще нескольких проб и ошибок я нашел рабочее решение:

grid-template-rows: auto 1fr;

Когда последний элемент имеет значение 1fr, другой элемент может адаптироватьсяего размер равен auto.

Если бы в правом столбце было три строки, рабочий CSS выглядел бы так:

grid-template-rows: auto auto 1fr;

Результат этогобудет: два первых элемента (auto) адаптируются в соответствии с их содержанием, третий элемент (1fr) заполнит все оставшееся вертикальное пространство.

Другими словами: вам нужен один элемент дляимеют значение 1fr, чтобы другие элементы были полностью гибкими с auto.