簡単なグリッドレイアウト-パート2

あなたがまだパート1を読んでいないならば、私は😃. 前回は、いくつかの共通グリッドコンテナCSSプロパティについて議論しました.あなたはこれらのプロパティについて知っていないかもしれないか、おそらくあなたがそれを知って忘れてしまった!

グリッドプロパティ

我々は第1部を終えたjustify-items and align-items グリッドのセル内のグリッド項目を移動することができます.他にも2つのプロパティがありますjustify-content and align-content , 彼らはすべてこれほど似ているので、これは混乱する可能性があります.しかし、私はグリッドアイテムを移動する必要がある場合は、それを覚えている方法は、“アイテム”をあなたの正当化またはプロパティの整列に含めるようにしてください.👌

コンテンツを正当化し、コンテンツを揃える

では、どうやって違うの?グリッドコンテナの行と列を定義し、グリッドコンテナー自体よりも小さくなったら、余分なスペースがあります.それでjustify-content and align-content グリッドコンテナ内の行と列を残りのスペースに従って移動します.
前述のように、正当化はインライン軸に沿ってものを動かして、整列することはブロック軸に沿ってものを動かすでしょう.
以下はオプションです:

.grid-container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

.grid-container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

私は前の例を作ります.
例-まず、行と列のサイズを変更し、グリッドコンテナーの内部に行と列を移動するスペースがあります.追加しましたjustify-content: space-around , and align-content: space-evenly .

.grid-container {
  background: #222;
  width: 50vw;
  height: 80vh;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: 
    "first first second"
    "third . fourth"
    "fifth sixth .";
  justify-items: center;
  align-items: center;
  justify-content: space-around;
  align-content: space-evenly;
}

以下の画像は、セル内の名前を持つ各セルのアウトラインが表示されます.そして、各セル間のスペースに気づくでしょう.これは、行が均等にスペースを解放し、空き領域の周りのスペースに列を設定する上記のプロパティのためです.

あなたが正当化して、整列して遊ぶためにCode Pen .

グリッドの自動列とグリッドの自動行

The grid-auto-columns and grid-auto-rows グリッドテンプレートを使用して定義されたグリッドセルの外側にあるグリッドセルの行と列のサイズを定義します.それはほとんどのグリッド項目のオーバーフローのために自動的に生成される行と列のデフォルトサイズを設定するようです.
例-ここでは、100px 使用grid-template-columns . そして、私はgrid-auto-columns and grid-auto-rows , これは、定義されている列の外側にあるグリッド項目が1fr 任意の行のサイズになります150px . どこで、私は2つのグリッドアイテム、4列目と1行目に1つを配置して見ることができます.

.grid-container {
  background: #222;
  width: 50vw;
  height: 80vh;
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-columns: 1fr;
  grid-auto-rows: 150px;
}

.grid-item.c {
  grid-column: 4;
  background: orange;
}

.grid-item.e {
  grid-row: 4;
  background: #06d;
}

グリッドオートフロー

The grid-auto-flow プロパティを使用すると、グリッド項目のフロー方向を選択できます.既定値は行です.グリッドは、セルを左から右に塗りつぶし、新しい行にラップを表示する理由です.あなたは、列にフローを設定することができますし、一番下に行くし、新しい列にラップします.
この例に含まれる別のプロパティはgap , これにより、各グリッドセル間の溝を設定することができ、これは、セルの間だけではなく、エッジのために動作します.CSSで通常の単位をとります.gap の組み合わせですrow-gap and column-gap あなたが好むならば、あなたは個々に彼らをセットすることができます.
例-フロー方向を列に変更し、セルの間に溝を追加する20px .

.grid-container {
  background: #222;
  width: 50vw;
  height: 80vh;
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-columns: 1fr;
  grid-auto-rows: 150px;
  grid-auto-flow: column;
  gap: 20px;
}

概要

私は、今日のためにそれを包むと思います、我々が利用可能なスペースがあるならば、グリッドコンテナの中で行とコラムを準備する方法について話しましたjustify-content and align-content . グリッド行と列の「デフォルト」サイズを設定する方法を見ましたgrid-auto-rows and grid-auto-columns , これは、どのように多くのグリッドアイテムがあるかわからないときに便利かもしれません.最後に、グリッドアイテムの流れを変更する方法を見ましたgrid-auto-flow そして、行と列の間にギャップを含める方法.
これは各プロパティの簡単な概要であることを忘れないでください.私が残したいくつかのプロパティと、複数のプロパティを一度に結合する短縮プロパティがあります.あなたがもっと学びたいならば、追加の詳細はMDN , W3School and CSS Tricks .
あなたがフィードバックを持っているならば、コメントで知らせてください、あるいは、私が何かを誤解したならば.