display: grid;
標準の状態
box1
box2
box3
box4
CssGrid:使用するには囲む必要がある
<div class="container">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
.box {
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.countainer {
display: grid;
}
grid-template-columns
box1
box2
box3
box4
.countainer-columns {
display: grid;
/* 子供の要素に対してwidth指定可能 */
grid-template-columns: 100px 100px 100px 100px;
}
grid-template-columns:(2)
box1
box2
box3
box4
.countainer-columns2 {
display: grid;
/* 子供の要素(3子供)に対してwidth指定して、残りの子供はコラムして表示される */
grid-template-columns: 100px 100px 100px;
}
grid-template-columns:(3)
[1fr][2fr]など画面幅に対して変化
box1
box2
box3
box4
.countainer-columns-fr {
display: grid;
/* 1fr=100pxの余った部分を全て占領する */
grid-template-columns: 100px 1fr 100px;
}
grid-template-columns:(4)
box1
box2
box3
box4
.countainer-columns-fr4 {
display: grid;
/* 1fr=100pxの余った部分を全て占領する */
grid-template-columns: 100px 1fr 100px 1fr;
}
各子要素
grid-template-rows:
2列目の大きさなどを指定可能
box1
box2
box3
box4
.countainer-child-rows {
display: grid;
grid-template-columns: 100px 100px 100px;
/* 2個目の折り返しのところが200pxになる */
grid-template-rows: 100px 200px ;
}
grid-template-rows:(1fr)
heightを使用すると(1fr)使用可能
box1
box2
box3
box4
.countainer-child-rows-1fr {
display: grid;
grid-template-columns: 100px 100px 100px;
/* 2個目の折り返しのところが(1fr)になる */
grid-template-rows: 100px 1fr ;
/* (1fr)使用するには、heightが指定していないといけない */
height: 500px;
border: 1px solid black;
}
grid-template-rows:(1fr)-colum
heightを使用すると(1fr)使用可能
box1
box2
box3
box4
.countainer-child-rows-1fr-culum {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 1fr ;
height: 500px;
border: 1px solid black;
/* columになる */
grid-auto-flow: column;
}
order(全てに記載)
並び順変更
box5
box6
box7
box8
.countainer-child-order {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
}
.box5 {
/* order */
order: 5;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.box6 {
/* order */
order: 8;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.box7 {
/* order */
order: 7;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.box8 {
/* order */
order: 6;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
grid-colum()
セル間を設定可能
これをベースに考える
box100
box200
box300
box400
grid-colum: 1/4;
1/4=>1(スタート)2(ゴール)===2/4:3/4:などで「BOX500」変化
box100
box200
box300
box500
.box500 {
/* grid-column: 1/4=(1)スタート位置(2)ゴール位置 */
grid-column: 1/4;
border: 1px solid black;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
grid-temple-area
これをベースに考える
box1
box2
box3
box4
grid-temple-area
エリア位置を決めて分割できる(3分割)
box600
box700
box800
box900
.countainer-child-grid-temple-area {
display: grid;
/* grid-temple-area 設定したarea名を入れて分割を割合指定 */
grid-template-areas: "area1 area1 area1"
"area2 area3 area3"
"area4 area4 area4"
}
.box600 {
/* grid-area: (名前は自由); */
grid-area: area1;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.box700 {
/* grid-area: (名前は自由); */
grid-area: area2;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.box800 {
/* grid-area: (名前は自由); */
grid-area: area3;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.box900 {
/* grid-area: (名前は自由); */
grid-area: area4;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
grid-temple-area(2)
エリア位置を決めて分割できる(4分割)
boxarea1
boxarea2
boxarea3
boxarea4
boxarea5
boxarea6
boxarea7
boxarea8
boxarea9
boxarea10
.countainer-child-grid-temple-area-area {
display: grid;
grid-template-areas: "area1 area2 area3 area4"
"area5 area5 area6 area6"
"area7 area7 area7 area7"
"area8 area9 area10 area10"
}
.boxarea1 {
grid-area: area1;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.boxarea2 {
grid-area: area2;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.boxarea3 {
grid-area: area3;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.boxarea4 {
grid-area: area4;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.boxarea5 {
grid-area: area5;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.boxarea6 {
grid-area: area6;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.boxarea7 {
grid-area: area7;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.boxarea8 {
grid-area: area8;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.boxarea9 {
grid-area: area9;
border: 1px solid black;
background-color: bisque;
text-align: center;
}
.boxarea10 {
grid-area: area10;
border: 1px solid black;
background-color: bisque;
text-align: center;
}