Grid

Flexible Boxも1次元レイアウトに適していますが、比較的簡単です.より複雑なレイアウトではCSS Gridを使用できます.gridとは異なり、flexは1次元ではなく2次元を使用してレイアウト構造を作成します.
各containerとItemsには多くの属性と値があるため、リンクを参照して、属性のデフォルト値を簡単に理解し、予期せぬレイアウトの問題に対応するために深く議論してください.

Grid Containerプロパティ

Grid Containerにしか指定できない属性を見てみましょう.

display

gridをblockおよびlnline要素属性に設定する属性値は、gridおよびinline-gridである.

grid-template-rows

行のサイズを明確に定義します.

fr(スコア、空間パーセント)単位が使用可能です.

repeat()関数が使用可能です.

行の名前も定義できます.(必須ではありません)

.container {
  display: grid;
  grid-template-rows: 1행크기 2행크기 ...;
  grid-template-rows: [선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
}

/* 각 행의 크기를 정의합니다. */
.container {
  grid-template-rows: 100px 200px;
}

/* 동시에 각 라인의 이름도 정의할 수 있습니다. */
.container {
  grid-template-rows: [first] 100px [second] 200px [third];
}

/* 라인에 중복된 이름을 지정할 수 있습니다. */
.container {
  grid-template-rows: [row1-start] 100px [row1-end row2-start] 200px [row2-end];
}

/* repeat 함수 사용 가능 */
.container {
  width: 400px;
  display: grid;
  grid-template-rows: repeat(3, 100px); /* 3개의 행이 100px 높이 */
  grid-template-columns: repeat(3, 1fr); /* 3개의 열이 전체 너비의 1의 공간 비율 너비*/
}

grid-template-columns

明示的な列のサイズを定義します.使用法はgrid-template-rowsと同じです.

fr(スコア、空間パーセント)単位が使用可能です.

repeat()関数が使用可能です.

同時行(行)の名前も定義できます.

.container {
  display: grid;
  grid-template-columns: 1열크기 2열크기 ...;
  grid-template-columns: [선이름] 1열크기 [선이름] 2열크기 [선이름] ...;
}

grid-template-areas

指定したグリッド領域名(grid-area)を参照してグリッドテンプレートを作成します.grid-areaはGrid ContainerではなくGrid Itemに適用される属性である.

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer";
}
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

gap(grid-gap)

各行と行、列と列の間隔(Gutter)を指定します.

.container {
  border: 4px solid;
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    'header header header'
    'main main aside'
    '. . aside'
    'footer footer footer';
  grid-gap: 10px 40px; /* 행과 행의 간격, 열과 열의 간격 */
}

.container > * {
  border: 2px solid;
}

.container header {
  grid-area: header;
}

.container main {
  grid-area: main;
}

.container aside {
  grid-area: aside;
}

.container footer {
  grid-area: footer;
}

grid-auto-rows

暗黙行のサイズを定義します.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 100px 100px; /* 명시적 2개 행 정의 */
  grid-template-columns: 150px 150px; /* 명시적 2개 열 정의 */
  grid-auto-rows: 100px; /* 그 외(암시적) 행의 크기 정의 */
}
.item:nth-child(3) {
  grid-row: 3 / 4;
}

grid-auto-columns

暗黙列のサイズを定義します.

.container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 150px 150px;
  grid-auto-rows: 100px;
  grid-auto-columns: 100px;
}
.item:nth-child(3) {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

grid-auto-flow

配置されていないアイテムを「自動配置アルゴリズム」で処理する方法を定義します.

次に、rowおよびrow denseの例を示します.

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row || row dense || dense;
}
.item:nth-child(2) {
  grid-column: span 3;
}

次に、columnおよびcolumn denseの例を示します.

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column || column dense;
}
.item:nth-child(1) {
  grid-column: 2 / span 2;
}
.item:nth-child(2) {
  grid-column: span 2;
}

justify-content

