Css Grid : empilements et chevauchements

Un avantage du css grid est de pouvoir empiler facilement les sections et de pouvoir les superposer assez facilement.

Empilement et images en background fictif avec le Css grid

Ici l’image semble en background, mais ce n’est pas le cas , elle pourra donc facilement être ‘lazyloadée’ et bénéficier de tous les attributs des blocks avancés (taille, format, position etc.)

L’image n’est pas en background mais empilée grace au css grid

Facile à mettre en place avec deux sections occupant le même espace

#monconteneur-parent {display:grid;

}
#monconteneur-parent > * {
  grid-area: 1 / 1 / 2 / 2;
}

Chevauchement de sections avec le Css Grid

Un exemple où chaque image et chaque texte est dans sa propre section, et occupe une place définie par le css grid tout en pouvant partager cette place en partie avec d’autres sections

Partez de la version mobile, numérotez vos sections, et ensuite codez votre grille desktop en Css à base de Grid.

RAPIDE

ADAPTABLE

LOGIQUE

Pratique
pour les compositions complexes

Vous pouvez jouez avec votre taille d’écran (via l’outil de développement de votre navigateur) pour voir la section s’adapter.

La version mobile tout en ligne

Le code de la version desktop

.div-parent {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(16, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div2 { grid-area: 2 / 1 / 8 / 5;; }
.div6 { grid-area: 10 / 7 / 16 / 11; }
.div4 { grid-area: 6 / 4 / 12 / 8;z-index:+2; }
.div5 { grid-area: 5 / 5 / 6 / 8; }
.div3 { grid-area: 8 / 1 / 9 / 4; }
.div7 { grid-area: 9 / 8 / 10 / 11; }
.div1 { grid-area: 13 / 1 / 15 / 7; }
.div8 { grid-area: 15 / 1 / 17 / 7; }

CSS Grid excelle dans la gestion des empilements et chevauchements de sections grâce à son contrôle précis des zones et sa capacité à superposer des éléments sur plusieurs lignes et colonnes.

css grid empilement exemple format paysage

Puissant

RESPONSIF

Structuré

Vous aimez les puzzles,
le Css grid va vous plaire

Block Css Grid indépendant de la taille des photos

Le problème des blocks réutilisables (et non synchronisé) va être de pouvoir y poser n’importe quelle photo à n’importe quel format sans bouger le Css Grid, une photo en format portrait ne rentrant pas dans un espace au format paysage. Dans ce cas la solution pour avoir un block générique est de sacrifier les photos et de les utiliser en background et cover, en définissant des espaces ‘vides’.

Photos saccrifiées, utilisées en background et cover via le css, en définissant des espaces ‘vides’.

Puissant

RESPONSIF

Structuré

Css grid des solutions a quasi
tous vos problèmes de design

Block Css Grid générique

Une façon plus complexe pour utiliser l’avantage des images en <img> et non plus en background; mais si le format requis n’est pas respecté il faudra tout de même avoir des images dont la largeur est celle demandée ou supérieure.

Et il faut intégrer de l’object-fit et de l’object-position pour placer proprement les photos. Ce qui sur un placement générique fera choisir l’object-position: center , en espérant que la photo soit un minimum centrée.

Le CSS Grid est idéal pour organiser des empilements et des chevauchements de sections, prenez le contrôle des éléments, lignes et colonnes.