28172 sujets

CSS et mise en forme, CSS3

Salut,

j'essaye de reproduire le système de grille Bootstrap, mais via css grid et non flex.
Jusqu'ici tout va bien, j'ai ma grille avec mes 12 colonnes, mes classes col- et tout le bazar Smiley smile

J'ai juste un pb, je n'arrive pas à centrer horizontalement, au besoin via une classe, mes colonnes.

J'ai beau essayé "justify-content:center" ou "justify-items:center" sur mon conteneur parent en display grid, rien ne se passe. Soit mes colonnes disparaissent soit elles restent alignées à gauche.

Est-ce possible en fait ?

Merci upload/1655113934-46467-capture.jpg
Bonjour,

Oui, bien sûr que c'est possible. Exemple :
.gridSurElementParent {
  display: grid;
  grid-template-columns: minmax(1em, 1fr) minmax(0, 90em) minmax(1em, 1fr); /* @bugfix @affected Chrome & Firefox @note Valeur 1fr définit si minimum car les navigateurs se comportent différemment, Chrome affecte la largeur d'une gouttière, Firefox affecte à 0. */
}
Bonjour Olivier,

ma grille de départ et mes colonnes sont définies ainsi :


.row {
  display:grid;
  grid-template-columns: repeat(12, 1fr);
}

@for $i from 1 through 12 {
  [class*="col-#{$i}"] {
    grid-column: auto / span #{$i};
  }
}


Du coup ta solution ne semble pas correspondre à ce que je recherche. Ou alors je ne m'y prends pas correctement.
Modérateur
Salut !

Bootstrap te ment Smiley lol Bien qu'ils appellent ça grid mais c'est du flexbox :
Bootstrap a écrit :
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

https://getbootstrap.com/docs/4.0/layout/grid/

Ce que tu cherche a faire est assea compliqué en grid car tu divise en 12 colonnes de 1 à 12 et le premier élément va dans la 1, le second dans la 2 etc. Tu peux toi meme les replacer à la main en disant le 1 va dans la col 5, le 2 dans la 6 etc mais c'est galère.... sauf si tu as une seule colonne centrale et que tu sais exactement les colonnes occupées...

BREF, si tu veux un truc un peu automatique lis bien la doc de bootstrap et inspire t'en en regardant ca sous le scope du flex (et avec l'inspecteur de code sur les exemple qui t'interessent) :
https://jsfiddle.net/97nmvge3/
Modifié par _laurent (13 Jun 2022 - 14:23)
Sinon, pour revenir à une solution sans élément parent :
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(12, minmax(0, 7em)) minmax(0, 1fr); /* @bugfix @affected Chrome & Firefox @note Valeur 1fr (ou 0) définit si minimum car les navigateurs se comportent différemment, Chrome affecte la largeur d'une gouttière, Firefox affecte à 0. */
}

Avec 14 colonnes donc, les deux de chaque côté servant pour le centrage.

Le codepen : Grids
Modérateur
Pedrothelion a écrit :
Salut,

j'essaye de reproduire le système de grille Bootstrap, mais via css grid et non flex.
Jusqu'ici tout va bien, j'ai ma grille avec mes 12 colonnes, mes classes col- et tout le bazar Smiley smile

J'ai juste un pb, je n'arrive pas à centrer horizontalement, au besoin via une classe, mes colonnes.

J'ai beau essayé "justify-content:center" ou "justify-items:center" sur mon conteneur parent en display grid, rien ne se passe. Soit mes colonnes disparaissent soit elles restent alignées à gauche.

Est-ce possible en fait ?

Merci upload/1655113934-46467-capture.jpg


Si tu as 12 colonnes (donc 12 case/cellules) et que tu n'en rempli que 3, ce sont les trois première par défaut qui le seront, les 9 autres sont bel et bien là, mais vides.
Ils nous manque le grid-template-columns que tu appliques , mais vraisemblablement tu indiques une répétition de 12 colonnes de même ratio/largeur aussi dans ce cas de figure. Du coup ce que tu cherches à centrer, c'est 12 colonnes et pas que les 3 ou il y a quelque-chose, les 9 autres existent et attendent d'être remplies.

