web-dev-qa-db-ja.com

2番目の列がない場合に列を全幅にするにはどうすればよいですか？ （CSSグリッド）

同様の質問があることは承知していますが、これは具体的には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                         |
csscss-grid
9
Daniel Tonon

私は今、この質問に対する決定的な答えを知っていると思います。これまでの回答の問題は、メインコンテンツの左側にあるサイドバーの処理方法が説明されていないことです（主に元の質問でそれを要求しなかったためです）。

<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;
}
0
Daniel Tonon

列を定義しない（explicitly with grid-template-columns。

代わりに列を作成implicitしてから、grid-auto-columnsで幅を定義します。

これにより、最初の列（.content）2番目の列（.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>
5
Michael_B

次のようなコンテンツサイジングキーワードを使用すると、さらに近づくことができます。

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

.sidebar {
  width: 100%;
}

fit-contentキーワードは、コンテンツのサイズを調べ、渡した値に到達するまでmax-contentのように動作します。

実際には、コンテンツが少なくとも200ピクセルのサイズを指示する可能性があるため（たとえば）、サイドバーにサイズを固定する必要はないかもしれませんが、これで遊ぶことができます。

4
Rachel Andrew