この記事では、CSSグリッドを使用して、画面の幅に応じて列の数を変える超クールな画像グリッドを作成する方法を説明します。
そして最もクールなのは、CSSの1行で適応性が追加されることです。
これは、余分なクラス（
Col-sm-4 、
col-md-8 ）でHTMLを整理したり、画面サイズごとにメディアクエリを作成したりする必要がないことを意味します。
すべてを詳細に検討しましょう。
カスタマイズ
この記事では
、CSS Gridに関する最初の記事で使用したグリッドを引き続き使用します。 次に、画像を追加します。 初期グリッドは次のようになります。
HTMLは次のとおりです。
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
CSSは次のとおりです。
.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; }
ご注意 この例には基本的なスタイルがありますが、CSSグリッドとは関係がないため、ここでは考慮しません。
このコードが明確でない場合は、記事「
5分間でCSSグリッドを学ぶ 」を読んで、レイアウト作成の基本を説明することをお勧めします。
スピーカーを適応させることから始めましょう。
fr単位（分数単位）による基本的な適応性
CSSグリッドには、分数単位と呼ばれるまったく新しい意味があります。 単位分数は
frと記述されており、コンテナを必要な数の部分に分割できます。
各列のサイズを1frに変更しましょう。
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50px 50px; }
ここで起こることは、グリッドが幅全体を3つの部分に分割し、各列が1ユニットを占めることです。 結果は次のとおりです。
grid-template-columnsの値を
1fr 2fr 1frと、2番目の列の幅は他の2つの列の2倍になります。 合計幅は4単位frに等しくなり、2番目の列は2単位を占め、残りは1つずつです。 これは次のようなものです。
つまり、fr単位の値を使用すると、列の幅を簡単に変更できます。
拡張された適応性
ただし、上記の例では、このグリッドには常に3列の幅があるため、必要な適応性が得られません。 コンテナの幅に応じて、グリッドの列数を変更する必要があります。 これを行うには、3つの新しい概念を学ぶ必要があります。
（）を繰り返すrepeat（）関数から始めます。 これは、列と行を指定する強力な方法です。 元のグリッドを取得し、repeat（）を使用して変更します。
.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 50px); }
つまり、
repeat(3, 100px) 100px 100px 100px repeat(3, 100px)同じです。 最初のパラメーターは必要な列または行の数を示し、2番目のパラメーターは幅を決定するため、開始時と同じレイアウトになります。
オートフィット列を固定数ではなく、自動的に定義して、3を自動調整に置き換えましょう。
.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, 100px); grid-template-rows: repeat(2, 100px); }
これにより、次の動作が発生します。
これで、グリッドはコンテナの幅に応じて列数を変更します。
ブラウザは、コンテナに幅100ピクセルの列を配置しようとしています。
ただし、すべての列を正確に100ピクセルにハードコーディングすると、必要な柔軟性が得られなくなります。これは、列全体がめったに塗りつぶされないためです。 上記のgifを見るとわかるように、グリッドの右側には多くの場合空白が残されています。
minmax（）これを修正する必要がある最後の要素は
minmax ()と呼ばれます。 100pxを
minmax (100px, 1fr)置き換えるだけです。
これが最終的なCSSです。
.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px); }
すべての適応性がCSSの1行で記述されていることに注意してください。
これにより、次の動作が発生します。
そして、あなたが見ることができるように、これは素晴らしい作品です。
minmax ()関数は、
min以上max以下のサイズの範囲を定義します。
したがって、列は常に少なくとも100ピクセルになります。 ただし、空きスペースがさらにある場合、列は100ピクセルではなく1frを占有するため、グリッドは各列に均等にスペースを分配します。
画像を追加する
最後のステップは、画像を追加することです。 これはCSSグリッドとは関係ありませんが、コードを見てみましょう。
まず、各グリッド要素内に画像タグを追加します。
画像を要素に合わせるには、要素自体と同様に幅と高さを設定し、
object-fit: cover ;適用し
object-fit: cover ; 。 これにより、画像がコンテナ全体を覆うようになり、ブラウザは必要に応じて切り取ります。
.container > div > img { width: 100%; height: 100%; object-fit: cover; }
結果は次のとおりです。
以上です。 これで、CSSグリッドの最も複雑な概念の1つがわかりました。
ブラウザのサポート
終了する前に、CSS Gridのブラウザーサポートも考慮する必要があります。 この記事の執筆時点では
、ブラウザーの77％がCSS Gridをサポートしており、この割合は増加しています。
2018年はCSSグリッドの年になると思います。 グリッドはブレークスルーを達成し、インターフェイス開発者にとって必要なツールに変わります。 過去数年間にCSS Flexboxで起こったことと同様。
この翻訳は、プロのソフトウェア開発会社であるEDISON Software （TKの例： one 、 two 、 three ）、および大口顧客向けのソフトウェア開発 （ microtomograph 、 mobile communication 、 city lighting ）によってサポートされていました。
続きを読む