3 月に Mozilla は Firefox 52 をリリースし、CSS Grid レイアウトのサポートが追加されました。 CSS Grid についてよくご存じない方のために説明すると、これは Web 用の 2 次元レイアウト システムであり、ブラウザ上でネイティブにレイアウト パターンを作成することが可能です。 つまり、数行の CSS を使用するだけで、見慣れたグリッドを簡単に再現することができます。 また、以前は不可能だった CSS とレイアウトで多くのことができるようになることを意味します。
簡単なメモ： この記事は CSS Grid の包括的な入門書ではなく、CSS Grid についての基本的な知識を前提としています。 まだの方は、MDN の素晴らしい CSS Grid Layout ページをチェックアウトすることをお勧めします。
Web 上のレイアウトは常にトリッキーでした。 Web が最初に導入されたとき、レイアウトのためのメソッドは存在しませんでした。 そして、テーブルが登場しました (テーブルの中、テーブルの中、テーブルの中)。 それはハック的で奇妙なものでしたが、うまくいきました。 90年代後半にCSSが導入されると、開発者はデザインやレイアウトにdivやfloatを使うことができるようになりました。 これがやがてフレームワークやグリッドシステムにつながり、フロートのクリア、ネガティブマージン、レスポンシブデザインなど、あらゆる「困ったこと」を解決してくれるようになりました。 それが、ここ数年の流れです。 CSS グリッド レイアウトが現実のものとなった今、既存のグリッド フレームワークを CSS Grid で置き換えるには何が必要かを見てみようと思いました。 この実験では、人気のある Bootstrap フレームワークを選択しました。
Bootstrap グリッドを使用して、まず基本的なサイトを作成しました。 また、左右の端にパディングを追加し、すべてを中央に配置します。 ここで変更することはあまりありません。 Bootstrapと同じように、コンテナクラスはCSS Gridで使うと便利です。
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}以下のように追加することで、レスポンシブ ブレークポイントを追加することもできます。
@media (min-width: 992px) { .container { width: 970px; }}Bootstrap では .row クラスを使って列をラップし、左右に負のマージンを提供して個々の列が追加する padding を打ち消すようにしています。 ネガティブ マージンのようなハックは、CSS グリッドではもはや必要ありませんが、ドキュメントを読んでいれば、CSS グリッドにはグリッド コンテナが必要であることがわかると思います。 .rowクラスはこれを実現するのに最適な場所です。 私が行ったことを紹介し、それを分解してみましょう。
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid はグリッドコンテナを作成します。
grid-template-columnsプロパティはグリッドの列を定義しています。 スペースを使って各列を個別に定義することもできますが、ここでは繰り返し表記を利用して12個の等しいサイズの列を定義しています。 1frは個々の列の幅を参照する。 MDNでは、frユニットを “グリッドコンテナ内の利用可能なスペースの何分の一かを表す “新しいユニットとして定義しています。 fr単位については、MDNで詳しく説明されています。 grid-template-columns プロパティについても参照してください。
最後に、grid-gap プロパティは、列間および列の行間の空間の量を定義する省略記法のプロパティです。 これはガター（溝）と考えてください。 グリッド ギャップについて詳しくは、こちらを参照してください。
さて、残るは列クラスだけです。 Bootstrap では、.col-md-6 や .col-lg-8 などの列クラスを使用して、div がまたがるべき列の数を決定します。 また、div をフロートさせ、左右にパディングを追加して、列の間に溝を作ります。 これらのクラスの再作成は、.grid-column の省略記法のプロパティのおかげで非常に簡単です。 たとえば、.col-md-6 クラスを再作成する場合、次のようになります。 フロートなし。 パディングもない。 ただ、動くだけです。 grid-column の省略記法は、アイテムのサイズと位置を指定します。 span を使って、このアイテムが 6 列にまたがることを示すことができます。 ラッパーに grid-gap プロパティがあるので、溝は自動的に処理されます。 grid-column プロパティについて詳しくはこちら
さて、すべてをまとめるとどうなるでしょうか？ さて、Web サイトの外観はまったく同じですが、Bootstrap への依存を完全に取り除き、ネイティブの CSS グリッドを使用することができます。
CodePen で更新した Web サイトを確認する。 賢明な哲学者ジェフ ゴールドブラムのセリフを借りると、「あなたは……できるかどうかに気を取られていて、すべきかどうか考えるのを止めなかった」
ということです。 Bootstrap のグリッドを簡単に再現できましたが、CSS Grid は、それ以前のどのグリッド システムよりもはるかに強力です。 それは、ゼロから構築された Web ネイティブ ソリューションであるためです。 HTML ソースの順序とは無関係に、グリッド上の正確な位置に要素を配置したいですか? そうしてください。 複数の列や行にまたがるアイテムを作成したいですか? 問題ありません。 Mozilla の Craig Cook が作成した、さまざまなレイアウトパターンを紹介するデモをご覧ください。 Bootstrapを使って、これらのレイアウトをいくつか再現してみてください（ヒント：不可能です）。 私たちは、CSS Grids でできることのほんの一例です。