grid-area
Item
Item
.grid-area {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
grid-template-areas:
"a a b"
"a a b";
}
.item1 {
grid-area: a;
background:#eee;
border:1px solid #ccc;
}
.item2 {
grid-area: b;
background:#eee;
border:1px solid #ccc;
}grid-auto-columns
min-content;
max-content;
auto;
0.5fr;
minmax(max-content, 2fr);
fit-content(20%);minmax(auto, <flex>))
1
2
3
.grid-auto-columns {
height: 100px;
display: grid;
grid-template-areas: "a a b c";
gap: 10px;
grid-auto-columns: auto;
}
.grid-auto-columns > div {
background-color: lime;
}
.item1{
grid-area: a;
}
.item2{
grid-area: b;
}
.item3{
grid-area: c;
}.grid-auto-columns-2{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
/* list要素のデフォルトスタイルを除去 */
padding:0;
}
.grid-auto-columns-2 li{
/* display:list-itemを上書き必要*/
display:grid;
}
.grid-auto-columns-2 a{
white-space:pre
}.grid-auto-columns-3 li:nth-child(2) {
/* 2から4にまたがる*/
grid-column: 2 / 4;
}responsive
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));ずらした四角を重ねるレイアウト
One
Two
Three
Four
Five
stack vertical
One
Two
Three
Four
Five
Six
Seven
Eight
.stack-vertical{
display: grid;
grid-template-rows: repeat(3, 200px);
gap: 10px;
grid-auto-flow: column;
grid-auto-columns: 300px 100px;
}
.stack-vertical div{
background:#eee;
border:1px solid;
}centered
グリッドレイアウトのボックス配置 – CSS: カスケーディングスタイルシート | MDN
Item 1
.center {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a ."
". a a .";
}
.center .item1 {
grid-area: a;
align-self: center;
justify-self: center;
background:#000;
color:#fff;
padding:.375rem .75rem;
}3col-2line
A
B
C
D
E
F
grid-template: repeat(2, 80px) / repeat(3, 1fr);A
B
C
D
E
F
grid-auto-flow: dense を指定すれば、ほかのアイテムを前へ戻らせて「すき間」を埋めてくれます。
A
B
C
D
E
F
grid-auto-flow: dense column
A
B
C
D
A
B
C
D
.col-3-2line-nodence.has-dence-column{
grid-auto-flow: dense column;
}