Contenu cellule est tir sur toute cellule stretch

mode de placement complémentaire à flex destiné à du placement en 2 dimensions,
Des propriétés sur le conteneur : fixent les contraintes organisant le flux des items directement inclus
Des propriétés sur les items : comportement
particulier de chaque item
Quelques références :
Introduction sur
le guide

des , et d'

Placement basé sur la définition d'1 grille au niveau du conteneur :

.cell_one {

// placement explicite

}

}

.cell_three {

// placement implicite

background-color: green;

	1	1	5



entre 2 lines successives, c'est donc 1 row ou	2	column	area
1 column

	3


	4
cell : espace entre 2 lines successives
horizontales et et 2 lines successives

gap : espace séparant les rows et les columns

voir sur

6 colonnes : 3 de 20 % + 3 occupant l'espace disponible


	voir sur

on précise uniquement leur taille si elle est différente de 1 en utilisant grid-column-end: et grid-rox-end:

les items sont placés par un algorithme dans l'ordre où ils apparaissent,

grid-auto-flow: row dense – remplissage dense des rangées

grid-auto-flow: column dense - remplissage dense des colonnes

	row

/* dense ; */
}

column

dense

grid-row-gap: gouttières entre les rangées
grid-column-gap: gouttières entre les colonnes
grid-gap: raccourci
alignements : par défaut, le contenu d'une cellule est étiré sur toute la cellule (stretch). On peut modifier ce
comportement sur toute la grille :

justify-items: alignement le long de l'axe lignealign-items: alignement le long de l'axe colonnevaleurs : start | end | center | stretch

	50rem

grid-template-columns: repeat(auto-fit, 15rem);

grid-auto-rows: 5rem;	50rem

}	grid-template-columns:	65rem

.grid_container {
grid-template-columns : 1fr 4fr .5fr 1fr;

grid-template-rows: 15vh 3rem	h	h	h	h
calc(85vh - 3rem) 6rem;
grid-template-areas :
"h h h h"	n	n	n	n
"n n n n"

}	grid-area: h;

.nav {

	sl	c	sr	sr
}
.news {

}

}	f	f	f	f

voir sur