How to Left-Align the Last Row in a Centered Inline-Block Grid?

Left-Aligned Last Row in a Centered Grid of Elements

Problem:

A grid of elements set to display inline-block is horizontally centered, but the last row is not left-aligned. Instead, it is centered like the other rows.

Solution with display inline-block:

This adaptive grid is simpler to implement and adapt.

Example:

<div>

html, body {
    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;
    }
}

Explanation:

• The grid container (#container) is centered using margin: 0 auto.
• The blocks are set to display: inline-block and have equal widths and margins.
• The container's width is adjusted through media queries to maintain centered alignment on different screen sizes.

The above is the detailed content of How to Left-Align the Last Row in a Centered Inline-Block Grid?. For more information, please follow other related articles on the PHP Chinese website!