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
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">margin:0; padding:0;
}
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; }
}
<div class="code" style="position:relative; padding:0px; margin:0px;"><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!
The difference between get and post
cad2012 serial number and key collection
How to light up Douyin close friends moment
What software is soul?
What are the sorting methods?
What is the difference between pass by value and pass by reference in java
Detailed explanation of quartz configuration file
How much is Dimensity 6020 equivalent to Snapdragon?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
