Dans l'article précédent, nous avons découvert la méthode de définition de la taille de la ligne de grille, veuillez consulter "Comment définir la taille de la ligne de grille en CSS". Cette fois, nous apprendrons comment définir la taille et la position de la grille spécifiée. Vous pouvez vous y référer si nécessaire.
Avant de voir comment définir la taille des lignes de quadrillage, cette fois nous allons faire quelque chose de différent. Jetons un coup d'œil à un petit châtaignier.
<style> article { display: grid; width: 300px; height: 300px; grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr); } div{ background: rgb(208, 159, 255); background-clip: content-box; border: solid 1px rgb(208, 159, 255); padding: 10px; } div:first-child{ grid-row: 1 / span 2; } </style> </head> <body> <article> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </article> </body>
Le résultat de ce petit exemple est
Cet exemple est très similaire à l'exemple de l'article précédent. Ce sont tous les deux des cartons de 300*300 avec plusieurs cartons. seulement 8 cartons, au lieu de 9 cartons la dernière fois. Y a-t-il quelque chose de différent ? Jetons un coup d'œil à la petite boîte n°1. occupe-t-elle une très petite grille ? Pas étonnant qu'il n'y ait pas de petite boîte n°9.
Ensuite, examinons quels attributs en sont la cause. L'attribut
grid-row est une forme abrégée de grid-row-start
(en-US) 和 grid-row-end
(en-US), qui définit la taille et la position de l'unité de grille par rapport à la ligne de grille (ligne), qui peut être transmise via la ligne de base dans la disposition de la grille ( line), span (span) ou ne rien faire (auto) pour spécifier le début et la fin des lignes d'une zone de grille.
Si deux valeurs
C'est l'attribut abrégé de l'attribut suivant :
grid-row-start
grid-row-end
Jetons un coup d'œil au format syntaxique de cet attribut.
grid-row: grid-row-start / grid-row-end;
Le début de la ligne de la grille représente la ligne à partir de laquelle l'élément commence à être affiché ; la fin de la ligne de la grille représente la ligne à laquelle l'élément cesse d'être affiché, ou le nombre de lignes qu'il s'étend.
Il convient de noter que :
IE11 ne prend pas en charge la disposition automatique des cellules de la grille. À moins que -ms-grid-column et -ms-grid-row ne soient explicitement annotés, toutes les cellules se retrouveront dans la première ligne/colonne de la grille.
Apprentissage recommandé : Tutoriel vidéo CSS
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!