Conseil rapide: comment aligner les lignes de colonne avec le sous-réseau CSS

Ce didacticiel CSS Grid Sub-Prid démontre l'alignement du contenu dans les boîtes de frères et sœurs. Il aborde la question des composants internes mal alignés dans des boîtes disposées horizontalement, même lorsque les boîtes elles-mêmes sont correctement dimensionnées à l'aide de la grille.

La solution exploite la propriété CSS Grid subgrid. Cela permet aux grilles internes de hériter de la structure de la colonne de leur grille parent, garantissant un alignement cohérent.

Étape 1: Configuration de base

Le HTML utilise un parent <article></article> contenant trois éléments <section></section>, chacun avec un <h1></h1>, <ul></ul> et <div>. Le CSS initial définit le parent comme une grille avec trois colonnes égales: <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-css&quot;&gt;article { display: grid; grid-template-columns: 1fr 1fr 1fr; }&lt;/code&gt;</pre> <p> <img src="https://img.php.cn/upload/article/000/000/000/173897521347074.jpg" alt="Quick Tip: How to Align Column Rows with CSS Subgrid "> </p> <p> <strong> Étape 2: Activation de la sous-grille </strong> </p> <p> pour utiliser <code>subgrid, chacun <section></section> doit également être une grille:

<code class="language-css">section {
  display: grid;
}</code>

Cela fait que le contenu dans chaque section remplit sa colonne respective.

Étape 3: Alignement avec la sous-grille

L'étape cruciale est de définir grid-template-rows: subgrid; et grid-row: span 3; dans le <section></section> CSS:

<code class="language-css">section {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* or grid-row: 1 / 4 */
  gap: 0; /* removes inherited gap */
}</code>

grid-template-rows: subgrid; fait que la grille intérieure hérite de la structure de ligne du parent. grid-row: span 3; s'assure que le contenu intérieur s'étend sur toutes les lignes. gap: 0; supprime tout espacement hérité de la grille parent.

Compatibilité du navigateur:

La prise en charge des sous-grilles est désormais excellente dans les principaux navigateurs.

Ressources supplémentaires:

• référence du sous-réseau MDN
• Grille par l'exemple de démos de sous-grille
• Explication de la sous-grille de Rachel Andrew

Cette version améliorée fournit une explication plus concise et structurée, en se concentrant sur les étapes clés et en incorporant les images directement dans la marque. La conclusion est également liée à des ressources pertinentes pour plus d'apprentissage.