Comment définir la taille et la position de la grille spécifiée en CSS-Questions et réponses frontales-php.cn

Comment définir la taille et la position de la grille spécifiée en CSS

醉折花枝作酒筹

Libérer： 2021-08-13 17:36:16

original

3433 Les gens l'ont consulté

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>

Copier après la connexion

Le résultat de ce petit exemple est

Comment définir la taille et la position de la grille spécifiée en CSS

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 sont spécifiées, alors la valeur avant la barre oblique est spécifiée comme début de ligne de grille et la valeur après la barre oblique est spécifiée comme valeur de fin de ligne de grille.

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;

Copier après la connexion

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!