具有固定行数和行数的网格，溢出

问题描述 投票：0回答：1

我有一个 3 列 6 行的网格。在这个网格里面有动态元素，它们可以有不同的大小。但是当元素在 3 列和 6 行内时，我希望我的网格占据屏幕的高度。如果一个元素没有进入网格，我希望它位于其他元素的下方，而其他元素不会移动。是否可以使用 CSS 网格？

在这个例子中，item4 和 item5 应该在 item2 下

.container {
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.container > div {
  border: 1px solid black;
}

.item1, .item2 {
  grid-row: span 3 / span 3;
  grid-column: span 2 / span 2;
}

.item3, .item4, .item5 {
  grid-row: span 2 / span 2;
}
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

html css css-grid
1个回答
1
投票

我不确定你想要完成什么，因为根据你当前的 CSS，你的网格不会填满网页。所以这只是你可以尝试的东西。

解决方案

  1. 始终使用 CSS 设置您的 
    <html>
    和 
    <body>
    标签以使用 viewport 的全高，否则您的网格将不会填满页面。 （见下面的 HTML）
  2. 始终确保您的网格
    <div>
    或正文中的其他HTML也使用CSS使用全高，否则您的网格现在将填满页面。顺便说一句...我建议您将
    <body>
    标签设置为网格父级，因为它将更好地保证整个页面的宽度和高度:)
  3. 在网格中，您必须在逻辑中的行与列之间做出选择，以了解如何填充页面。如果不这样做，当没有足够的单元格来填充空间时，浏览器不知道哪个优先，并且会根据您的父网格逻辑进行猜测。在下面的示例中，我使用 
    auto-fit
    将行设置为填充窗口的空间。它说要按行垂直放置网格中的所有内容，但删除拒绝填充该垂直空间的任何额外空间。这为您的网格提供了完整的窗口高度和宽度。
  4. 您表示使用了 6 行，但根据您的逻辑并没有使用它们。所以没有必要这样做，因为下面的设计将允许您添加或删除任意数量的子单元格并根据需要创建新行。它们都将共享垂直空间作为行，这就是现在伸展以填充浏览器窗口的空间。
  5. 在下面的设计中，您可以添加或删除无限数量的新单元格，它们始终包含在完整的浏览器viewport空间中。

此设计将始终增长或收缩以填充浏览器viewport。 在第一个示例中，它按行垂直堆叠，在添加单元格时创建新行。在最后一个代码示例中，它将按列堆叠，水平添加单元格直到填满 3 列，然后开始新的一行。

所有示例都按宽度和高度 100% 填充浏览器窗口的viewport。

<!doctype html>
<html style="width:100%;height:100%;">
<head>
</head>
<body style="margin:0;padding:0;height:100%;">

<style type="text/css">

.container {
    min-width:100%;
    min-height:100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-rows: auto-fit;
    grid-template-columns: repeat(3,1fr);
}

.container div[class^=item] {
    grid-column: 1 / 4;
    border: 1px solid black;
    background:green;
}

</style>
 
 <div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>
<!-- I added this cell to show how items not part of the grid CSS stack under the full viewport grid. -->
<div>6</div>

如果您希望单元格一次一个地水平堆叠到可用列中而不是行中，但仍然允许行随着新单元格添加到浏览器viewport空间中而增长，请删除“网格列”逻辑，如下。这些块现在将水平堆叠到可用空间中。 这可能展示了您正在努力实现的最佳目标，因为它会向下填充浏览器空间，允许新单元格一次一个地水平堆叠到网格上，而其他单元格不会改变。其他单元格不会移动，只会随着创建新行以容纳更多单元格而垂直变薄。同样，无论使用多少个单元格，都会使用浏览器窗口的完整viewport。但是，由于您使用的是 3 列设计，因此在 3 列填满最后一行之前，会出现空格，因为您使用的是 3 列布局。

.container div[class^=item] {
    border: 1px solid black;
    background:green;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.