La mise en page responsive constitue aujourd’hui un impératif pour tout site web qui se respecte. Pourtant, nombre de développeurs peinent encore à dompter la complexité des grilles flexibles, ce qui bride le potentiel de leurs créations.
Cet article va démystifier le système de grille CSS, une fonctionnalité révolutionnaire qui, lorsqu’elle est maîtrisée, peut métamorphoser votre approche du web design. Nous allons découvrir ensemble les rouages et les bonnes pratiques des CSS Grid : de leur structure Containers/Items aux propriétés indispensables en passant par des cas concrets de mises en page responsives ou créatives.
Imaginez pouvoir agencer des blocs de contenu en tout genre pour créer des mises en page uniques en quelques lignes de code… Tenez-vous prêt à découvrir comment les CSS Grid peuvent rendre cela possible, et libérer votre créativité responsive comme jamais auparavant.
CSS Grid : de quoi parle-t-on ?
Le CSS Grid Layout, communément appelé CSS Grid, constitue un système de grille révolutionnaire intégré aux CSS3. Apparu en 2017, il a rapidement su s’imposer comme un standard incontournable pour la mise en page web moderne.
Mais au fait, qu’est-ce qu’une grille en web design ? Pour faire simple, on peut la voir comme une structure en deux dimensions permettant d’organiser le positionnement des blocs contenus dans un espace donné. Dit autrement, il s’agit d’un ensemble de lignes horizontales et verticales formant un quadrillage invisible au sein duquel les éléments de la page viennent se placer.
Jusqu’à présent, concevoir des grilles flexibles capables de s’adapter aux différentes tailles d’écran représentait un défi de taille. Entre le float, les frameworks css type Bootstrap ou la spec Table, les solutions existantes manquent souvent de souplesse. Le CSS Grid vient tout changer !
Grâce à lui, fini les casse-têtes de positionnement : les lignes et colonnes constituent désormais des repères structurels extrêmement puissants pour agencer les boîtes les unes par rapport aux autres. Peu importe leur taille ou leur quantité, le maillage intelligent du CSS Grid s’occupe de tout !
Résultat : des mises en page ultra-réactives en un clin d’œil, et des possibilités de design multipliées pour votre imagination. De quoi ouvrir des perspectives inédites côté UI et UX !
Comment fonctionne le système de grilles en CSS ?
Le fonctionnement du CSS Grid repose sur une structure simple en deux niveaux : un container parent et des items enfants.
Commençons par le container grid, élément englobant qui définit la zone d’application de la grille. C’est lui qui porte les propriétés principales de paramétrage du quadrillage avec :
- display: grid ; pour activer le grid,
- grid-template-columns ; pour définir la structure colonnes,
- grid-template-rows ; pour définir la structure lignes.
Ces quelques propriétés permettent de modéliser des templates de grille ultra-complets, en décidant du nombre de colonnes, de leur taille respective en pixels, % ou em, de l’espacement souhaité, etc. Des options comme grid-auto-rows ou grid-auto-columns complètent ce paramétrage pour combler automatiquement les trous.
Vient ensuite la distribution des éléments enfants au sein de ce canevas avec les items de la grille. Un item correspond simplement à l’élément HTML à positionner, qu’il s’agisse de div, images, textes ou composants plus complexes.
Côté propriétés CSS, chaque item peut exploiter :
- grid-column-start + grid-column-end ; pour définir la zone colonnes occupée,
- grid-row-start + grid-row-end ; pour définir la zone lignes occupée,
- grid-area ; pour spécifier la zone précise à couvrir.
Grâce à ces options, n’importe quel élément trouve naturellement sa place au sein du quadrillage. Même en responsive, avec des réagencements automatiques ou sur-mesure !
Les différentes propriétés du Grid CSS
Le CSS Grid dispose d’un large éventail de propriétés permettant de paramétrer finement la structure de la grille. Voyons les principales d’entre elles en détail.
Commençons par celles dédiées au container parent grid :
Les propriétés du container parent
Display
La propriété display avec la valeur grid permet d’activer le fonctionnement en grille sur l’élément ciblé. C’est ce container qui servira de structure pour organiser les items enfants :
.container {
display: grid;
}Grid-template-columns / Grid-template rows
Ces propriétés définissent le squelette colonnes/lignes de la grille, soit son découpage visuel. Des valeurs comme « 200px » , « 20% » , « auto » ou « repeat() » permettent de calibrer très précisément la taille de chaque zone.
.container {
grid-template-columns: 200px 1fr 20%;
grid-template-rows: auto auto 300px;
}Des options comme « grid-auto-rows/columns » ou « grid-gap » complètent ce paramétrage.
Les propriétés des containers enfants
Passons maintenant aux propriétés dédiées au positionnement des items :
Grid-column-start / Grid-column-end
Ces propriétés indiquent le point de départ et d’arrivée d’un élément sur l’axe des colonnes. Pratique pour contrôler étroitement la largeur des items directement via le système de grille.
.item {
grid-column-start: 2;
grid-column-end: five;
}Grid-row-start / Grid template row end
Même principe mais sur l’axe des lignes cette fois, pour maîtriser la hauteur d’un élément depuis les repères du grid.
.item {
grid-row-start: row1-start
grid-row-end: 3
}Grid-area
Cette propriété condense les précédentes en définissant précisément l’emplacement voulu pour un item via un template de zones customisées. Ultra pratique pour positionner rapidement des éléments complexes !
.item {
grid-area: header;
}Avec ces quelques propriétés, vous êtes en mesure de maîtriser parfaitement aussi bien la structure globale de la grille que le moindre positionnement en son sein. Voyons maintenant des mises en pratique éloquentes !
Exemples de CSS Grid
Maintenant que nous avons fait le tour du fonctionnement et des propriétés des CSS Grid, attardons-nous sur des cas concrets pour mieux saisir tout leur potentiel.
Créer une grille responsive
L’une des forces du Grid réside dans sa capacité à créer des mises en page parfaitement responsives, capables de s’adapter à tous les devices.
Prenons l’exemple d’un site vitrine classique avec une colonne pour le menu, une pour le contenu principal et une dernière pour des compléments type widgets. Le code suivant permet de modéliser facilement ce template :
.container {
display: grid;
grid-template-columns: 200px 1fr 300px;
grid-gap: 20px;
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
}
}En fixant simplement quelques points de rupture, la grille peut ainsi évoluer de façon ultra flexible.
Personnaliser la disposition des zones
Les CSS Grid ont également l’avantage de faciliter les agencements créatifs hors normes.
Imaginons que nous voulions un site au layout original avec des zones de tailles et de formes variables. Le système de grille autorise ce genre de folies structurelles sans effort :
.container {
display: grid;
grid-template-columns: 100px 1fr 300px;
grid-template-rows: 300px 1fr;
grid-template-areas:
« entete entete carrousel »
« menu contenu widgets »;
}
.header {
grid-area: entete;
}En exploitant le découpage personnalisé via « grid-template-areas », tout devient possible côté mise en page !
Avec une telle puissance, les CSS Grid représentent clairement une évolution majeure du web design moderne. Reste à savoir quelle compatibilité ils offrent.
Quelle compatibilité avec les navigateurs ?
La prise en charge des CSS Grid par les navigateurs et leur évolution depuis 2017 permet d’aborder cette fonctionnalité avec sérénité.
Google Chrome, Firefox, Safari, Edge et Opera couvrent progressivement tous les usages depuis 2017. Afin d’assurer une compatibilité maximale, des solutions de fallback comme la librairie Modernizr permettent de passer progressivement du float ou flexbox au grid sur les anciennes versions.
En termes de support, le CSS Grid trouve même une plateforme idéale sur les dernières itérations des OS mobiles comme iOS ou Android, et les navigateurs qui vont avec.
Pour maximiser les chances d’une expérience utilisateur optimale, l’association d’un fallback float/flexbox sur les vieilles infrastructures prend ainsi tout son sens.
De quoi envisager une adoption sereine des superpouvoirs du CSS Grid dans tout nouveau projet !
Conclusion
Grâce à leur approche révolutionnaire de la mise en page web, les CSS Grid apparaissent comme l’avenir du web design responsive et créatif. Leur structure de grille intelligente et leurs propriétés optimisées paraissent taillées pour dompter avec flexibilité les contextes les plus exigeants. En réinventant notre rapport au positionnement des boîtes en tout genre, ces outils du futur ouvrent des perspectives inédites pour donner vie à des maquettes toujours plus ambitieuses. L’arrivée prochaine des options de sous-grilles et de placement algorithmique promet par ailleurs d’étendre encore le spectre des possibles en matière de mise en page.
