固定幅のグリッドをdisplay: inline-gridにする
CSSで固定幅340px、3列でgapが20pxのグリッドの場合は以下のように書かれているケースを見かけます。
CSS
/*
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
*/
.container {
display: grid;
width: 340px;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
.item {
width: 100px;
height: 100px;
border: 5px solid #0CC;
}
}一見すると問題のないコードに見えますが、幅を340pxで固定しているため、子要素（.item）の幅を変更した場合、親要素（.container）の幅も変更しなければならないという問題があります。
このようなレイアウトの場合、親要素の幅は「width: fit-content」にすることで、子要素の幅が変更されても親要素の幅を変更する必要がなくなります。
CSS
.container {
display: grid;
width: fit-content;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
.item {
width: 100px;
height: 100px;
border: 5px solid #0CC;
}
}さらに、親要素にmarginがつかないのであれば「display: grid」を「display: inline-grid」に変更すれば、widthを省略することができます。
CSS
.container {
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
.item {
width: 100px;
height: 100px;
border: 5px solid #0CC;
}
}inline-gridは横スクロールのレイアウトには使えない
inline-gridなので、横スクロールのレイアウトにも使えるように見えますが、inline-gridだと横スクロールバーが正しく表示されないので使えません。
CSS
.container-scrollNG {
display: inline-grid;
gap: 20px;
grid-auto-flow: column;
overflow-x: auto;
padding-bottom: 16px;
.item {
width: 100px;
height: 100px;
border: 5px solid #0CC;
}
}このような横スクロールのレイアウトの場合は、「display: grid」を使用してください。
CSS
.container-scrollX {
display: grid;
gap: 20px;
grid-auto-flow: column;
overflow-x: auto;
padding-bottom: 16px;
.item {
width: 100px;
height: 100px;
border: 5px solid #0CC;
}
}
