Solusi Modern untuk Masalah CSS Lama (Bagian 2): Elemen Tinggi Sama: Flexbox vs Grid

Salam pembuka. Untuk perhatian Anda, saya persembahkan terjemahan dari artikel “Equal Height Elements: Flexbox vs. Grid ” diterbitkan pada 9 April 2020 oleh Stephanie Eckles





Ini adalah artikel kedua dalam seri yang mengeksplorasi cara-cara modern untuk memecahkan masalah CSS yang saya temui selama lebih dari 13 tahun sebagai pengembang 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});
  }
}


, ,




All Articles