Solutions modernes aux anciens problèmes CSS (partie 2): éléments de hauteur égale: Flexbox vs Grid

Salutations. Je présente à votre attention la traduction de l'article «Éléments à hauteur égale: Flexbox vs. Grille " publié le 9 avril 2020 par Stephanie Eckles

Ceci est le deuxième article d'une série qui se concentre sur les moyens modernes de résoudre les problèmes CSS que j'ai rencontrés au cours de mes plus de 13 ans en tant que développeur front-end.

( 7 ) JQuery-, , . , , . float, , .

Flexbox

Flexbox :

.flexbox {
  display: flex;
}

! .

, .column, .

, 100%

.flexbox {
  display: flex;
}

/* ,          */
.element {
    height: 100%;
}

.element.

Grid

Grid, :

.grid {
  display: grid;
  /*      */
  grid-auto-flow: column;
}

Flexbox, , , Flexbox:

.flexbox {
  display: grid;
  grid-auto-flow: column;
}

/* ,         */
.element {
    height: 100%;
}

Codepen- :

?

, Flexbox , , Grid . , ( , , ).

Grid , , . , , "". Grid- , Flexbox .

Grid 3 .column :

&.col-3 {
  grid-gap: $col_gap;
  grid-template-columns: repeat(3, 1fr);
}

, Flexbox :

$col_gap: 1rem;

.flexbox.col-3 {
  /*           */
  flex-wrap: wrap;

  .column {
    /*   "gap" */
    margin: $col_gap/2;
    /*   
    max-width: calc((100% / 3) - #{$col_gap});
  }
}

, ,