Comment créer des carrés réactifs dans une disposition en grille à l'aide de CSS Grid et Flexbox ?

Comment créer une disposition en grille avec des carrés réactifs

Dans cet article, nous verrons comment créer une disposition en grille avec des carrés réactifs à l'aide de CSS.

Approche CSS Grid

Pour CSS Grid, nous pouvons utiliser une combinaison de colonnes de modèle de grille et de astuce de remplissage en bas pour créer des carrés réactifs. L'astuce du rembourrage inférieur attribue une valeur en pourcentage au remplissage du carré, définissant ainsi son rapport hauteur/largeur sur 1:1.

.square-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

.square {
    padding-bottom: 100%;
}

Approche Flexbox

Avec Flexbox, nous pouvons utiliser un remplissage similaire -technique du bas pour créer des carrés réactifs. Nous pouvons définir les éléments flexibles pour qu'ils aient des proportions égales en attribuant une valeur en pourcentage à leur remplissage.

.square-container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    padding-bottom: 100%;
}

Notez que les deux approches nécessitent l'utilisation de pseudo-éléments ou de wrappers supplémentaires pour garantir que le pourcentage de remplissage est appliqué au carré lui-même, et non à son élément flexible ou de grille.

Utiliser les requêtes multimédias pour la réactivité

Pour réduire la disposition de la grille à une seule colonne sur des écrans plus petits, nous pouvons utiliser des requêtes multimédias.

@media (max-width: 768px) {
    .square-container {
        grid-template-columns: 100%;
        flex-direction: column;
    }
}

Conclusion

En combinant ces techniques, nous pouvons créer une disposition en grille avec des carrés réactifs qui maintient un rapport hauteur/largeur cohérent sur différentes tailles d'écran et orientations d'appareils.

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!