当第二列不存在时，如何使列跨度全宽? (CSS网格) [英] How to make a column span full width when a second column is not there? (CSS Grid)

问题描述

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

I know there are similar questions but this is specifically asking how to do this using CSS Grid Layout.

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

So we have this basic grid setup:

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

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

To create a layout that looks something like this:

| content               | sidebar |

如果页面没有侧边栏，即. html看起来像这样，但是具有相同的CSS:

If the page doesn't have a sidebar though, ie. the html looks like this but with the same CSS:

HTML(无侧边栏):

<div class="grid">

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

</div>

页面布局看起来像这样(破折号代表空白)

The page layout looks like this (dashes represent empty space)

| content               | ------- |

我知道为什么会这样做，grid-template-columns规则中仍定义了grid列.

I know why it does that, the grid column is still defined in the grid-template-columns rule.

我只是想知道如何告诉网格，如果没有内容，然后填充剩余空间，类似于flex-grow对flexbox的工作方式.

I'm just wondering how to tell the grid that if there is no content, then fill the remaining space similar to how flex-grow works for flexbox.

如果没有侧边栏，则期望的结果将如下所示.

The desired result would look like this if no sidebar is present.

| content                         |

推荐答案

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

I think I know the definitive answer to this question now. The problem with the answers so far is that they don't explain how to handle a sidebar that is on the left side of the main content (mainly because I didn't ask for it in the original question).

<div class="grid">

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

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

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

</div>

您可以使用以下CSS:

You can use this 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; }

这也是网格区域的好用例

This is also a good use case for grid-areas

.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兼容的版本如下所示:

An IE compatible version would look like this:

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

这篇关于当第二列不存在时，如何使列跨度全宽? (CSS网格)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！