Comment faire?
la logique de grid te permet de placer un élément dans une case/cellule de ta grille indépendamment de sa position dans le flux. Grid créer une grille dans laquelle les enfants iront se placer tour à tour . En plaçant le premier élément dans une colonne , les suivant occuperons les places suivantes (si grid-auto-flow n'est pas redéfini en row dense)

Pour 12 colonnes, tu peut tester :nth-last-child(n):first-child de 1 a 11 et les replacer dans la colonne adéquate.
Pour les séries impaires, il faudra aussi ajuster un déplacement visuel pour chevaucher les colonnes prédéfinies.

Exemple https://codepen.io/gc-nomade/pen/PoQXQZa (centrage en passant de 1 a 11 colonnes sur une grille de 12 colonnes)

Pour le centrage, l'idée est d'utilisé une class avec un nom le plus explicite possible, j'ai pris item-justify-center qui ressemble à ce qui tu veut sans reprendre le nom d'une classe/règle existante.
et à partir de cette class, on se sert des sélecteurs et règles suivantes

:nth-last-child(n):first-child pour le test/comptage d’éléments

grid-column pour le placement dans la grille

transform pour le décalage visuel des séries impaires.

Maintenant, si dans ton codage, tu as inclut des class pour l’étalement sur plusieurs colonnes et que tu as choisis grid car tu veut tout ranger dans plusieurs colonnes et ligne d'un coup, ça ne marchera pas.

Si tu envisage de partir sur une structure HTML qui ne dessine que des lignes, grid n'as pas vraiment de raisons d'être utilisé. Les deux (flex et grid) complètent la panoplie de MR CSS, mais font des choses différentes.

CDT
Modifié par gcyrillus (13 Jun 2022 - 15:29)
_Laurent effectivement Bootstrap utilise flex. J'aime beaucoup leur système de grille anticipatif et configurable, même si je sais que beaucoup de gens "crachent" dessus.

Je m'intéresse de plus en plus au mode grid, et j'essayais du coup de créer une grille dans le même esprit. Mais d'après tout ce que vous me dites c'est un fonctionnement totalement différent, et du coup non adapté à ce petit projet.

Merci à tous en tous les cas pour vos réponses et détails. Je vais regarder tout ça de plus près Smiley smile
Bonjour,
en regardant le codepen proposé par gcyrillus, je me rends compte que j'avais développé un peu la même chose pour le plan d'un de mes sites il y a deux ou trois années, en flexbox. L'implémentation est souple, on peut augmenter le nombre de colonnes dans le html, tout se centre. Est-ce que ça peut aider ?
<div class="wrapper"> 
  <div>Clinique jembes</div>
</div>
<div class="wrapper">
 <div><a href="index.html">Accueil</a></div>
</div>
<div class="wrapper">
  <div><a href="Jembes.html">Jembés</a></div>
  <div><a href="Vulcain.html">Vulcain, presse &agrave; jembés</a></div>
</div>
<div class="wrapper">
  <div><a href="Jelidunun.html">Jelidunun</a></div>
  <div><a href="Dunun-PVC.html">Dununs PVC</a></div>
</div>
<div class="wrapper">
  <div><a href="Yabara.html">Yabara</a></div>
  <div><a href="Avertissement.html">Avertissement</a></div>
  <div><a href="Faire-Soi-Meme.html">Le faire soi-même</a></div>
  <div><a href="Site.html"> Vie privée </a></div> 
</div>
<div class="wrapper">
  <div><a href="Copyright.html">Copyright</a></div>
  <div><a href="Mentions.html">Mentions légales</a></div>
  <div><a href="Goni.html">Goni</a></div>
  <div><a href="Baton.html">Bâton</a></div>
  <div><a href="Plan.html">Plan du site</a></div>

.wrapper {
  display: flex;}
.wrapper > div {
 	font-size:1em;
	color:#000000;
	text-align:center;
	background:#FFFACD;
  	margin:.1em;
  	margin-top:1em;
  	padding:.3em;
  	border-radius:3px;
  	flex: 1;}

upload/1655133295-67790-plan.png
Bonjour,
en regardant le codepen proposé par gcyrillus, je me rends compte que j'avais développé un peu la même chose pour le plan d'un de mes sites il y a deux ou trois années, en flexbox. L'implémentation est souple, on peut augmenter le nombre de colonnes dans le html, tout se centre. Est-ce que ça peut aider ?

Hello,

en flex pas de problème j'ai déjà codé ma propre version de bootstrap hyper simplifiée, mais merci Smiley cligne
Modifié par Pedrothelion (13 Jun 2022 - 18:21)
Pedrothelion a écrit :
en regardant le codepen proposé par gcyrillus, je me rends compte que j'avais développé un peu la même chose pour le plan d'un de mes sites il y a deux ou trois années, en flexbox.

Moi aussi je l'avais fait en flexbox 12 col, avec marges négatives et tout et tout... mais depuis grid j'ai beaucoup simplifié et j'ai arrêté la logique des 12 colonnes.

A noter que gcyrillus avait aussi joué avec gridlayout en partant sur 12 colonnes : CodePen