<p>（１）grid-template-columns: 400px 1fr;<br>１つ目のboxは400px、2つ目のboxは残りの幅全てを埋める様に配置</p>
<div class="grid1">
<div class="box">400px固定</div>
<div class="box">1fr（残りの幅を埋める）</div>
</div><br>
<p>（２）grid-template-columns: repeat(4, 1fr);<br>boxを4列で配置</p>
<div class="grid2">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>//１つ目のboxは400px、2つ目のboxは残りの幅全てを埋める様に配置
.grid1 {
display: grid;
//1つ目、2つ目の要素の幅を順番に指定
grid-template-columns: 400px 1fr;
//gapで余白を指定
gap:0 20px;
}
//boxを4列で配置
.grid2 {
display: grid;
//repeatの一つ目の値で何カラムにするかを指定
grid-template-columns: repeat(4, 1fr);
//gapで余白を指定
gap:20px;
}
p {
margin: 10px 0;
}
.box {
border: 1px solid #ddd;
background-color: #efefef;
height: 100px;
}
