Home >Web Front-end >CSS Tutorial >How to Left-Align the Last Row in a Centered Inline-Block Grid without Flexbox?
How to Left-Align the Last Row in a Centered Inline-Block Grid without Flexbox?
- DDDOriginal
- 2024-12-19 14:33:09607browse
Left-aligned Last Row in Centered Grid of Elements using Display Inline-Block
The objective is to create a centered grid of blocks while ensuring the last row aligns to the left. Without resorting to Flexbox or adding extra filler divs, here's a CSS-only solution:
Adaptive Grid using Display Inline-Block
<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;
}
@media screen and (max-width: 430px) {
#container{
width:200px;
}}
@media screen and (min-width: 431px) and (max-width: 630px) {
#container{
width:400px; }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
#container{
width:600px; }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
#container{
width:800px; }
}
<pre class="brush:php;toolbar:false"><div>
This solution creates a flexible grid that adapts its width according to the browser size. It also ensures that the last row aligns to the left, regardless of how many columns are displayed.
The above is the detailed content of How to Left-Align the Last Row in a Centered Inline-Block Grid without Flexbox?. For more information, please follow other related articles on the PHP Chinese website!