グリッドレイアウトを色々試してみる

Grid Cap のみ指定

GRID 1
GRID 2
GRID 3
GRID 4
GRID 5
GRID 6
GRID 7
GRID 8
GRID 9

.grid--1 { display: grid; grid-gap: 10px; }

Template Colums repeat(3 × 1fr) を指定

GRID 1
GRID 2
GRID 3
GRID 4
GRID 5
GRID 6
GRID 7
GRID 8
GRID 9

.grid--2 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; }

Template Colums 90px 2fr 1fr を指定

GRID 1
GRID 2
GRID 3
GRID 4
GRID 5
GRID 6
GRID 7
GRID 8
GRID 9

.grid--3 { display: grid; grid-template-columns: 90px 2fr 1fr; grid-gap: 10px; }

Grid Auto Rows を指定

GRID 1
GRID 2
GRID 3
GRID 4
GRID 6
GRID 7
GRID 8
GRID 9

.grid--4 { display: grid; grid-template-columns: 90px 2fr 1fr; grid-auto-rows: minmax(100px, auto); grid-gap: 10px; }

アイテムに Grid Column および
Grid Row を指定

GRID 1
GRID 2
GRID 3
GRID 5
GRID 6
GRID 7
GRID 8
GRID 9

.grid--5 { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); grid-gap: 10px; } .grid--5 > .grid__item--box4 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; }

アイテムに Grid Column および
Grid Row を指定パターン2

GRID 1
GRID 2
GRID 3
GRID 5
GRID 7
GRID 8
GRID 9
GRID 10
GRID 11

.grid--6 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .grid--6 > .grid__item--box4 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 6; }