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

すべての偉大なものは3つの部分に来る.正しい?おそらく😁. とにかく、皆さん、CSSグリッドボックスレイアウトについての簡単なガイドを終えたいと思いました.私は、あなたがグリッドアイテムの上で使うことができるどんな特性も言及しませんでした.🥳

グリッドエリア

あなたが私の前の記事を読んだならば、あなたはそれを知っていますgrid-area グリッド項目で使用できるプロパティで、グリッドコンテナプロパティで参照できる名前を設定できますgrid-template-areas . また、2010年の短縮されたプロパティですgrid-row-start , grid-column-start , grid-row-end , and grid-column-end .
これらのプロパティを使用すると、グリッド行/列の開始/終了によって決定される様々なセルにまたがるグリッド項目を設定できます.
例を見てみましょう😀.
例1 -ここでは、グリッドコンテナを5 x 5のグリッドに設定しました.私も、正当化を設定して、アイテムを広げるために整列させます.そして、これはグリッドアイテムが両方の軸に沿って全細胞を満たすようにします.
ここでは、コードスニペットの下にスクリーンショットが表示されます.これらの数字がどのように相関するかを確認できるように、devtool上のグリッド線を有効にしました.注意: ShortHandプロパティを使用して、グリッド行の開始とグリッドの行の終了を、列の場合と同様に結合できます.

.grid-container {
  background: #222;
  width: 50vw;
  height: 80vh;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  justify-items: stretch;
  align-items: stretch;
  gap: 10px;
}

.grid-item.a {
  grid-row-start: 2;
  grid-row-end: span 3;
  /* short hand property grid-row: 2 / span 3 */
  background: orange;
}

.grid-item.c {
  grid-column-start: 3;
  grid-column-end: 5;
  /* short hand property grid-column: 2 / 5 */
  background: lightblue;
}

.grid-item.e {
  grid-area: 3 / 2 / 6 / span 2;
  background: lightgreen;
}

上の例では、キーワードを使用することができますspan どのように多くの行セルまたは列セルを使用しているかを決定するために、代替は明示的に終了番号を示し、それがグリッド番号行を参照し、行または列セルではないことに注意してください.上記の画像をご覧ください.

正当化と整列

私たちの古い友人を正当化し、整列のグリッド項目で使用することができますjustify-self and align-self . これらの2つのプロパティを使用すると、グリッド項目内のグリッド項目を移動できますjustify-items グリッドコンテナに設定されている場合.主な違いはjustify-items 一方、すべてのグリッドアイテムを移動します.justify-self そのグリッドアイテムのみです.同様にalign-self .
リマインダー🧐 - インライン/水平軸に沿って項目を移動し、ブロック/垂直軸に沿って項目を移動します.
例を見てみましょう.
例2 -以下の例では、justify-items with justify-self グリッド項目をインラインエンドに移動します.同様に、我々は上書きするalign-items with align-self グリッド項目をブロック軸の先頭に移動します.そして最後にjustify-self and align-self グリッドセル内のグリッド項目5を中心に中心に.

.grid-item.a {
  grid-row-start: 2;
  grid-row-end: span 3;
  /* short hand property grid-row: 2 / span 3 */
  background: orange;
  justify-self: end;
}

.grid-item.c {
  grid-column-start: 3;
  grid-column-end: 5;
  /* short hand property grid-column: 2 / 5 */
  background: lightblue;
  align-self: start;
}

.grid-item.e {
  grid-area: 3 / 2 / 6 / span 2;
  background: lightgreen;
  justify-self: center;
  align-self: center;
  width: 100px;
  height: 100px;
}

1については、我々は上書きしなかったalign-items: stretch プロパティは、グリッドアイテムはまだ上から下までカバーするために伸びている.同様に、私たちが上書きしなかったのでjustify-items: stretch グリッドアイテムがまだ左から右まで伸びているようにグリッドコンテナーに設定します.

概要

合計する.grid-row-start グリッド項目を配置し始めるグリッド行行を選択しますgrid-row-end グリッド項目がどのグリッド行を停止するかを決定するには、グリッド項目が停止します.これは速記を使用して組み合わせることができますgrid-row . 最後の文章をもう一度読んで、列の行を変更😅, 今、あなたはどのように正確にグリッドアイテムを配置する方法を知っている.また、キーワードを使用することができますspan 迅速にどのように多くのセルをスパンに設定します.
また、どのように正当化を上書きすることができますし、グリッドコンテナによって設定された項目を整列する方法について触れたjustify-self and align-self . 👌
それはすべてCSSのグリッドボックスのレイアウトに私の簡単なガイドです.グリッドコンテナの主なプロパティのほとんどをカバーしており、グリッドアイテムの主なプロパティのほとんどをカバーしています.今すぐあなたの次のプロジェクトでこれらのプロパティを単純または複雑なグリッドレイアウトを構築するために十分な知っている!
いつものように、フィードバックやコメントは、情報や私のポストの他の部分に関連する歓迎です.