フレックスボックス
動的な石積みのレイアウトは、少なくともクリーンで効率的な方法では、フレックスボックスでは不可能です。
Flexboxは1次元のレイアウトシステムです。これは、水平または垂直の線に沿って項目を整列できることを意味します。フレックスアイテムは、その行または列に限定されます。
真のグリッドシステムは2次元です。つまり、アイテムを水平線と垂直線に沿って配置できます。コンテンツアイテムは行と列に同時にまたがることができますが、フレックスアイテムではできません。
これが、フレックスボックスがグリッドを構築するための容量に制限がある理由です。また、W3Cが別のCSS3テクノロジーであるグリッドレイアウトを開発した理由でもあります。
row wrap
のフレックスコンテナではflex-flow: row wrap、フレックスアイテムは新しい行にラップする必要があります。
つまり、フレックスアイテムは同じ行の別のアイテムの下にラップできません。
上記のdiv＃3がdiv＃1の下で折り返され、新しい行が作成されていることに注意してください。div＃2の下ではラップできません。
その結果、アイテムが行の中で最も高くない場合、空白が残り、見苦しいギャップが生じます。
column wrap
に切り替えるとflex-flow: column wrap、グリッドのようなレイアウトが実現します。ただし、列方向のコンテナーには、すぐに4つの潜在的な問題があります。
- Flexアイテムは、水平ではなく垂直に流れます（この場合は必要です）。
- コンテナは（Pinterestレイアウトのように）垂直方向ではなく水平方向に拡張します。
- コンテナの高さが固定されている必要があるため、アイテムは折り返す場所を認識します。
- この記事の執筆時点では、追加の列に対応するためにコンテナが拡張されていないすべての主要なブラウザに欠陥があります。
その結果、この場合、および他の多くの場合、列方向コンテナーはオプションではありません。
アイテムの寸法が未定義の CSSグリッド
コンテンツアイテムのさまざまな高さを事前に決定できる場合、グリッドレイアウトは問題の完璧な解決策になります。他のすべての要件は、グリッドの能力の範囲内です。
グリッドアイテムの幅と高さは、周囲のアイテムとのギャップを埋めるためにわかっている必要があります。
したがって、この場合、CSSが水平方向に流れる組積造レイアウトを構築するために提供する必要があるグリッドは最適ではありません。
実際、CSSテクノロジーが自動的にギャップを埋める機能を実現するまで、CSSには一般に解決策がありません。このようなものはおそらくドキュメントをリフローする必要があるので、それがどれほど役立つか効率的かはわかりません。
スクリプトが必要です。
JavaScriptソリューションは、絶対配置を使用する傾向があり、コンテンツアイテムをギャップなしで再配置するために、ドキュメントフローからコンテンツアイテムを削除します。次に2つの例を示します。
アイテムのディメンションが定義された CSSグリッド
コンテンツアイテムの幅と高さがわかっているレイアウトの場合、純粋なCSSで水平方向に流れる石積みのレイアウトを次に示します。
grid-container {
display: grid; /* 1 */
grid-auto-rows: 50px; /* 2 */
grid-gap: 10px; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */
}
[short] {
grid-row: span 1; /* 5 */
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
grid-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
font-weight: bold;
color: white;
}
<grid-container>
<grid-item short>01</grid-item>
<grid-item short>02</grid-item>
<grid-item tall>03</grid-item>
<grid-item tall>04</grid-item>
<grid-item short>05</grid-item>
<grid-item taller>06</grid-item>
<grid-item short>07</grid-item>
<grid-item tallest>08</grid-item>
<grid-item tall>09</grid-item>
<grid-item short>10</grid-item>
<grid-item tallest>etc.</grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
使い方
- ブロックレベルのグリッドコンテナーを確立します。（
inline-grid他のオプションになります）
- この
grid-auto-rowsプロパティは、自動的に生成される行の高さを設定します。このグリッドでは、各行の高さが50pxです。
grid-gapプロパティは、の省略形ですgrid-column-gapとgrid-row-gap。このルールは、グリッドアイテム間に 10pxのギャップを設定します。（アイテムとコンテナーの間の領域には適用されません。）grid-template-columnsプロパティが明示的に定義された列の幅を設定します。
repeat表記は、繰り返し列（または行）のパターンを定義します。
このauto-fill関数は、コンテナーをオーバーフローさせずにできるだけ多くの列（または行）を整列するようグリッドに指示します。（これにより、フレックスレイアウトのと同様の動作が作成されますflex-wrap: wrap。）
このminmax()関数は、各列（または行）の最小サイズと最大サイズの範囲を設定します。上記のコードでは、各列の幅はコンテナの最小30％であり、利用可能な空き領域の最大です。
frユニットは、 Gridコンテナ内の空き領域の割合を表します。フレックスボックスのflex-growプロパティに匹敵します。
でgrid-row、spanグリッドアイテムにまたがる行数を伝えます。
CSSグリッドのブラウザーサポート
- Chrome-2017年3月8日現在、完全サポート（バージョン57）
- Firefox-2017年3月6日時点で完全サポート（バージョン52）
- Safari-2017年3月26日時点で完全にサポート（バージョン10.1）
- Edge-2017年10月16日時点で完全サポート（バージョン16）
- IE11-現在の仕様はサポートされていません。廃止されたバージョンをサポート
全体像は次のとおりです。http：//caniuse.com/#search=grid
Firefoxのクールなグリッドオーバーレイ機能
Firefox開発ツールでは、グリッドコンテナーを検査すると、CSS宣言に小さなグリッドアイコンがあります。クリックすると、ページにグリッドのアウトラインが表示されます。
詳細はこちら：https : //developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
