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

时间:2017-04-09 00:57:11

标签: css css3 css-grid

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

3 个答案:

答案 0 :(得分:5)

请勿使用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>

答案 1 :(得分:4)

通过使用内容大小调整关键字,您可以更加接近:

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

.sidebar {
  width: 100%;
}

fit-content关键字会查看内容的大小,其行为与max-content类似,直到达到您传入的值为止。

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

答案 2 :(得分:0)

我想我现在知道这个问题的确切答案。到目前为止答案的问题在于,他们没有解释如何处理主要内容左侧的侧边栏(主要是因为我在原始问题中没有提出要求)。 / p>

<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;
}