css Grid Layout ou Flexbox ?

[DaCode]

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.

 

[Anthony]

Je réponds Flexbox parce que j'ai appris directement avec ça mais je sais que Grid est pas mal notamment la gestion des areas

 

[Nicolas]

Si vous voulez testez l'une ou l'autre je vous renvoie sur le Codepen du forum il y a 2 pens en rapport.

dev.cometrue on CodePen

Check out dev.cometrue's creations on CodePen.

codepen.io

 

[Jack]

Si vous voulez testez l'une ou l'autre je vous renvoie sur le Codepen du forum il y a 2 pens en rapport.

dev.cometrue on CodePen

Check out dev.cometrue's creations on CodePen.

codepen.io

Sympa le joujou !

 

[Nicolas]

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

<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>

.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]

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 ?

 

[DaCode]

HTML5 - CSS3