首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >当第二列不存在时,如何使列跨度全宽?

当第二列不存在时,如何使列跨度全宽?
EN

Stack Overflow用户
提问于 2019-07-22 07:05:50
回答 2查看 0关注 0票数 0

我知道有类似的问题,但这是特别询问如何使用CSS网格布局。

所以我们有这个基本的网格设置:

HTML(带侧边栏):

代码语言:javascript
复制
<div class="grid">

  <div class="content">
    <p>content</p>
  </div>

  <div class="sidebar">
    <p>sidebar</p>
  </div>

</div>

CSS:

代码语言:javascript
复制
.grid {
  display: grid;
  grid-template-columns: 1fr 200px;
}

要创建看起来像这样的布局:

代码语言:javascript
复制
| content               | sidebar |

如果页面没有侧边栏,即。html看起来像这样,但使用相同的CSS:

HTML(没有侧边栏):

代码语言:javascript
复制
<div class="grid">

  <div class="content">
    <p>content</p>
  </div>

</div>

页面布局如下所示(破折号表示空白区域)

代码语言:javascript
复制
| content               | ------- |

我知道为什么会这样做,网格列仍然在grid-template-columns规则中定义。

我只是想知道如何告诉网格如果没有内容,那么填写剩余空间类似于flex-grow工作方式flexbox

如果没有侧边栏,则期望的结果将如此。

代码语言:javascript
复制
| content                         |
EN

Stack Overflow用户

发布于 2019-07-22 16:47:59

您可以通过使用内容大小调整关键字来进一步了解,例如:

代码语言:javascript
复制
.grid {
  display: grid;
  grid-template-columns: 1fr fit-content(200px);
}

.sidebar {
  width: 100%;
}

fit-content关键字将着眼于内容的大小和行为像max-content,直到它到达你传递值。

实际上,您可能不需要在侧边栏上粘贴大小,因为内容可能会指定至少200像素的大小(例如),但您可以玩这个。

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100007081

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档