レスポンシブレイアウトを取得するための1行のCSSコード

著者：icepy @ほとんどの列を知っている

https://zhuanlan.zhihu.com/p/69809343

この記事では、CSSグリッドを使用してクールな画像グリッドを作成し、画面の幅に応じて列数を変更する方法を説明します。最もエキサイティングな場所は、すべての応答機能がcssコードの行に追加されていることです。つまり、HTMLを醜いクラス名（col-sm-4、col-md-8など）と混在させたり、画面ごとにメディアクエリを作成したりする必要はありません。じゃあ始めよう。

セットアップ

この記事では、最初のCSSグリッドレイアウトのチュートリアル記事のグリッドレイアウトを引き続き使用します。次に、記事の最後に画像を追加します。これが最初のグリッドの外観です。

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グリッドレイアウトに影響しないため、ここでは記述しません。

このコードで混乱する場合は、レイアウトの基本を詳しく説明した記事「CSSグリッドを5分で学ぶ」を読むことをお勧めします。

列をアダプティブにします。

基本応答単位：分数

CSSグリッドレイアウトは、まったく新しい値をもたらします。fractionユニットはfraction通常、unit frと省略され、必要に応じてコンテナーを複数のブロックに分割できます。

各列を小数単位の幅に変更してみましょう。

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px;
}

その結果、グリッドレイアウトは幅全体を3つの分数に分割し、各列は分数単位を占有します。効果は次のとおりです。

grid-template-columns値をに変更する1fr 2fr 1frと、2番目の列の幅は他の2つの列の幅の2倍になります。合計幅は4分数単位になり、2番目の列は2分数単位を占め、他の列はそれぞれ1分数を占めます。効果は次のとおりです。

一般に、分数単位の値を使用すると、列の幅を簡単に変更できます。

高度な対応

ただし、グリッドは常に3列の幅であるため、上記のLieziでは必要な応答性が得られません。グリッドはコンテナーの幅に応じて列数を変更します。これを行うには、次の3つの概念を学習する必要があります。

繰り返す（）

まず、repeat()関数について学びます。これは、列と行を指定する強力な方法です。repeat()関数を使用してグリッドを変更してみましょう。

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
}

上記のコードでrepeat(3, 100px)は、はに等しいです100px 100px 100px。最初のパラメーターは行と列の数を指定し、2番目のパラメーターはそれらの幅を指定するため、最初とまったく同じレイアウトが提供されます。

自動調整

その後、はいauto-fit。固定数の列をスキップして、3を適応数に置き換えます。

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);
}

効果は次のとおりです。

これで、グリッドはコンテナの幅に応じてその数を調整します。コンテナに100px幅の列をできるだけ多く収めようとします。ただし、すべての列を100pxとしてハードコーディングすると、幅全体を埋めることが困難になるため、必要な柔軟性が得られません。上の画像でわかるように、グリッドは通常右側が空白のままです。

minmax（）

上記の問題を解決するには、が必要minmax()です。100pxをに置き換えminmax(100px, 1fr)ます。コードは次のとおりです。

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
}

すべての応答は1行のCSSコードで発生することに注意してください

効果は次のとおりです。

ご覧のとおり、効果は完璧です。minmax()関数で定義された範囲は、min以上でmax以下です。したがって、各列は少なくとも100pxになります。ただし、利用可能なスペースがさらにある場合、グリッドレイアウトはそれを各列に単純に分割します。これらの列は100pxではなく小数単位になるためです。

写真を追加

最後のステップは画像を追加することです。これはCSSグリッドレイアウトとは関係ありませんが、コードを見てみましょう。

各グリッドにイメージタグを追加します。

<div><img src="img/forest.jpg"/></div>

object-fit それは容器全体の画像をカバーすることを可能にするセットカバーは、必要なブラウザとして切断されます。

.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

効果は次のとおりです。

OK！これで、CSSグリッドレイアウトの最も複雑な概念の1つを理解したので、親指を上げてください。

ブラウザの互換性

この記事を終える前に、ブラウザーのサポートについて触れておきますが、この記事の執筆時点では、グローバルWebサイトの77％がCSSグリッドをサポートしており、その比率はまだ高まっています。

2018年はCSSグリッドレイアウトの最初の年になると思います。これは画期的な成果を達成し、フロントエンド開発者にとって必須のスキルになります。これは、過去数年間にCSS Flexboxレイアウトで起こったことと同じです。

交換留学

パブリックアカウント[フロントエンドユニバース]をフォローして、毎日良い記事の推奨事項を入手してください
WeChatを追加し、グループに参加してコミュニケーションする

「監視と転送」が最大のサポート