Moderne Lösungen für alte CSS-Probleme (Teil 2): ​​Elemente gleicher Höhe: Flexbox vs Grid

Schöne Grüße. Ich präsentiere Ihnen die Übersetzung des Artikels „Equal Height Elements: Flexbox vs. Grid " veröffentlicht am 9. April 2020 von Stephanie Eckles

Dies ist der zweite Artikel in einer Reihe, in dem moderne Methoden zur Lösung von CSS-Problemen vorgestellt werden, auf die ich in meinen über 13 Jahren als Front-End-Entwickler gestoßen bin.

( 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});
  }
}

, ,