Softiblog : Le blog de l'agence web Softibox

Le CSS Grid Layout, un module puissant pour vos mises en page

Posté par Matthieu de Softibox 7 - septembre - 2017

Même si elle offre une grande souplesse en matière de création de sites internet, la mise en page web par CSS est tout de même une tâche assez délicate à réaliser. Ce pour de nombreuses raisons, notamment en matière de sécurité web. Heureusement pour les développeurs et les webdesigners, il y a le module CSS Grid Layout ou grilles de mise en page qui devrait faciliter leur travail pour concevoir des pages web.

CSS Grid Layout

Le CSS Grid Layout, c’est quoi ?

CSS Grid Layout est un rĂ©cent module de positionnement CSS. Son but est de permettre la crĂ©er des pages Ă  l’aide d’un rĂ©seau bidimensionnel et de rĂ©duire la complexitĂ© de la conception des interfaces utilisateurs basĂ©es sur les grilles.

Afin d’y parvenir, ce module divise l’espace d’affichage en diffĂ©rentes rĂ©gions utilisables par une application. Ou bien il dĂ©finit des relations de taille, de position et d’empilement entre les Ă©lĂ©ments HTML.

Cela offre aux experts en webdesign d’une agence web de nouvelles possibilitĂ©s dans le design des sites. Cet outil incroyablement puissant est fait d’ailleurs dĂ©jĂ  l’unanimitĂ© auprès de nombreux expert. Beaucoup le considère comme le meilleur module de positionnement CSS disponible et le futur de la mise en page CSS.

Compatibilité de CSS Grid Layout avec les navigateurs web

Depuis le 28 mars 2017, le CSS Grid Layout est totalement supporté par les versions pour ordinateur des navigateurs web :

  • Firefox Ă  partir de la version 52,
  • Chrome Ă  partir de la v57,
  • Safari Ă  partir de la version 10.1,
  • Opera Ă  partir de la v44,
  • Microsoft Edge Ă  partir de la v16.

Quant Ă  Internet Explorer, la version 11 inclut le support de ce module. Toutefois, il s’agit d’une ancienne implĂ©mentation dotĂ©e d’une syntaxe obsolète.

Concernant les navigateurs pour appareil mobile, les versions Safari Mobile Ă  partir de la v10.3, Android Ă  compter de la v56, Android Chrome Ă  partir de la v59 et Android Firefox depuis la v55 intègrent aussi le support du CSS Grid Layout. Ce qui n’est pas encore le cas pour les deux navigateurs Opera Mobile et Opera Mini.

Comment tirer profit du CSS Grid ?

Si vous ĂŞtes un habituĂ© des mises en page CSS, vous devez connaĂ®tre les modèles Box et son amĂ©lioration Flexbox. Vous serez en plus ravi d’apprendre que ces deux derniers sont tout Ă  fait complĂ©mentaires avec Grid. Il est ainsi plus aisĂ© d’inclure un module de positionnement Grid dans une zone assez spĂ©cifique de votre site internet.

De cette façon, CSS Grid Layout peut devenir un outil pour amĂ©liorer vos galeries photo, ou encore dans le cadre de l’Ă©laboration d’une interface utilisateur en responsive design. Il est ensuite possible d’avoir recours Ă  des media queries ou requĂŞtes mĂ©dia, pour remplir les grilles de manière dynamique.

Pour les dĂ©veloppeurs amateurs, il est assez aisĂ© de se lancer et utiliser CSS Grid. En plus, il existe de nombreux tutoriels sur le net pour mieux le maĂ®triser. Mais si vous envisagez la crĂ©ation d’un site internet et que vous ĂŞtes intĂ©ressĂ© par l’utilisation de ce module de mise en page pour votre interface utilisateur, il est plus intĂ©ressant d’avoir aux recours aux services de spĂ©cialistes. Ă€ l’instar d’une agence web offshore comme Softibox qui dispose d’une Ă©quipe d’intĂ©grateurs front-end expĂ©rimentĂ©s.

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Les commentaires sont fermés.
Création de site internet pour cabinet d'avocats : nos conseils

Face à des prospects de plus en plus connectés, avoir ...

Le passage en HTTPS des sites internet, une migration qui se fait plus pressante

Actuellement la protection informatique des données personnelles est un élément ...

[Infographie] Comment booster l'engagement sur Facebook

Cette semaine, Softibox vous propose une infographie conseil sur la ...

Le CSS Grid Layout, un module puissant pour vos mises en page

Même si elle offre une grande souplesse en matière de ...

[Infographie] 12 éléments clés à afficher sur votre page d'accueil

Et pour bien démarrer  la rentrée de septembre, pour celles ...