TIL 6. CSSグリッドレイアウト

CSS gridレイアウトを見てみましょう.この文章はmdnとcss-tricksの文章に基づいて書かれた.

grid VS flex

flexは本質的に1次元内で要素をレイアウトするために使用されます.中心軸がrow(横軸)またはcolumn(縦軸)の軸.逆にgridは、2 D内で要素をレイアウトするために使用されます.
したがってgridは、1次元内で要素をレイアウトするのが難しい場合に使用されます.

Fixed and flexible track sizes

固定寸法は画素等単位で作成してもよいし、fr等単位でフレキシブル寸法を作成してもよい.
下記のように混ぜて使用することもできます.これにより、スクリーン長が長くなるにつれて、それに比例する引張要素と固定要素が生成される.

.wrapper {
  display : grid;
    grid-template-columns: 500px 1fr 2fr;
}

grid-template

gridのコアはgrid-templateです.
grid-template-columnsは水平軸内で、grid-template-rowsは垂直軸内でサブ要素がどの間隔でレイアウトされるかを決定します.
必要な個数に応じて、要素がどれだけのスペースを占有するかを順番に宣言します.

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

線ごとに名前を付けることもでき、理解しやすいようにします.

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

fr:メッシュの相対単位

グリッドの相対単位があります.frです.gridの長さがどれだけ増加しても、fr単位を持つ要素はgridの総幅または高さとともに増加します.

repeat()

repeatは、その名の通り同じ値を繰り返すときに使用されます.

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

grid-gap

column-gap:gridの各columnにはギャップがあります.
row-gap:gridの列と各行に間隔を設定します.
gap:gridのcolumnとrowには間隔があります.

minmax()

min-widthおよびmax-widthがエレメントの最小幅および最大幅を決定するように、メッシュではminmaxを使用してエレメントの最小または最大サイズを決定します.

grid-row & grid-column

gridの子供たちが持つ位置値.1から設定でき、gridシステムで自動的に計算されます.

grid-template-areas

grid-areaに名前を宣言する子供たちは、grid-templateを各grid-area名を必要な場所に参照することで作成できます.

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

dnl

previdence-コンテンツと位置合わせ-コンテンツ

grid全体のサイズがgrid親要素のサイズより小さい場合に使用します.grid親要素の残りのスペースについて、サブ要素を配置する方法を決定します.
基本的にはflexのprevity-contentやalign-contentと同じだと思います.

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

.container {
  justify-content: start;
}

flexとは異なりgridは単独で方向を決めることはできません.横軸と縦軸は固定されています.したがって、previde-contentは水平軸の位置合わせを担当し、align-contentは垂直軸の位置合わせを担当します.

justify-items align-items

gridの各コンテンツにスペースを残す場合に使用します.

.container {
  justify-items: start | end | center | stretch;
}

.container {
  justify-items: start;
}