Comment créer une grille centrée avec une dernière ligne alignée à gauche en utilisant uniquement CSS ?

Grille centrée avec dernière ligne alignée à gauche sans Flexbox

CSS avec affichage en bloc en ligne

Envisagez une conception de grille adaptative plus simple avec un balisage minimal et CSS, ce qui le rend polyvalent pour la mise en œuvre et la personnalisation.

Pour une dernière ligne alignée à gauche dans une grille centrée où les colonnes varient dynamiquement en fonction de la largeur du navigateur, CSS peut obtenir cet effet sans utiliser Flexbox.

Voici le code :

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;
    }
}

<div>

Cette solution ajuste automatiquement le nombre de colonnes et de lignes en fonction de la largeur disponible du navigateur tout en conservant l'alignement centré et en alignant à gauche la dernière ligne. Il est compatible IE9 et adapté à une mise en œuvre dans des environnements de production.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!