[Résolu] Grid : ajout de lignes suivant l'emplacement des elements

Salut

Il m'arrive un truc que je n'arrive pas a comprendre. Deja voici les codes :

HTML

<div class="accueil-block-intro">

	<img src="http://www.sorgin-informatique.com/images/accueil/accueil-img-intro.jpg" alt="Clavier d'ordinateur portable." />
	
	<p>Nihil opus est exemplis hoc facere longius. Hic ambiguo ludimur. Immo alio genere; A mene tu? Cyrenaici quidem non recusant;<br />Nunc haec primum fortasse audientis servire debemus. Sumenda potius quam expetenda. Quis hoc dicit?</p>
	
</div>

CSS

.accueil-block-intro {
	display:grid;
	grid-template-columns: 1fr auto;
}

.accueil-block-intro p {grid-column:1;}
.accueil-block-intro img {grid-column:2;}

Voir aussi sur JSFiddle.

Ma table est constituée uniquement de deux colonnes mais je comprend pas pourquoi il y a deux lignes... par contre si je met P dans la seconde colonne et IMG dans la première j'ai bien qu'une seule ligne.
Modifié par schtroumph (31 Aug 2020 - 16:07)

gcyrillus a écrit :

Les éléments vont être placé dans les cellules au fur et à mesure. img dans la seconde colonne de la première ligne, puis le paragraphe dans la première colonne sitôt qu'il y a une case de vide après l'image ... sur la deuxième ligne.

Ah ok je comprends pourquoi ca fait ca !

gcyrillus a écrit :

Pour modifier cette façon de remplir ta grid, tu peut indiquer au <p> de se situer aussi dans la première ligne :

.accueil-block-intro p {grid-column:1;grid-row:1;}

Je ne savais pas qu'il etait possible de mettre un grid-row (ou grid-column) alors qu'il n'y a pas de grid-template-rows (ou de grid-template-columns).

gcyrillus a écrit :

Ou d'indiquer à l’algorithme de placement de remplir les trous.

.accueil-block-intro {
	display:grid;
	grid-template-columns: 1fr auto;
  grid-auto-flow:column dense 
}

https://jsfiddle.net/5gt7rbpa/

https://developer.mozilla.org/fr/docs/Web/CSS/grid-auto-flow

L'algorithme de placement automatique utilisera une méthode de « regroupement dense » où il essaie de remplir les trous dans la grille si des éléments plus petits arrivent ensuite. De fait, on peut obtenir une impression de désordre alors qu'il s'agit simplement du comblement des espaces libres.

Si cette valeur est absente, le moteur utilisera un algorithme simple qui ne fait que se déplacer vers l'avant, sans revenir vers les espaces vides. De cette façon, les éléments apparaitront nécessairement dans l'ordre mais pourront laisser des trous.

Est-ce qu'il y a une methode " mieux " que l'autre ou pas specialement ?

schtroumph a écrit :

Est-ce qu'il y a une methode " mieux " que l'autre ou pas specialement ?

Tout dépend , si tu souhaite mettre IE11 dans le coup, il faudra indiquer clairement dans quelle cellule de ton grid il faudra que tel ou tel élément s'affiche, sinon il s'empileront tous dans la première cellule.

Il faudra aussi te servir de prefix: Test version IE11 https://jsbin.com/terowimaxo/1/edit

Si tu doit integrer IE11 , pour la cohérence de ton code, utilise la version indiquant les cellules de la grid. La relecture et mise à jour du code sera plus simple.

Enfin, il n'y a pas forcement de meilleur méthode, même si, sans vouloir faire d'histoires, je suis tenté de dire que les plus courtes sont les meilleurs.

Cdt
Modifié par gcyrillus (02 Sep 2020 - 16:14)