Loading article…
Cascading Style Sheetsでは、CSS グリッドレイアウトまたはCSS グリッドを使用すると、複雑なレスポンシブ Web デザインのグリッドレイアウトを、ブラウザ間でより簡単かつ一貫して作成できます。[ 6 ]従来、Web ページのレイアウト方法を制御する方法としては、テーブル、フロート、そして最近ではCSS Flexible Box Layout (flexbox) などがありました。CSS グリッドは現在公式の標準ではありませんが ( W3C 勧告候補です)、最新の主要ブラウザの最新バージョンで採用されています。[ 7 ]
CSSグリッドは、 CSSフロートなどの従来の方法よりも堅牢で柔軟なレイアウトを作成できます。また、ブラウザ間で動作する標準化されたコードも可能になります。これは、特定のブラウザのハックや複雑な回避策に頼るのとは対照的です。[ 2 ]
CSS でフロートを利用する際の問題点の 1 つは、ページの一部にコンテンツが追加されると、ページの流れが乱れてレイアウトが崩れる可能性があることです。これは、レイアウト要素の高さが異なるためです。[ 2 ] flexbox は柔軟なレイアウトをサポートし、複雑なレイアウトを作成する柔軟性を提供しますが、2 次元空間でレスポンシブなレイアウトを作成する必要が生じると失敗します。
CSS のグリッドレイアウトの最初の包括的なドラフトは、2011 年にMicrosoftのPhil Cupp、Markus Mielke、Alex Mogilevskyによって作成され、ベンダープレフィックスの背後でInternet Explorer 10に実装されました。構文は、主にElika EtemadとTab Atkins Jrが主導するCSS ワーキンググループでの数回の反復を通じて再構築され、さらに洗練されました。この機能は、主にRachel AndrewとJen Simmonsが主導する普及活動の後、 Web 開発者に広く採用されました。[ 8 ]-ms-
2017 年 10 月現在、Chrome、Firefox、Safari、Edge はすべてベンダープレフィックスなしで CSS グリッドをサポートしています。[ 9 ] [ 10 ] [ 11 ] IE 10 と 11 は CSS グリッドをサポートしていますが、古い仕様です。モバイルでは、 Opera Miniを除くすべての最新のブラウザが CSS グリッドをサポートしています。[ 12 ]古いブラウザをターゲットとする Web 開発者は、 Modernizr 3.5.0 を使用して、必要に応じて Web ページを検出して適切に劣化させることができます。 [ 13 ]
Tailwind CSS は、要素のサイズや配置を制御するためのユーティリティに CSS グリッドを組み込んでいます。[ 14 ]しかし、 Bootstrap 4 やFoundation 6など、他の多くの現在の Web フレームワークは CSS グリッドを組み込んでいません。[ 15 ]
「fr」単位は、CSS グリッドレイアウトでよく使用されます。[ 16 ] [ 17 ] [ 18 ] CSS グリッドレイアウト仕様の一部である「fr」単位は、グリッドコンテナ内の残りのスペースの割合を表します。[ 2 ]
以下は「聖杯」レイアウトの一例です。
以下は値の表の例です。