【CSS】CSS Gridのまとめ

目次

1.display:grid
2.grid-template-columns
3.grid-template-rows
4.grid-column-gap
5.grid-row-gap
6.grid-gap
7.grid-column
8.grid-row
9.justify-self
10.align-self
11.justify-items
12.align-items
13.grid-template-areas
14.grid-area
15.repeat
16.minmax
17.auto-fill
18.auto-fit

ベースのhtmlとcss

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>
.item1 { 
  background:palegreen;
}
.item2 {
  background:skyblue;
}
.item3 {
  background:pink;
}
.item4 {
  background:gold;
}
.item5 {
  background:plum;
}

1.display:grid

.container {
  display: grid;
}

これでCSS Gridになります。 

2.grid-template-columns

.container {
  display: grid;
  grid-template-columns: 100px 50px;
}

Gridの列を定義しています。
100pxと50pxの2列が作成されます。

3.grid-template-rows

.container {
  display: grid;
  grid-template-columns: 100px 50px;
  grid-template-rows: 100px 50px 100px;
}

Gridの行を定義しています。
100pxと50pxと100pxの3行が作成されます。

4.grid-column-gap

.container {
  display: grid;
  grid-template-columns: 100px 50px;
  grid-template-rows: 100px 50px 100px;
  grid-column-gap: 10px;
}

Grid列の隙間を定義しています。

5.grid-row-gap

.container {
  display: grid;
  grid-template-columns: 100px 50px;
  grid-template-rows: 100px 50px 100px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

Grid行の隙間を定義しています。

6.grid-gap

.container {
  display: grid;
  grid-template-columns: 100px 50px;
  grid-template-rows: 100px 50px 100px;
  grid-gap: 10px 20px;
}

Gridの隙間を定義しています。
行に10px、列に20pxの隙間を定義しています。

7.grid-column

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
}
.item5 {
  background:plum;
  grid-column: 1 / 3;
}

grid-column: 1 / 3 は1列目から3列目までが対象になります。

8.grid-row

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
}
.item5 {
  background:plum;
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

grid-column: 2 / 4 は2列目から4列目
grid-row: 2 / 4 は2行目から4行目
が対象になります。

9.justify-self

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
}
.item1 { 
  background:palegreen;
  justify-self: start;
}
.item2 {
  background:skyblue;
  justify-self: center;
}
.item3 {
  background:pink;
  justify-self: end;
}

列の位置を指定します。

10.align-self

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
}
.item1 { 
  background:palegreen;
  align-self: start;
}
.item2 {
  background:skyblue;
  align-self: center;
}
.item3 {
  background:pink;
  align-self: end;
}

行の位置を指定します。

11.justify-items

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
  justify-items: center;
}

列の位置を一括で指定します。

12.align-items

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
  align-items: center;
}

行の位置を一括で指定します。

13.grid-template-areas

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
  grid-template-areas:
  "area1 area2 area3"
  "area4 area5 area6"
  "area7 area8 area9";
}

Gridのセルに名前を付ける事ができます。

14.grid-area

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
  grid-template-areas:
  "area1 area2 area3"
  "area4 area5 area6"
  "area7 area8 area9";
}
.item5 {
  background:plum;
  grid-area: area8;
}

grid-template-areasで名前を付けた位置に配置できます。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
  grid-template-areas:
  "area1 area2 area3"
  "area4 area5 area6"
  "area7 area8 area9";
}
.item5 {
  background:plum;
  grid-area: area2;
}
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
}
.item5 {
  background:plum;
  grid-area: 1/1/2/4;
}

grid-template-areasで名前を付けていなくても、grid-columnやgrid-rowのように数字で配置する事も可能です。
grid-area: (開始行)/(開始列)/(終了行)/(終了列)となり、上記は「1～2行」と「1～4列」に配置されます。

15.repeat

.container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 100px 200px);
}

grid-template-columns: 100px 200px 100px 200px;と同じ意味になります。

16.minmax

.container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
  grid-template-columns: repeat(2, minmax(200px, 300px));
}

minmaxで最小幅と最大幅を指定できます。

17.auto-fill

.container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

スペースがある場合、空のグリッドで挿入し続けます。

18.auto-fit

.container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

スペースがある場合、グリッドが引き伸ばされてコンテナのサイズに合わせます。

未分類CSS

Posted by ababa