[TIL/CSS] grid

15906 ワード
TIL CSS テキストリンク

[CSS] grid

  • flexは1次元レイアウトシステムであり、gridは2次元レイアウトシステムである.
  • flexと同様に、親要素であるコンテナと子要素である項目があります.

    • グリッドの適用

  • displayプロパティgridを適用
    .container {
	display: grid;
}
  • grid track:グリッドの行または列.
  • グリッド・ユニット:グリッドのセルを指します.
  • gridgap:グリッドユニット間の間隔を指します.
  • grid area:グリッドユニットの集合を指します.

    • grid-template-rows


    grid-template-columns
  • 行(行)と列(列)の位置のプロパティを決定します.
    • .container {
	grid-template-rows: 200px 200px 500px;
	/* grid-template-rows: 1fr 1fr 1fr */
	/* grid-template-rows: repeat(3, 1fr) */
	/* grid-template-rows: 200px 1fr */
	/* grid-template-rows: 100px 200px auto */

	grid-template-columns: 200px 200px 500px;
	/* grid-template-columns: 1fr 1fr 1fr */
	/* grid-template-columns: repeat(3, 1fr) */
	/* grid-template-columns: 200px 1fr */
	/* grid-template-columns: 100px 200px auto */
}
  • fr(スコア)は比率を表す.
  • 固定サイズと可変サイズを混合して使用できます.

    • くりかえしかんすう

  • repeatは、重複値を自動的に処理できる関数です.
  • repeat(繰り返し回数、繰り返し値)として使用できます.
    • .container {
	grid-template-columns: repeat(5, 1fr);
	/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
}

    minmax関数

  • の最高値と最高値を指定できる関数です.
  • minmax(最高値、最高値)として使用できます.
    • .container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(100px, auto));
}

    内容量が少なくても、100 pxの高さを確保し、内容が多く、100 pxを超えると自動的に増加します.

    auto-fill


    auto-fit
  • auto-fillとauto-fitは、カラム数を事前に決定するのではなく、設定した幅が許容される場合にセルを最大限に塗りつぶします.
    • .container {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}
  • auto-fillセル数が不足するとスペースが残り、auto-fitは残りのスペースを埋めます.

    • row-gap


    column-gap
  • コア間の間隔のプロパティを設定します.
    • .container {
	row-gap: 10px;
	column-gap: 20px;
}

    grid-auto-columns


    grid-auto-rows
  • 行または列の数が分からない場合は、すべてのトラックサイズのプロパティが自動的に指定されます.
    • .container {
	grid-auto-rows: minmax(100px, auto);
}

    grid-row-start


    grid-row-end
    grid-column-start
    grid-column-end
  • ユニットの領域を指定します.
  • グリッド線番号を使用して、列と行の範囲を決定します.
    • .item:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}
  • ユニットを占有するように指定することもできます.
    • .item:nth-child(1) {
	/* 1번 라인에서 2칸 */
	grid-column: 1 / span 2;
	/* 1번 라인에서 3칸 */
	grid-row: 1 / span 3;
}

    grid-template-areas

  • の各領域に名前を付け、その名前でレイアウトできます.
  • ユニットの個数に応じて該当する位置に名前を書き、スペースを付けて区別します.
  • スペースには、句点または「none」を付けることができます.
    • .container {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
}
  • のアイテム要素にgrid-area属性で命名すればよい.
    • .header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
.footer { grid-area: footer; }
/* 이름 값에 따옴표가 없는 것에 주의하세요 */

    grid-auto-flow

  • 物品自動放置プロセスの属性を決定します.
  • denseは基本的に空のセルを埋め込むアルゴリズムで、行や列によって基準が異なります.
    • .container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(25%, auto));
	grid-template-rows: repeat(5, minmax(50px,auto));
	grid-auto-flow: dense;
}
item:nth-child(2) { grid-column: auto / span 3; }
item:nth-child(5) { grid-column: auto / span 3; }
item:nth-child(7) { grid-column: auto / span 2; }

    align-items


    垂直に並べたアイテムのプロパティ.
    .container {
	align-items: stretch;
	/* align-items: start; */
	/* align-items: center; */
	/* align-items: end; */
}

    justify-items


    アイテムの属性を横に並べます.
    .container {
	justify-items: stretch;
	/* justify-items: start; */
	/* justify-items: center; */
	/* justify-items: end; */
}

    align-content

  • 物品の高さの合計が容器の高さより小さい場合、物品を全体的に並べ替えることができる.
    • .container {
	align-content: stretch;
	/* align-content: start; */
	/* align-content: center; */
	/* align-content: end; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
}

    justify-content


    すべての
  • 物品の幅の和が容器の幅より小さい場合、すべての物品をソートすることができる.
    • .container {
	justify-content: stretch;
	/* justify-content: start; */
	/* justify-content: center; */
	/* justify-content: end; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

    align-self

  • 個のアイテムを縦に並べた属性.
    • .item {
	align-self: stretch;
	/* align-self: start; */
	/* align-self: center; */
	/* align-self: end; */
}

    justify-items

  • 個々のアイテムの属性を横に並べます.
    • .item {
	justify-self: stretch;
	/* justify-self: start; */
	/* justify-self: center; */
	/* justify-self: end; */
}

    P.S.


    全体的にflexのように見えますが、「セル」のメッシュコンセプトがあり、行や列を簡単に制御できる点が良いです.template areasを利用すると、手帳にスケッチするように、レイアウトをすばやく整理できるようです.😆

    コメントドキュメント

  • 今回はCSS Gridを学びましょうby Studio Mill
    • 【Java同時プログラミング】2.1オブジェクトおよび変数の同時アクセス——synchronized同期方法
    Pythonトレーニング1期-すべての人に適用されるPython(PY 4 E)4鋼(含む)