Utilisation du CSS moderne pour construire une grille d'image réactive

Cet article explore les techniques de maîtrise de l'espacement entre les colonnes dans des dispositions de grille réactives, en utilisant une galerie d'images réactive comme exemple pratique.

Pour plus d'informations sur les dispositions réactives, affichez notre screencast: Création de plusieurs dispositions de colonnes dans Flexbox.

Prise des clés:

• Les dispositions réactives personnalisées sont réalisables en contrôlant avec précision l'espacement entre les colonnes, comme démontré avec la galerie d'images réactive.
• La méthode display: inline-block crée des galeries d'images réactives; Définition de la taille de la police du parent sur zéro supprime l'espacement par défaut du bloc en ligne.
• Flexbox résout efficacement les problèmes de mise en page courants, créant des colonnes de hauteur égale sur toutes les tailles d'écran, simplifiant le contrôle d'espacement inter-colonnes dans les grilles d'image réactives.
• Les requêtes multimédias et les dispositions de grille CSS permettent des grilles d'image réactives, en appliquant différentes règles CSS en fonction des caractéristiques de l'appareil (taille de l'écran).

Construire une disposition réactive:

Sur les écrans plus grands, la galerie ressemble à ceci:

sur des écrans plus petits:

le balisage simple:

<div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
  </a>
  <!-- ...more images... -->
</div>

Plusieurs méthodes de mise en page y parviennent. Avant d'explorer deux, réitérons les exigences:

• Disposition à deux colonnes sur des écrans moyens et plus petits.
• Espacement inter-colonnes 8px.

en utilisant inline-block:

La méthode display: inline-block construit la galerie. Considérez ce CSS:

div {
  font-size: 0;
}

a {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }

  a:nth-of-type(2n) {
    margin-right: 8px;
  }

  a:nth-of-type(4n) {
    margin-right: 0;
  }
}

Explication:

L'espacement par défaut en ligne en ligne est remplacé en définissant la taille de la police du parent à zéro. Les tailles de police des éléments enfants peuvent nécessiter une réinitialisation (pas ici).

Les petits écrans ont une disposition à deux colonnes avec espacement de 8px. Calcul de la largeur de la colonne:

• Espace inter-colonnes total par ligne: 1 * 8px = 8px (8px, pas 16px, car la marge de droite est supprimée de chaque deuxième colonne).
• Largeur de la colonne: calc(50% - 4px) (4px = 8px / 2).

Les grands écrans ont une disposition à quatre colonnes avec espacement de 8px. Calcul de la largeur de la colonne:

• Espace inter-colonnes total par ligne: 3 * 8px = 24px (24px, pas 32px, car la marge de droite est supprimée de chaque quatrième colonne).
• Largeur de colonne: calc(25% - 6px) (6px = 24px / 4).

Voir la démo de codepen pour la méthode inline-block.

Utilisation de flexbox:

La solution inline-block présente des inconvénients. L'ajout de légendes en démontre un:

Marquage mis à jour:

<div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
  </a>
  <!-- ...more images... -->
</div>

Galerie de grands écrans avec légendes:

Les hauteurs inégales sont résolues avec Flexbox. Mettez à jour le CSS de l'élément parent:

div {
  font-size: 0;
}

a {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }

  a:nth-of-type(2n) {
    margin-right: 8px;
  }

  a:nth-of-type(4n) {
    margin-right: 0;
  }
}

Le résultat est des colonnes de hauteur égal sur tous les écrans. Exemple d'écran grand écran:

Voir la démo Codepen à l'aide de Flexbox avec des légendes améliorées.

La propriété

Flexbox justify-content ne crée pas directement cette mise en page. space-between et space-around entraînent une distribution maladroite sur la dernière ligne. CSS:

<div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
    <figcaption>Some text here</figcaption>
  </a>
  <!-- ...more images... -->
</div>

Aucun margin-right n'est nécessaire; justify-content gère la distribution des éléments.

Voir la démo de codepen à l'aide de la propriété justify-content.

Conclusion:

Ce message détaille les techniques de contrôle de l'espacement inter-colonnes dans des grilles d'image réactives. Alors que inline-block suffit, Flexbox est plus facile et plus pratique, en particulier avec calc().

En savoir plus sur les dispositions de Flexbox dans notre screencast: Création de plusieurs dispositions de colonnes dans Flexbox.

(La section FAQS a omis pour la concision, car c'est une répétition de questions de conception réactives courantes.)

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!