相关疑难解决方法(0)

我知道有类似的问题,但这是特别询问如何使用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                         |

我想创建一个具有灵活列的网页布局,可以限制到某些最大宽度.例如,侧边栏菜单占用可用水平空间的30%,但不应超过200px.

使用CSS flexbox,我会选择这样的解决方案:

.flexbox-layout {
  display: flex;
}
.flexbox-sidebar {
  flex: 1 1 30%;
  max-width: 200px;
  background-color: lightblue;
}
.flexbox-content {
  flex: 1 1 70%;
  background-color: lightgreen;
}

<p>Layout based on CSS flexbox:</p>
<div class="flexbox-layout">
  <div class="flexbox-sidebar">
    <ol>
      <li>Menu item 1</li>
      <li>Menu item 2</li>
      <li>Menu item 3</li>
    </ol>
  </div>
  <div class="flexbox-content">
    <p>Content</p>
  </div>
</div>

这显然是一个最小的例子 - 真正的布局会复杂得多,我想利用CSS网格功能,如列/行跨越和自动列,以及媒体查询的响应性.到目前为止,我没有设法用CSS 网格实现上述flexbox示例的相同效果:

.grid-layout {
  display: grid;
  grid-template-columns: 30% 70%; /* Max. width for 1st column? */
  grid-template-rows: auto; …