当第二列不存在时如何使列跨度全宽？（CSS网格）

一尘不染

当第二列不存在时如何使列跨度全宽？（CSS网格）

css

我知道也有类似的问题，但这是专门问如何使用CSS Grid Layout做到这一点。

因此，我们有以下基本网格设置：

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                         |

阅读 229

2020-05-16

共1个答案

一尘不染

我想我现在已经知道了这个问题的明确答案。到目前为止，答案存在的问题是它们没有解释如何处理位于主要内容左侧的侧边栏（主要是因为我在原始问题中并未提出要求）。

<div class="grid">

  <nav>
    <p>navigation</p>
  </nav>

  <main>
    <p>content</p>
  </main>

  <aside>
    <p>sidebar</p>
  </aside>

</div>

您可以使用以下CSS：

.grid {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr fit-content(200px);
}

nav, aside {
  width: 100%;
}

/* ensures that the content will always be placed in the correct column */
nav { grid-column: 1; }
main { grid-column: 2; }
aside { grid-column: 3; }

这也是网格区域的好用例

.grid {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr fit-content(200px);
  grid-template-areas: "nav content sidebar";
}

nav, aside {
  width: 100%;
}

/* ensures that the content will always be placed in the correct column */
nav { grid-area: nav; }
main { grid-area: content; }
aside { grid-area: sidebar; }

IE兼容版本如下所示：

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
}

nav, aside {
  width: 100%; /* Ensures that if the content exists, it takes up max-width */
  max-width: 200px; /* Prevents the content exceeding 200px in width */
}

/* ensures that the content will always be placed in the correct column */
nav {
  -ms-grid-column: 1;
  grid-column: 1;
}

main {
  -ms-grid-column: 2;
  grid-column: 2;
}

aside {
  -ms-grid-column: 3;
  grid-column: 3;
}

2020-05-16