28172 sujets

CSS et mise en forme, CSS3

[Résolu] CSS3 grid layout

Bonjour à vous tous,

Je m'étais déjà tourné vers vous au sujet des flex box et notamment du display: flex; Maintenant, je m'attaque au display: grid;

Considérons le code HTML suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <link href="css/styles.css" type="text/css" rel="stylesheet">
    <title>CSS3 Grid Layout</title>
</head>
<body>
	<div class="container">
		<div class="couleur_de_fond">
			<h1 class="rouge">Rouge</h1>
			<p>
				p<br>p<br>p<br>p<br>p<br>
			</P>
		</div>
		<div class="couleur_de_fond">
			<h1 class="bleu">Bleu</h1>
			<p>
				p
			</p>
		</div>
		<div class="couleur_de_fond">
			<h1 class="jaune">Or</h1>
			<p>
				p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>
			</p>
		</div>
		<div class="couleur_de_fond">
			<h1 class="vert">Vert</h1>
			<p>
				p<br>p<br>p<br>p<br>p<br>
			</p>
		</div>
		<div class="couleur_de_fond">
			<h1 class="noir">Noir</h1>
			<p>
				p<br>p<br>p<br>p<br>p<br>p<br>
			</p>
		</div>
		<div class="couleur_de_fond">
			<h1 class="orange">Orange</h1>
			<p>
				p
			</P>
		</div>
		<div class="couleur_de_fond">
			<h1 class="rose">Rose</h1>
			<p>
				p<br>p<br>p<br>p<br>p<br>p<br>p<br>
			</p>
		</div>
		<div class="couleur_de_fond">
			<h1 class="magenta">Magenta</h1>
			<p>
				p<br>p<br>
			</p>
		</div>
		<div class="couleur_de_fond">
			<h1 class="marron">Marron</h1>
			<p>
				p<br>p<br>
			</p>
		</div>
		<div class="couleur_de_fond">
			<h1 class="citron_vert">Citron vert</h1>
			<p>
				p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>
			</p>
		</div>
		<div class="couleur_de_fond">
			<h1 class="pourpre">Pourpre</h1>
			<p>
				p<br>p<br>
			</p>
		</div>
		<div class="couleur_de_fond">
			<h1 class="bleu_canard">Bleu canard</h1>
			<p>
				p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>
			</p>
		</div>
	</div>
</body>
</html>

Et considérons le code CSS suivant :

*{
	margin: 0;
	padding: 0;
}

.container{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  grid-gap: 10px 15px;
  align-items: start;
  grid-auto-flow: row;
  grid-template-areas: none;
}

.couleur_de_fond{
	background-color: salmon;
}

h1{
	background-color: red;
	text-align: center;
	padding: 5px;
	color: white;
}

p{
	padding: 20px;
	color: white;
}

/* ------------------------ */
/* ----- COULEURS ----- */
/* ------------------------ */

.rouge{background-color: red;}
.bleu{background-color: blue;}
.jaune{background-color: gold;}
.vert{background-color: green;}
.noir{background-color: black;}
.orange{background-color: orange;}
.rose{background-color: pink;}
.magenta{background-color: magenta;}
.marron{background-color: brown;}
.citron_vert{background-color: lime;}
.pourpre{background-color: purple;}
.bleu_canard{background-color: teal;}


J'obtiens le résultat suivant :

upload/1643105660-62242-ok1.jpg
Mais, c'est ce résultat que je voudrais obtenir :

upload/1643105691-62242-ok2.jpg
Voici maintenant les sources sur lesquelles je me suis appuyé pour apprendre à manipuler la grille CSS :
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
https://www.pierre-giraud.com/grille-css-guide-complet-grid-layout/
https://la-cascade.io/css-grid-layout-guide-complet/
https://www.pierre-giraud.com/grille-css-guide-complet-grid-layout/

Vous l'avez compris, ce que je cherche c'est une propriété CSS3 qui permette de remonter les blocs vers le haut de sorte à occuper l'espace vide et non s'aligner, horizontalement, sur le bloc précédent le plus long. L'un de vous saurait me dire si cette propriété existe ? Je n'ai rien trouvé de semblable dans les 4 liens ci-dessous même chez MDN qui est pourtant la référence en développement web (1er lien).

