CSSグリッドレイアウト - 必要な数の列にまたがる項目を作成します。

Question

CSSグリッドレイアウト（理想的には明示的な列グリッド）を使用します。 そして、x軸に沿って余分なスペースを吸収したり、他のアイテムで使用されていない数の列にまたがる柔軟なアイテムを用意したいと思います。

完全な解決策は、非占有の列（flexプロパティに似ています）全体にアイテムを張るプロパティですが、CSSグリッドでは不可能です。

私は例を作ってみるよ：

次のレイアウトは、グリッド上に配置されているいくつかの要素を使用しています。 "aside1"領域のアイテムがカットされている場合は、右側の余分なスペースを吸収する柔軟なヘッダーが必要です。

.grid{ 
    display: grid; 
    grid-template-columns: none 1fr 1fr none; 
    grid-template-areas: "header header header aside1" 
         "nav main main aside2" 
         "nav main main aside3" 
         ; 
} 

header { 
grid-area: header; 
} 

main { 
grid-area: main; 
} 

nav { 
grid-area: nav; 
} 

.aside1 { 
grid-area: aside1; 
} 

.aside2 { 
grid-area: aside2; 
} 

.aside3 { 
grid-area: aside3; 
} 

しかし、当然のことながら、限り右側に任意の項目があるとして、ヘッダーはレイアウトは次のようになります。それの列に滞在します：

Flexbox-Layoutでは、これを実現するためにflex：1プロパティを使用できます。

グリッドで...私は、未使用の列をすべて吸収するためのボックス項目を持つ方法が必要だと思います。たぶんそれはできません。

私は土台に似た柔軟なXYグリッド、小さな「framwork」を構築することイストやろうとしています何

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

header { 
    grid-column: 1/????; 
    grid-row: 1/2; 
} 

main { 
    grid-column: 2/3; 
    grid-row: 1/2; 
} 

nav { 
    grid-column: 2/3; 
    grid-row: 1/2; 
} 

.aside1 { 
    grid-column: 2/3; 
    grid-row: 1/2; 
} 

.aside2 { 
    grid-column: 2/3; 
    grid-row: 2/3; 
} 

.aside3 { 
    grid-column: 2/3; 
    grid-row: 3/4; 
} 

が、ええと...ないというクール（それは学校のプロジェクトです）。

そしてそれは両方でグリッドシステムを構築することは可能ですかと思いまして：x軸に沿った任意の空きスペース/列吸収

1. グリッドアイテム、 - フレックスグリッドとし、基盤で可能に。複数の行にまたがる

2. グリッド項目、 - フレックスグリッドでは不可能では、以下を参照してください。Is it possible for flex items to align tightly to the items above them?（最初の答えはかなりよく、それを説明する）

私は、私は自分自身をもう少し明確にしたいと考えています。

Answer 1

可能な解決策の1つは、明示的なサイズの列にはgrid-template-columns、追加のフレキシブル列にはgrid-auto-columnsを使用することです。

grid-template-columnsが明示グリッド内の列のサイズが、grid-auto-columnsは暗黙のグリッド内の列のサイズ。

したがって、このようなあなたの列のサイズを設定してみてください。

grid-template-columns: 100px 100px /* sizes the first two columns */ 
grid-auto-columns: 1fr    /* distributes free space among additional columns; if 
             there is only one column, it consumes all space; */ 

この投稿は、また、有用である可能性がある：

• CSS Grid: How to make a column span full width when a second column is not there?