26909 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde,

Je dispose d'une grille en CSS Grids Layout qui est codée de la manière suivante en CSS :
.accueil #apparition .grid-parent {
	display:grid;
	width:105vw;
	grid-template-columns: repeat(3, 1fr);
  	grid-row-gap: 5px;
	grid-column-gap: 6px;
	margin-left:-25px;
	margin-right:-10px;
}


Il s'agit donc d'une grille de 3 colonnes de largeur 1fr qui se répète sur chaque ligne.
Cependant j'aimerais qu'un des éléments de ma grille soit disposé dans 2 colonnes. Est-ce possible ?

Ci-dessous, un exemple de ce que j'ai actuellement. upload/1555584553-65880-screenshot7.jpg

J'aimerais que la zone rouge prenne la largeur de 2 colonnes (pour le moment elle n'en prend qu'une). J'ai pensé à changer l'organisation de base de la grille en créant directement un template de ce type :
  grid-template-areas: "a b c"
                       "d e e"

Cependant, j'aimerais qu'on puisse y ajouter des éléments si besoin par la suite sans nécessairement respecter ce schéma.

Pour la rappeler, ma question finale est donc : est-il possible de placer un élément (dans son CSS propre) sur 2 colonnes dans ce type de grille ?

Merci d'avance à ceux qui prendront du temps pour m'aider !
Comme tu peux l'imaginer j'ai passé beaucoup de temps sur les docs en cherchant une solution avant de poster, et je continue de les parcourir. Malheureusement je ne trouve rien sur ce cas précis, peut-être que c'est parce que je me perds dans la densité d'informations des docs Smiley ohwell
Administrateur
Bonjour,

En fait, ton CSS correspond exactement à ce que tu souhaites obtenir.

Il suffit de placer ton élément dans ta zone "e" et il occupera les deux emplacements prévus :
.element {
  grid-area: e;
}

Je ne suis pas sûr d'avoir compris ta question, du coup.

Voici un exemple en ligne : https://codepen.io/raphaelgoetter/pen/wZmxWE?editors=1100

Depassage a écrit :
A un moment si tu veux utiliser grid il va falloir lire la doc. Smiley rolleyes
... ou un livre ... #placementdeproduit Smiley murf
Modifié par Raphael (18 Apr 2019 - 17:20)