10分でCSS3グリッドレイアウトを理解する

基本的な紹介

前回の記事では、CSS3 のフレックスボックスを紹介しました。今日は、CSS3 のもう 1 つの強力な機能であるグリッドについてお話ししましょう。

グリッドはフロントエンド開発者にとって非常に馴染みのあるものです。中国語では「グリッド」と翻訳されます。ブートストラップ、セマンティック UI、および Ant Design を使用したことがある人は、グリッド レイアウトに精通しているはずです。これまで、CSS フレームワークのグリッド レイアウトは、通常、フロートとパーセンテージ幅を使用して実装されていました。この実装には、いくつかの欠点があります。

• HTML は十分に簡潔ではありません。
• 高所崩壊を避けるためフロート除去が必要です。
• 列の数は固定されており、柔軟に定義することはできません。たとえば、bootstrap には 12 列、semantic ui には 16 列、ant design には 24 列があります。

もちろん、グリッドは flex でも実装できますが、float を使用するよりもそれほど簡単ではありません。また、flex は 1 次元空間のレイアウトには適していますが、グリッドのような 2 次元空間には適していません。現在、CSS3 は仕様と標準レベルからグリッドを実装しており、プログラミング エクスペリエンスが大幅に向上しています。

互換性

使用法

グリッドは、複数の列と行で構成される 2 次元のグリッド システムです。

1. コラム

（１）列を設定する

CSS3 のグリッドは任意の数の列に分割でき、各列の幅も任意に設定できます。簡単な例を見てみましょう:

html:

<div id="コンテンツ">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

css:

体{
    色: #fff;
    テキスト配置: 中央;
}
＃コンテンツ{
    表示: グリッド;
    グリッドテンプレート列: 33.3% 33.3% 33.3%;
    最大幅: 960px;
    マージン: 0 自動;
}
#コンテンツ div{
    背景: ライトグレー;
    パディング: 30px;
}
#コンテンツ div:n番目の子(偶数){
    背景: スカイブルー;
}

効果：

display: gridとgrid-template-columns: 33.3% 33.3% 33.3%設定すると、 #contentは 3 行 3 列のグリッドに分割されます。このとき、 #contentはグリッド コンテナーと呼ばれ、 #contentの子要素はグリッド アイテムと呼ばれます。

列の数と幅を任意に変更することもできます。例:

＃コンテンツ{
    グリッドテンプレート列: 10% 20% 30% 40%;
}

効果：

（２）fr（分数）

CSS3 では、中国語で「分数」を意味する新しい単位 FR (分数) が導入されました。これは、パーセンテージの代わりに使用されます。パーセンテージ (小数) は割り切れないため、分数を使用すると、小数点以下の桁数を複数記述する必要がなくなります。たとえば、同じ幅の 3 つの列を持つグリッドは次のように表すことができます。

グリッドテンプレートの列: 1fr 1fr 1fr;

（３）繰り返す

また、列または行の書き込みを簡素化するために、 repeatメソッドを使用することもできます。repeat メソッドは 2 つのパラメータを受け入れます。最初のパラメータは繰り返し回数を示し、2 番目のパラメータは繰り返される内容を示します。したがって、次のように、等幅の 3 つの列を持つグリッドを表現することもできます。

グリッドテンプレート列: repeat(3, 1fr);

多数の列を定義する必要がある場合、repeat は非常に便利です。たとえば、等幅の列が 10 個あるグリッドを定義する場合、 1fr 10 回繰り返す代わりにrepeat(10, 1fr)と記述できます。

2. 列を作る

（１）行を設定する

列を設定すると、要素の改行により行が自動的に生成されますが、行の数と高さを設定することもできます。

CS: ...

＃コンテンツ{
    表示: グリッド;
    グリッドテンプレート列: repeat(3, 1fr);
    グリッドテンプレートの行: repeat(4, 60px);
    最大幅: 960px;
}

効果：

4 行目にはコンテンツはありませんが、行は存在し、そのスペースを占有していることがわかります。

（２）ミニマックス

上記の例では、行に固定の高さを指定していますが、グリッド項目に多くのコンテンツが含まれている場合、以下に示すように、高さが固定されているためコンテンツの一部が表示されず、問題が発生します。

この問題を解決するために、CSS はminmax関数を提供します。これにより、行の最小の高さと最大の高さを設定できます。最大の高さが auto の場合、行の高さは適応的になります。

CS: ...

グリッド自動行: minmax(60px, auto);
// または grid-template-rows: repeat(3, minmax(60px, auto));

効果：

（３）グリッドギャップ

行と列の間に間隔を追加したい場合は、既成の方法もあります。

css:

グリッドギャップ:{
  10ピクセル;
}

効果：

3. グリッド線

上記のすべての例では、グリッド内の各グリッド項目はデフォルトの順序で配置されています。レイアウトを再配置し、グリッド項目の位置やサイズを変更したい場合はどうすればよいでしょうか?この目的のために、グリッド ラインの概念が導入されます。いわゆるグリッド ラインは、グリッドをいくつかの等しい部分に分割した後の分割線です。下の図で 1 から 8 まで番号が付けられた水平線と垂直線がグリッド ラインです。

