我正在构建一个CSS网格布局,但是无论如何都无法使“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>
我想要的结果:
我希望#bottom项目尽可能地靠近#top项目。 我希望它们缩小到其内容大小。
实际结果:
CSS Grid不允许项目的高度小于1fr单位(总高度的50%),这取决于具有大量文本的#one项目。
可视化说明:与左侧的结果不同,我想要右侧的结果:
grid-template-rows: auto auto 1fr;
- 如果没有这个auto
和1fr
的精确组合,就无法得到我想要的结果。 - Manu