有人能建议如何使css网格中的每个单元格在没有溢出的情况下占用整个空间(即视口)吗?
我在以下链接中创建了该应用程序的模拟:
或者换句话说,如何自动调整网格项(即占用剩余的空间,同时只将整个表伸展到可见的视图端口,而不出现溢出)。
预期的结果有点像这样:
// ignore the header part in the above image. concentrate only on the grid.
如你所见,这将是一个数字方格(如2x2= 4,或3x3= 9,或4x4= 16,或5x5 =25,等等)。
所以,
条件-1:网格中的每个单元应该占据整个空间。
条件-2:整个表应
最近,我使用创建了一个布局。虽然这很好,但我对它的工作方式感到困惑。具体来说,我对grid-template-rows: auto auto 1fr auto;行感到困惑。
这里最终发生的是页眉和页脚根据内容大小,这是有意义的,因为它们跨越页面的宽度。文章本身根据内容大小。但是,“标题”和“导航”是分开的,因此标题根据内容大小,导航器占据了其余的空间。
如果我使用grid-template-rows: auto auto auto auto;,标题和导航就会有相同的间距,这不是我想要的。
auto auto 1fr auto是如何解释的,所以它给了我大小,这样标题占用了最小的空间,而nav占用
我正在摆弄一个基于CSS网格的前端,并且在前端的不同部分需要一次又一次地执行以下行为:
具有可变行数的网格。
每一行都应该有一个可变大小(auto就行了)。
最后一行应该总是占用所有剩余的空间。
因此,在这种情况下,我恰好需要五行,这样做的关键是:
.myGridForFiveRows
{
display: grid;
grid-template-rows: auto auto auto auto 1fr;
}
但是,我非常希望样式表能够为任何给定的行数生成正确的行为。我想也许我可以用repeat()来做这个?
.myGrid
{
display: