CSS グリッドに関する基本的な入門知識を共有する

グリッド システム (CSS グリッド) は、CSS の最も重要な機能の 1 つです。簡単な方法で要素を列と行に配置できます。CSS グリッドを使用すると、フロート、テーブル、位置決めを使用せずに、複雑で応答性の高い Web ページを簡単にデザインできます。また、少し練習すれば分かるように、より強力な機能も多数あります。

この記事では、CSS グリッドについていくつかの実践的な例を示しながら学び、理解を深めていきます。はじめましょう。

コンテナを定義する

グリッド システムの使用を開始するには、次のように、すべての子要素をラップするコンテナ div または親 div を定義する必要があります。

<div class="container">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
  </div>

CSS で親 div の表示プロパティを Grid または inline-grid に設定すると、親 div はグリッド コンテナーになります。

以下に例を示します。

.container {
  display: grid;
  background-color: crimson;
  padding: 10px;
}
.container > .child {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 30px;
  margin: 5px;
}

justify-content や align-items などのコンテナ プロパティを使用して、子要素をコンテナ div 内の中央に配置できるようになりました。これらのプロパティを以下の例で紹介します。

グリッド テンプレート列 (grid-template-columns)

属性 Grid-template-columns は、グリッド コンテナー内の列の数を定義するために使用されます。これは、各列の幅を定義するのにも役立ちます。

グリッド コンテナー内に 3 つの列を定義するとします。この場合、grid-template-columns プロパティの値として分数を使用できます。分数は、グリッド レイアウトを列または行に分割するために使用されます。

以下の例を見てください。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: crimson;
  padding: 10px;
}
.container > .child {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 30px;
  margin: 5px;
}

上でわかるように、3 つの分数 1fr を使用してグリッド コンテナーを 3 つの列に分割しました。

Grid-template-columns 属性を使用して列の幅を指定することもできます。

.container {
  display: grid;
  grid-template-columns: 200px 50px 150px 100px;
}

それに加えて、grid-template-columns プロパティを auto に設定することもできます。こうすることで、画面サイズに応じて列の幅が自動的に引き伸ばされます。

以下に例を示します。

.container {
  display: grid;
  grid-template-columns: auto auto;
}

最も優れた機能の 1 つは、グリッド テンプレート列と、画面サイズに基づいて最小幅と最大幅を設定する minmax() 関数を使用して、アダプティブ レイアウトを簡単に作成できることです。

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

たとえば、電子商取引アプリケーションで製品のリストを表示する必要があるとします。あなたのタスクは、レイアウトをレスポンシブにすることなので、デスクトップでは 1 列あたり 3 つの製品を表示し、タブレットでは 1 列あたり 2 つの製品を、モバイルでは 1 列あたり 1 つの製品のみを表示することにします。以下の例を見てください。

HTML:

<div class="grid">
 <div class="item">Product 1</div>
 <div class="item">Product 2</div>
 <div class="item">Product 3</div>
 <div class="item">Product 4</div>
 <div class="item">Product 5</div>
 <div class="item">Product 6</div>
</div>

CSS:

*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: sans-serif;
}
body{
 height: 100vh;
 margin-top: 150px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.item{
 background: red;
 padding: 20px;
 color: wheat;
 margin: 10px;
}

これにより、画面サイズに基づいて列数も自動的に定義されます。画面幅が最小サイズに達すると、1 列幅 1fr のみになります。画面幅が大きすぎると、幅 200 ピクセルの列が多数存在することになります。

グリッド テンプレート行 (grid-template-rows)

プロパティ Grid-template-rows は、グリッド コンテナー内の行数を定義するために使用されます。これはグリッド テンプレート列と似ていますが、唯一の違いは、列ではなく行を扱うことです。

2 つの列と 2 つの行を持つグリッド コンテナーを定義するとします。実現するには、grid-template-rows と Grid-template-columns の 2 つのプロパティを使用できます。以下に例を示します。

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

また、grid-template-rows プロパティを使用して行の幅を定義したり、grid-template-columns で行ったように行の幅を自動的に拡大したりすることもできます。列ではなく行を扱うことを除いて、それらに違いはありません。

グリッドギャップのプロパティ (グリッドギャップ)

グリッド ギャップ属性 Grid-gap は、親要素内の列と行の間のギャップを設定するために使用されます。

.container{
 display: grid;
 grid-template-columns: auto auto;
 grid-gap: 15px;
}

コンテンツの整列プロパティ (align-content)

align-content 属性 align-content は、コンテナ内のすべてのグリッドを垂直方向に整列させるために使用されます。

以下に例を示します。

.container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 50px 80px;
  height: 400px;
  align-content: center;
  background-color: crimson;
  padding: 10px;
}

他にも、space-between (両端揃え)、start (上揃え)、space-around (均等配分)、end (下揃え) など、align-content に渡すことができる値があります。 、など。テキストエディタで試してみて、違いを確認してください。

グリッドアイテム

CSS グリッドには、複雑なグリッド レイアウトを簡単に設計するためにグリッド コンテナーの子要素に渡すことができるいくつかの便利なプロパティもあります。これらのプロパティには、grid-column、grid-row、grid-area などがあります。これらについては、W3schools の Web サイトで学ぶことができます。この記事で詳しく説明すると、一生スクロールし続けることになる可能性があるためです。

結論は

グリッドは、複雑で応答性の高いレイアウト構造を簡単に設計できるようにする素晴らしい CSS 機能です。この機能は練習することでのみ習得できるため、よく練習することを強くお勧めします。

記事のスペースが限られているため、今日の内容はここで共有します。記事の最後に、記事の作成は簡単ではないことを思い出していただきたいと思います。私の共有が気に入っていただけましたら、忘れないでください。 「いいね！」を押して転送して、より多くの人が困っているようにしてください。同時に、フロントエンドテクノロジーについてさらに知識を深めたい場合は、私をフォローすることを歓迎します。あなたのサポートが私が共有する最大の動機になります。今後もより多くのコンテンツを出力していきますので、ご期待ください。

原文:
https://medium.com/javascript-in-plain-english/css-grid-explained-with-examples-d64cf241e1cf

メディ・アウシアド著

間接翻訳、いくつかの自己調整および追加部分、翻訳レベルには制限があります、省略があることは避けられません、修正を歓迎します