Grille CSS vs Flexbox : quel est le meilleur pour créer des carrés réactifs ?

Création d'une disposition de grille réactive avec des carrés dynamiques

Vous souhaitez construire une disposition de grille avec des carrés réactifs, en vous assurant que chaque carré a une hauteur égale à sa largeur et séparé par une gouttière. Pour y parvenir, vous envisagez d'utiliser CSS Grid ou Flexbox.

CSS Grid

En utilisant CSS Grid, vous pouvez définir les colonnes de la grille et la hauteur. des carrés en pourcentage de la surface de la grille. Voici un exemple :

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

.square {
    height: 100%;
}

Flexbox

Avec Flexbox, vous pouvez créer une mise en page réactive à l'aide de la propriété flex-wrap. Pour vous assurer que les carrés conservent un rapport hauteur/largeur carré, vous pouvez utiliser l'astuce du fond de rembourrage ou créer un pseudo-élément pour définir la hauteur appropriée.

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

.square {
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    border: 1px solid;
    box-sizing: border-box;
}

.square::before {
    content: '';
    display: block;
    padding-top: 100%;
}

Considérations supplémentaires

• Pour centrer le texte dans les carrés, vous pouvez utiliser la commande display : flex; propriété avec justifier-contenu : centre ; et align-items: center;.
• L'astuce du rembourrage en bas peut donner des résultats peu fiables dans les anciens navigateurs.
• Pour garantir des proportions carrées cohérentes, positionnez l'élément de contenu absolument à l'intérieur des carrés.

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!