Utilisation de CSS GRID Pourquoi j'obtiens cet écart?

Modifiez la .item1 grid-column .item1 en 1/3 , comme ceci:

<div class="container">
        <div class="item1">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>

Fondamentalement, cela signifie qu'il commence dans la colonne 1 et se termine dans la colonne 3. Ne commençant pas dans la colonne 2 et se terminant dans la colonne 4, comme dans votre exemple.

.container {
    display: grid;
    margin: 40px;
    grid-gap: 20px;
    text-align: center;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.container div {
    background: #ff8000;

}

.container .item1 {
    grid-column: 1/3;
    grid-row: 1/2;

}

grid-column: 1 / 3;

Pourquoi ajoutez - vous même grid-template-column et grid-template-row ? Lorsque vous pouvez simplement ajouter justify-items: center; et align-items: center;

Vous devez comprendre l'algorithme de placement pour comprendre ce comportement. À partir de la spécification, vous pouvez trouver l'algorithme complet et plus identifier quand chaque élément sera traité, ce qui est la clé ici pour comprendre la différence entre les deux cas.

Les principales étapes de l'algorithme sont:

0. Générer des éléments de grille anonymes

1. Placez tout ce qui n'est pas positionné automatiquement.

2. Traitez les éléments verrouillés sur une ligne donnée.

3. Déterminez les colonnes de la grille implicite.

4. Positionnez les autres éléments de la grille.

Commençons par votre dernier exemple où vous défini une explicitement grid-colum et grid-row pour le premier élément qui en font un élément non positionné automatiquement pour que nous plaçons à l'étape (1).

Ensuite, nous passerons à l'étape (4) pour positionner les éléments restants

Le curseur de placement automatique définit le «point d'insertion» actuel dans la grille, spécifié comme une paire de lignes de grille de ligne et de colonne. Au départ, le curseur de placement automatique est défini sur les lignes de ligne et de colonne les plus en début de la grille implicite.

Donc, notre curseur est la cellule du haut / gauche et l'élément2 y sera placé et nous suivons simplement l'ordre de l'arborescence pour placer tous les autres éléments:

Pour chaque élément de la grille qui n'a pas été positionné par les étapes précédentes, dans l'ordre du document modifié:

Bien entendu, aucun élément ne chevauchera l'élément1 déjà placé et nous continuons à incrémenter le curseur pour chaque élément suivant l'algorithme.

Considérons maintenant le premier cas délicat où la seule différence est que vous n'avez pas spécifié la grid-row la grid-row et cela ne fera plus de votre élément un élément non positionné automatiquement car vous avez uniquement défini la grid-column la grid-column donc la ligne sera automatiquement défini et l'élément passera maintenant à l'étape (4) et si vous vérifiez attentivement l'étape (4), vous trouverez deux sous-étapes:

Si l'élément a une position de colonne définie:

Si l'élément a une position de grille automatique dans les deux axes:

L'élément1 considérera le premier, sera placé dans la deuxième colonne et incrémentera le curseur !. L'incrémentation du curseur est ce qui fait que le deuxième élément est placé après.

Dans votre deuxième exemple, l'élément1 n'utilisera pas le curseur car il est considéré à l'étape (1) de sorte que l'élément2 sera le premier à utiliser le curseur contrairement à votre premier exemple où élément1 sera le premier à l'utiliser.

Il convient de noter qu'à l'étape (4), nous avons deux types d'algorthim. Le "clairsemé" (le comportement par défaut) où on ne réinitialise jamais le curseur et on l'incrémente toujours ce qui crée des trous. L'algorithme "dense" qui réinitialise le curseur à chaque étape afin de remplir toutes les cellules. Pour activer l'algorithme "dense", vous devez considérer le grid-auto-flow

<div class="container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

.container {
  display: grid;
  margin: 40px;
  grid-gap: 20px;
  text-align: center;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: dense;
}

.container div {
  background: #ff8000;
}

.container .item1 {
  grid-column: 2/4;
}

dense

S'il est spécifié, l'algorithme de placement automatique utilise un algorithme de compression «dense», qui tente de combler les trous plus tôt dans la grille si des éléments plus petits apparaissent plus tard. Cela peut entraîner le désordre des articles, car cela remplirait les trous laissés par des articles plus gros.

S'il est omis, un algorithme «d'analyse» est utilisé, dans lequel l'algorithme de placement ne se déplace «vers l'avant» dans la grille que lors du placement des éléments, sans jamais revenir en arrière pour combler les trous. Cela garantit que tous les éléments placés automatiquement apparaissent «dans l'ordre», même si cela laisse des trous qui auraient pu être remplis par la ^réf.

Question connexe avec un autre comportement non intuitif expliqué avec le même algorithme: Grille CSS: comment fonctionne l'algorithme de placement automatique