J'ai l'impression que pour ce que je veux obtenir, je dois passer par du Javascript. Or, je n'ai pas terminé mon apprentissage du HTML et CSS, je voudrais donc éviter d'utiliser du code Javascript pour le moment parce que je ne connais pas du tout ce langage.

Merci pour votre sollicitude.
Modifié par ObiJuanKenobi (25 Jan 2022 - 11:36)
Modérateur
Bonjour,

Je verrais plutôt ici une solution avec la propriété css columns.

Amicalement,
Modifié par parsimonhi (25 Jan 2022 - 16:17)
Modérateur
Salut,

Oui ce n'est pas du ressort du grid. C'est un effet sur lequel on se casse les dents depuis un moment... il y aura peut etre une solution simple dans le futur (j'ai vu passer des draft je crois) mais pour le moment...

Tu peux diriger tes recherches vers le terme "masonry" pour te rapprocher de solutions existantes. Les columns CSS suggéré par parsimonhi en font parti. Mais sinon dans la plupart des solution CSS pur il faut un équilibre dans les hauteurs ou un petit truc contraignant qui feinte un peu le positionnement logique et qui, parfois, peut rester gênant.

Pouvoir enchainer les bloc en fonction à la fois de leur hauteur, de la hauteur totale de la colonne ca demande des calculs et un ordonnancement que le CSS ne peut pas encore assumer.
On m'a déjà donné des liens pour consulter les solutions Masonry mais c'est à la fois complexe et cela ne correspond pas à ce que je cherche. De plus, certaines solutions demandent d'utiliser des fonctions Javascript. Je veux éviter pour le moment d'utiliser ce langage parce que je ne le connait pas.

Par contre, j'ai trouvé une solution provisoire adaptée aux mises en page avec peu de cartouches. Mais si on a des milliers et des milliers de cartouches, ce sera très compliqué (genre comme le site web Pinterest).

Ma solution est la suivante : je me suis dit que je pouvais mettre une grid dans une grid. Et ça marche !

Voilà le nouveau code HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <link href="css/styles.css" type="text/css" rel="stylesheet">
    <title>CSS3 Grid Layout</title>
</head>
<body>
	<div class="container">
		<div class="container2">
			<article class="couleur_de_fond">
				<h1 class="rouge">Rouge</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>
				</P>
			</article>
			<article class="couleur_de_fond">
				<h1 class="bleu">Bleu</h1>
				<p>
					p
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="jaune">Or</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>
				</p>
			</article>
		</div>
		
		<div class="container2">
			<article class="couleur_de_fond">
				<h1 class="vert">Vert</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="noir">Noir</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>p<br>
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="orange">Orange</h1>
				<p>
					p
				</P>
			</article>
		</div>
		
		<div class="container2">
			<article class="couleur_de_fond">
				<h1 class="rose">Rose</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>p<br>p<br>
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="magenta">Magenta</h1>
				<p>
					p<br>p<br>
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="marron">Marron</h1>
				<p>
					p<br>p<br>
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="citron_vert">Citron vert</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>
				</p>
			</article>
		</div>
		
		<div class="container2">
			<article class="couleur_de_fond">
				<h1 class="pourpre">Pourpre</h1>
				<p>
					p<br>p<br>
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="bleu_canard">Bleu canard</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>
				</p>
			</article>
		</div>
		
		<div class="container2">
			<article class="couleur_de_fond">
				<h1 class="rouge">Rouge</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>
				</P>
			</article>
			<article class="couleur_de_fond">
				<h1 class="bleu">Bleu</h1>
				<p>
					p
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="jaune">Or</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>
				</p>
			</article>
		</div>
	</div>
</body>
</html>

Et voici le nouveau code CSS :

*{
	margin: 0;
	padding: 0;
}

.container{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  grid-gap: 10px 15px;
  align-items: start;
  grid-auto-flow: row;
  grid-template-areas: none;
}

.container2{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10px 15px;
}

.couleur_de_fond{
	background-color: salmon;
}

h1{
	background-color: red;
	text-align: center;
	padding: 5px;
	color: white;
}

p{
	padding: 20px;
	color: white;
}

/* ------------------------ */
/* ----- COULEURS ----- */
/* ------------------------ */

.rouge{background-color: red;}
.bleu{background-color: blue;}
.jaune{background-color: gold;}
.vert{background-color: green;}
.noir{background-color: black;}
.orange{background-color: orange;}
.rose{background-color: pink;}
.magenta{background-color: magenta;}
.marron{background-color: brown;}
.citron_vert{background-color: lime;}
.pourpre{background-color: purple;}
.bleu_canard{background-color: teal;}


J'ai juste ajouté une nouvelle classe .container2 dans les CSS et dans le HTML j'ai ré-assemblé les <h1> et les <p> dans un <article> qui se trouve dans une <div class="container2"> lui même dans une <div class="container">.

La classe .container a une propriété grid-template-columns: repeat(5, 1fr); (5 colonnes) et la classe .container2 a une propriété grid-template-columns: repeat(1, 1fr); (une seule colonne).

Merci pour votre intervention.
Modifié par ObiJuanKenobi (25 Jan 2022 - 17:37)
Modérateur
ObiJuanKenobi a écrit :
On m'a déjà donné des liens pour consulter les solutions Masonry mais c'est à la fois complexe et cela ne correspond pas à ce que je cherche. De plus, certaines solutions demandent d'utiliser des fonctions Javascript. Je veux éviter pour le moment d'utiliser ce langage parce que je ne le connait pas.

Alors on a pas du comprendre ce que tu cherchais (et ou c'est complexe)

ObiJuanKenobi a écrit :
Par contre, j'ai trouvé une solution provisoire adaptée aux mises en page avec peu de cartouches. Mais si on a des milliers et des milliers de cartouches, ce sera très compliqué (genre comme le site web Pinterest).

On est d'accord que tu as mis tes cartouches en dur dans le HTML et qu'elle ne sont pas apparu les unes après les autres dans l'ordre de publication par exemple ?

ObiJuanKenobi a écrit :
Ma solution est la suivante : je me suis dit que je pouvais mettre une grid dans une grid. Et ça marche !

J'ai juste ajouté une nouvelle classe .container2 dans les CSS et dans le HTML j'ai ré-assemblé les &lt;h1&gt; et les &lt;p&gt; dans un &lt;article&gt; qui se trouve dans une &lt;div class="container2"&gt; lui même dans une &lt;div class="container"&gt;.

La classe .container a une propriété grid-template-columns: repeat(5, 1fr); (5 colonnes) et la classe .container2 a une propriété grid-template-columns: repeat(1, 1fr); (une seule colonne).

Une grid a une colonne c'est une div normale hein, pas besoin de grid pour faire ca... 

.container{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  grid-gap: 10px 15px;
  align-items: start;
  grid-auto-flow: row;
  grid-template-areas: none;
}

.container2{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10px 15px;
}

peut tenir en :
.container{
  display: flex;
  gap: 10px;
}
.container2{
  flex: 1;
}

demo : https://jsfiddle.net/hxv63o01/2/

Si ca répond à ton problème c'est tres bien, mais si c'est dans le cadre d'un blog par exemple ou tes article vont sortir automatiquement les uns apres les autres d'une boucle, il va bien falloir les placer dans une des 4 colonnes... c'est la le soucis technique, pas tellement de les empiler.

Bonne soirée
Oui, j'ai bien placé les cartouches moi-même dans le HTML. Mais si j'ai un projet où les cartouches doivent s'insérer automatiquement dans les colonnes, à partir d'une base de données, et par milliers, je suppose que ça va être problématique d'utiliser ma solution. Je ne peux pas l'affirmer de façon sûre parce que je ne sais pas développer en PHP. Mais pour ce que j'ai à faire en ce moment ma solution est largement suffisante parce que je n'ai que 14 cartouches à placer manuellement.
Modifié par ObiJuanKenobi (26 Jan 2022 - 07:48)
Modérateur
ObiJuanKenobi a écrit :
Mais si j'ai un projet où les cartouches doivent s'insérer automatiquement dans les colonnes, à partir d'une base de données, et par milliers, je suppose que ça va être problématique d'utiliser ma solution.

10 ou 2000 le problème sera le même Smiley smile

ObiJuanKenobi a écrit :
pour ce que j'ai à faire en ce moment ma solution est largement suffisante parce que je n'ai que 14 cartouches à placer manuellement.

Très bien alors ! Smiley smile

Bonne journée
Sujet clos
Aller à