当第二列不存在时，如何使列跨度全宽？
当第二列不存在时，如何使列跨度全宽？
提问于 2019-07-22 07:05:50
我知道有类似的问题，但这是特别询问如何使用CSS网格布局。
所以我们有这个基本的网格设置：
HTML（带侧边栏）：
<div class="grid">
<div class="content">
<p>content</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
</div>
CSS：
.grid {
display: grid;
grid-template-columns: 1fr 200px;
}
要创建看起来像这样的布局：
| content | sidebar |
如果页面没有侧边栏，即。html看起来像这样，但使用相同的CSS：
HTML（没有侧边栏）：
<div class="grid">
<div class="content">
<p>content</p>
</div>
</div>
页面布局如下所示（破折号表示空白区域）
| content | ------- |
我知道为什么会这样做，网格列仍然在grid-template-columns规则中定义。
我只是想知道如何告诉网格如果没有内容，那么填写剩余空间类似于flex-grow工作方式flexbox。
如果没有侧边栏，则期望的结果将如此。
| content |
回答 2
Stack Overflow用户
发布于 2019-07-22 15:33:44
不要定义列明确用grid-template-columns。
改为隐式列，然后使用grid-auto-columns它们来定义它们的宽度。
这将允许第一列（.content）在第二列（.sidebar）不存在时占用行中的所有空间。
.grid {
display: grid;
grid-auto-columns: 1fr 200px;
}
.content {
grid-column: 1;
}
.sidebar {
grid-column: 2;
}
.grid > * {
border: 1px dashed red; /* demo only */
}
<p>With side bar:</p>
<div class="grid">
<div class="content">
<p>content</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
</div>
<p>No side bar:</p>
<div class="grid">
<div class="content">
<p>content</p>
</div>
</div>Stack Overflow用户
发布于 2019-07-22 16:47:59
您可以通过使用内容大小调整关键字来进一步了解，例如：
.grid {
display: grid;
grid-template-columns: 1fr fit-content(200px);
}
.sidebar {
width: 100%;
}
该fit-content关键字将着眼于内容的大小和行为像max-content，直到它到达你传递值。
实际上，您可能不需要在侧边栏上粘贴大小，因为内容可能会指定至少200像素的大小（例如），但您可以玩这个。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100007081
复制相关文章
相似问题