css Grid Layout ou Flexbox ?

DaCode

Membre
Bonjour à tous,

Je ne sais pas si c'est une réalité mais j'ai l'impression que Flexbox connait une belle notoriété depuis quelques temps. Si je ne m'abuse il n'y avait que Grid avant n'est-ce pas ? Et puis Flexbox est arrivé.

Avez-vous un préférence pour l'un ou l'autre ? Un est-il plus pratique dans certains cas ?
Je trouve les deux assez souple mais Grid me parait plus facile à appréhender.
 

Nicolas

Membre actif
Après avoir suivi les cours sur FFC, je pense qu'on ne peut pas choisir entre les 2 systèmes de gestion de box dans les sites webs.

Flexbox permet certaines choses et est assez simple en terme de layout mais GRID est plus complet notamment sur la gestion des blocs sur une page entière, avec comme le dit Anthony la gestion par areas.

Essayez ceci par exemple sur Codepen
HTML
<div class="container">
  <div class="item1">header</div>
  <div class="item2">advert</div>
  <div class="item3">
    <div class="itemOne">paragraph1</div>
    <div class="itemTwo">paragraph2</div>
  </div>
  <div class="item4">footer</div>
</div>
CSS
.container {
    font-size: 1.5em;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
      "advert header"
      "advert content"
      "advert footer";
  }

.item1 {
       background: LightSkyBlue;
    grid-area: header;
  }

.item2 {
    background: LightSalmon;
    grid-area: advert;
  }

.item3 {
    background: PaleTurquoise;
    grid-area: content;
    display: grid;
    grid-template-columns: auto 1fr;
  }

.item4 {
    background: lightpink;
    grid-area: footer;
  }

.itemOne {
    background: PaleGreen;
  }

itemTwo {
    background: BlanchedAlmond;
  }
 

Anthony

Membre
Ouais donc on peut pas faire l'impasse sur Grid en pensant que Flex fera l'affaire pour tout. Ils sont complémentaires.
Mais, désolé pour le petit hors-sujet, mais qui crée ces trucs là ? Qui a créé Grid et qui a créé Flex ? C'est des développeurs indépendants, des consortiums genre le W3C ?
 

Ces discussions pourraient vous intéresser...

  • Résolue
Salut tout le monde, De base Bootstrap propose avec son système de grille flexbox 12 colonnes. Dans la doc je ne vois pas comment gérer ce problème : Grid system Dans certaines conditions, pour un simple blog par exemple c'est un peu laborieux de gérer toujours 12 colonnes...
  • Résolue
Hello !! J'ai vu quelques discussions à ce sujet mais je n'y ai pas trouvé la réponse à mon problème. j'ai ce code dans la configuration écran PC <div class="content-max"> <div class="section-left"> <p> mon contenu - plusieurs lignes de texte...
  • Résolue
Salut, Je vais utiliser Bootstrap pour développer devcometrue.fr J'ai commencé par télécharger les fichiers mais dans le dossier CSS il y a une multitude de fichiers .css et également leurs équivalent en .map Après avoir visionné un tuto je pensais simplement installer...
Haut