グリッドの内容を水平(行軸)に揃え、グリッドの内容の幅をグリッドコンテナより小さくする必要があります(空白がある必要があります).

.container {
  width: 450px;
  height: 450px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  justify-content: <justify-content>; /* 전체 요소들의 크기 합이 컨테이너의 영역을 벗어나지 않으므로 적용 가능 */
}

align-content

グリッドの内容を垂直(列軸)に揃え、グリッドの内容の垂直幅がグリッドコンテナよりも小さいことを確認します.

justify-items

グリッド項目(行軸)を水平に揃えます.グリッド項目の幅は、その属するグリッド列(Track)のサイズより小さくなければなりません.

.container {
  width: 450px;
  height: 450px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  justify-items: <justify-items>;
}

align-items

グリッド項目を垂直(列)に揃えます.グリッド項目の垂直幅は、グリッド行のサイズより小さくなければなりません.

.container {
  width: 450px;
  height: 450px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  align-items: <align-items>;
}

Grid Itemsプロパティ

Grid Itemsにのみ指定できる属性について説明します.

grid-row-start, grid-row-end, grid-column-start, grid-column-end

グリッド項目を配置するには、グリッド線の開始位置(Start Position)と終了位置(End Position)を指定し、数値(Numeric)、線名(Line Name)を指定するか、spanキーワードを使用します.

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

.item:nth-child(1) {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4;
}

/* span 키워드와 ‘숫자’를 조합하면 ‘숫자’만큼 라인을 확장하는(+) 개념 */
.item:nth-child(1) {
  /* Row 1번에서 3번(1+2=3)까지 */
  grid-row-start: 1;
  grid-row-end: span 2;

  /* Column 2번에서 3번(2+1=3)까지 */
  grid-column-start: 2;
  /* grid-column-end: span 1; (생략) */
}

/* 단축 속성으로 표현 가능 */
.item {
  grid-row: <grid-row-start> / <grid-row-end>;
}

.item {
  grid-column: <grid-column-start> / <grid-column-end>;
}

/* 같은 표현 */
.item {
  grid-row-start: 1;
  grid-row-end: 2;
}
.item {
  grid-row: 1 / 2;
}

/* 같은 표현 */
.item {
  grid-row-start: 2;
  grid-row-end: span 3;
}
.item {
  grid-row: 2 / span 3;
}
.item {
  grid-row: 2 / 5;
}

/* 같은 표현 */
.item {
  grid-column-start: 2;
  grid-column-end: -1;
}
.item {
  /* Column 2번에서 끝(-1번)까지 */
  grid-column: 2 / -1;
}

justify-self

1つのグリッド項目を水平(行軸)に揃えます.グリッド項目の水平幅は、その属するグリッド列のサイズより小さくなければなりません.

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
.item:nth-child(1) { justify-self: start; }
.item:nth-child(2) { justify-self: center; }
.item:nth-child(3) { justify-self: end; }
.item:nth-child(4) { justify-self: stretch; }

align-self

1つのグリッド項目を垂直(列軸)に揃えます.グリッド項目の垂直幅は、その属するグリッド行のサイズより小さくなければなりません.

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
.item:nth-child(1) { align-self: start; }
.item:nth-child(2) { align-self: center; }
.item:nth-child(3) { align-self: end; }
.item:nth-child(4) { align-self: stretch; }

order

グリッド項目の自動配置の順序を変更できます.数値が小さいほど、グリッド項目の配置が早くなります.

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
.item:nth-child(1) { order: 1; }
.item:nth-child(3) { order: 5; }
.item:nth-child(5) { order: -1; }

z-index(スタック順)

z-indexプロパティを使用して、アイテムのスタック順序を変更できます.

.item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 3;
}
.item:nth-child(2) {
  grid-area: 1 / 2 / 3 / 3;
  z-index: 1;
}
.item:nth-child(3) {
  grid-area: 2 / 2 / 3 / 4;
}

参考資料

https://heropy.blog/2019/08/17/css-grid/

https://grid.malven.co/