グリッドレイアウトは、扱えるようになると便利なスタイルです。
flexレイアウトは、幅を1つだけ変更したいときは、width:100%;や flex-basis などで幅をかえることで、簡単に調整ができます。
gridの場合は、幅指定では、調整ができません。
grid でカラムを変更した場合は、幅を変えたい子要素に「 grid-column 」を指定します。
|
1 2 3 4 5 6 7 8 |
.box{ grid-template-columns: 1fr auto; /* 4列カラム */ } .box .item-b{ grid-column: 1 / -1; /* この要素だけ幅を変える */ } |