<img src="http://lc-jOYHMCEn.cn-n1.lcfi...;/>

グリッドアイテムの開始グリッドラインと終了グリッドラインを定義することで、グリッドアイテムの位置とカバー領域を制御できます。簡単な例:

html:

<div id="コンテンツ">
    <div class="one">1</div>
</div>

css:

 ＃コンテンツ {
  表示: グリッド;
  グリッドテンプレートの列: repeat(8, 100px);
  グリッドテンプレートの行: repeat(8, 100px);
  グリッドギャップ: 10px;
}

。1つ {
  グリッド列開始: 3;
  グリッド列の終了: 6;
  グリッド行開始: 3;
  グリッド行の終了: 6;
}

効果：

grid-column-start/end grid-row-start/endを設定すると、グリッド項目の開始座標と終了座標を設定するのと同じになります。上記の CSS は次のように省略することもできます。

。1つ {
  グリッド列: 3 / 6;
  グリッド行: 3 / 6;
}
// または .one {
  グリッドエリア: 3 / 3 / 6 / 6;
}

グリッド項目の開始グリッド ラインがデフォルトの場合は、そのスパンを設定するだけです。

。1つ{
  グリッド列: スパン 3;
  グリッド行: スパン 3;
}

4. グリッドエリアテンプレート

グリッド ラインによるレイアウトに加えて、CSS3 では、グリッド エリア テンプレートというより強力なレイアウト方法も提供されます。グリッド エリア テンプレートとは何かを説明するのではなく、コードを見てみましょう。

html:

<div id="コンテンツ">
    <header>ヘッダー</header>
    <main>メイン</main>
    <section>セクション</section>
    <aside>余談</aside>
    <nav>ナビゲーション</nav>
    <footer>フッター</footer>
</div>

css:

体 {
  色: #fff;
  テキスト配置: 中央;
}

＃コンテンツ {
  表示: グリッド;
  グリッドテンプレートの列: repeat(4, 1fr);
  グリッド自動行: minmax(100px, auto);
  最大幅: 960px;
  マージン: 0 自動;
  グリッドギャップ: 10px;
  グリッドテンプレート領域: 
  「ヘッダー ヘッダー ヘッダー ヘッダー」
  「余談。メインメイン」
  「nav . main main」 
  「セクション セクション セクション セクション」
  「セクション セクション セクション セクション」
  「フッター フッター フッター フッター」;
}

#コンテンツ>* {
  背景: #3bbced;
  パディング: 30px;
}

ヘッダー { グリッドエリア: ヘッダー; }
メイン { グリッドエリア: main; }
セクション{ グリッドエリア: セクション; }
脇に { グリッドエリア: 脇に; }
nav { グリッドエリア: nav; }
フッター { グリッドエリア: フッター; }

効果：

わかりますか？重要なポイントは、グリッド コンテナーのgrid-template-areasプロパティです。各グリッド項目にグリッド領域を設定し、グリッド コンテナーにグリッド領域テンプレート (grid-template-areas) を設定します。テンプレート内の各文字列行は行を表し、各領域名は列を表します。幾何学的レイアウトはテキストで完全にシミュレートされます。空白のグリッド項目は で表されます.もちろん、グリッドエリアを使用する場合は、厳密な構文に注意する必要があります。CSS は"header main header main"のような構文を解析できません。各グリッド項目を分割できないため、エリア名によってシミュレートされる構造は 2 次元空間内の全体でなければなりません。

グリッド エリア テンプレートを使用する利点は、レスポンシブ レイアウトを実装する場合にも明らかです。画面サイズごとに異なるグリッド エリア テンプレートを作成するだけで済みます。

5. 両端揃えと整列

flex と同様に、grid でも justify と align を設定して、グリッド項目の水平方向と垂直方向の配置を調整できます。グリッド コンテナーまたは個々のグリッド項目の設定もサポートします。

グリッドコンテナを設定する

html:

<div id="コンテンツ">
    <div class="one">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

css:

＃コンテンツ {
  表示: グリッド;
  グリッドテンプレート列: repeat(3, 1fr);
  グリッドテンプレートの行: repeat(2, minmax(120px, auto));
  グリッドギャップ: 10px;
  最大幅: 960px;
  アイテムの位置を揃える: 開始;
  項目の揃え方: 終了;
}

効果：

注意: flex はjustify-contentを使用し、grid はjustify-itemsを使用します。flex の値はflex-start/flex-endですが、grid はstart/endを使用します。 justify と align の両方のデフォルト値は、 stretchです。

グリッド項目を設定する

CS: ...

。1つ{
  align-self: 開始;
  正当化-自己: 終了;
}

効果：

練習する

上記の知識があれば、CSS3 グリッドを使用してさまざまなレイアウト効果をすばやく作成できます。以下に、いくつかの簡単な codepen の例を示します。

12列のグリッドレイアウト

花びらのレイアウト

レスポンシブレイアウト

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。