Eşit Yükseklik Öğeleri: Flexbox vs. Grid

Eşit Yükseklik Öğeleri: Flexbox vs. Grid

Bir zamanlar (yaklaşık 2013), eşit yükseklikte sütunları hesaplamak için bir jQuery eklentisi yazdım. Üç sütunlu bir satırın çok özel senaryosunun, içerdikleri içeriğin uzunluğu ne olursa olsun içerik kutularını eşit yükseklikte tutmasını sağladı. O zamanki baskın yerleşim yöntemi – yüzer – bu sorunu çözmedi.

Flexbox olay yerine geldiğinde, bu şu şekilde mümkün oldu:

.flexbox {
display: flex;
}

Harika! Varsayılan olarak, çocukları arka arkaya sıraya sokun ve eşit yükseklikte olmaları için bir “uzatma” uygulayın 🙌

Ama sonra iki tane eklersin .column divs alt öğe olarak ve… sütunların içeriği yine eşitsiz görünüyor 😔

Düzeltme:

.flexbox {
display: flex;

// Ensure content elements fill up the .column
.element
{
height: 100%;
}
}

Şimdi sütunlar eşit yükseklikte görünecek ve içeriğiyle birlikte büyüyecek. .element.

Izgara ile benzer davranışlarla karşılaşırız:

.grid {
display: grid;
// Essentially switch the default axis
grid-auto-flow: column;
}

Flexbox’a benzer şekilde, doğrudan çocuklar eşit boyda olacaktır, ancak onların çocukları, tıpkı flexbox çözümünde olduğu gibi eklenen yükseklik tanımına ihtiyaç duyar:

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

// Ensure content elements fill up the .column
.element
{
height: 100%;
}
}

Aşağıda, her iki çözümün bir demosu ve aşağıda açıklandığı gibi satır başına belirli sayıda sütun tanımlamak için ek demolar yer almaktadır:

Stephanie Eckles (@5t3ph)

Yalnızca eşit yükseklikteki öğeleri çözmek için, flexbox’ın avantajı, varsayılan eksenin hemen yan yana sütunları etkinleştirmesidir, oysa ızgaranın açıkça ayarlanması gerekir. Bununla birlikte, öğeler de doğal olarak eşit genişlikte olmayacaktır (bu, örneğin gezinme bağlantıları gibi içerik türüne bağlı olarak bir avantaj olabilir).

Izgaranın avantajı, eğer istenirse, doğası gereği eşit genişlikte elemanlardır. Ek bir avantaj, otomatik akış istemediğiniz, bunun yerine “satır” başına maksimum sayıda sütun tanımlamak istediğiniz zamandır. Bu durumda, ızgara düzeni, sütun sayısını sınırlamak için hesaplamayı tanımlamayı gerektiren bir esnek kutu çözümüne karşı sütunları dağıtmak için matematiği kolayca işler.

Güncelleniyor .grid maksimum 3 sayısını tanımlamak için ele alınacak çözüm .column satır başına kadar basittir:

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

Flexbox için bir (çok basit) seçenek şöyle olurdu:

$col_gap: 1rem;

.flexbox.col-3 {
// Explicitly needs to be defined to wrap
// overflow items to the next virtual row
flex-wrap: wrap;

.column {
// "hack" for no gap property
margin: $col_gap/2;
// define calculation for browser to use on the width
max-width: calc((100% / 3) - #
{$col_gap});
}
}

Ayrıca, bu çözümlerin duyarlı bir şekilde nasıl ele alındığını da düşünmeniz gerekir, ancak bu, bu makalenin biraz kapsamı dışında 🙂

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.