フレックスボックスを使用せずに中央揃えのインラインブロックグリッドの最後の行を左揃えにする方法は?

Display Inline-Block を使用して要素の中央グリッドの最後の行を左揃えにしました

目的は、ブロックの中央グリッドを作成することです。最後の行が左に揃えられるようにします。 Flexbox に頼ったり、余分なフィラー div を追加したりせずに、CSS のみのソリューションを次に示します。

Display Inline-Block を使用したアダプティブ グリッド

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">margin:0;
padding:0;

ログイン後にコピー

}

container{

font-size:0;
margin:0 auto;
width:1000px;

}
.block {

font-size:20px;
width: 150px;
height: 150px;
margin:25px;
background: gold;
display:inline-block;

}

@メディア画面と(max-width: 430px) {

#container{
    width:200px;
}

}

@media screen および (min-width: 431px) および (max-width: 630px) {
#container{

    width:400px;
}

}
@media 画面と (min-width: 631px) および (max-width: 830px) {
#container{

    width:600px;
}

}
@media screen and (min-width: 831px) and (max-width: 1030px) {
#container{

    width:800px;
}

}

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

ログイン後にコピー