Tiesto

Tiesto

WFN Üye
Konular
594
Mesajlar
594
Çözüm
0
Ticaret Puanı
0
Üyelik
24 Gün
Konum
Antalya
Web Sitesi
Var
Alanı
Domain Uzmanı
1/1
Konu sahibi
Eşit genişlikte sütunlar oluşturmanın en pratik yolu CSS Grid kullanmaktır. Sütun sayısını grid-template-columns: repeat(3, 1fr); ile belirlediğinizde kullanılabilir alan üç eşit parçaya bölünür; gap ise sütunlar arasındaki boşluğu ayırır. Flexbox da aynı işi yapabilir, ancak düzenin iki boyutlu olduğu durumlarda Grid daha açık ve kontrol edilebilir bir çözümdür.

CSS Grid ile eşit sütun oluşturma​


Önce sütunları taşıyacak kapsayıcıya display: grid verin. Ardından repeat() ile kaç sütun istediğinizi, 1fr ile de her sütunun eşit pay alacağını belirtin.

HTML: 
<div class="sutunlar">
    <div class="kart">Birinci sütun</div>
    <div class="kart">İkinci sütun</div>
    <div class="kart">Üçüncü sütun</div>
</div>

<style>
.sutunlar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.kart {
    padding: 20px;
    background: #f1f1f1;
    border: 1px solid #d5d5d5;
}
</style>

Bu örnekte repeat(3, 1fr) üç eşit sütun oluşturur. Kapsayıcının kullanılabilir genişliği 900 piksel ve sütunlar arasındaki toplam boşluk 40 piksel ise her sütun yaklaşık 286,67 piksel genişliğinde olur. Yani boşluklar çıkarıldıktan sonra kalan alan üç eşit parçaya bölünür.

Sütun sayısını değiştirmek için yalnızca 3 değerini değiştirmeniz yeterlidir. Örneğin dört eşit sütun için repeat(4, 1fr), iki sütun için repeat(2, 1fr) kullanılır.

Responsive tasarımda sütun sayısını değiştirme​


Masaüstünde üç sütun kullanıp dar ekranlarda sütunları alt alta göstermek için medya sorgusu ekleyebilirsiniz. Böylece içerik ekran genişliğine sığmadığında yatay taşma oluşmaz.

CSS: 
.sutunlar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .sutunlar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .sutunlar {
        grid-template-columns: 1fr;
    }
}

Bu ayarda geniş ekranlarda üç, orta genişlikteki ekranlarda iki, 480 pikselden dar ekranlarda ise tek sütun görünür. Medya sorgusunun çalışması için HTML belgesinde mobil görünüm ayarının bulunması da gerekir:

HTML: 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bir sütunun içeriği diğerlerinden çok daha uzun olsa bile Grid sütunların genişliğini eşit tutar; ancak satır yüksekliği içerik miktarına göre değişebilir. Eşit genişlik, sütunların aynı yükseklikte olacağı anlamına gelmez.

Grid ve Flexbox arasında seçim​


Her iki yöntemle de eşit genişlikte sütunlar oluşturulabilir, fakat kullanım amaçları farklıdır.
YöntemEşit genişlik için kullanımDaha uygun olduğu durum
CSS Gridgrid-template-columns ile doğrudan sütun tanımlanırSatır ve sütunlardan oluşan kart, galeri veya panel düzenleri
FlexboxÇocuklara flex: 1 verilirTek satır veya tek sütun boyunca hizalama gereken düzenler
Sabit genişlikpx, rem veya benzeri bir değer kullanılırSütunların her ekranda belirli genişlikte kalması gereken özel tasarımlar
Flexbox ile üç eşit sütun oluşturmak isterseniz kapsayıcıya display: flex, çocuk öğelere de flex: 1 verebilirsiniz:

CSS: 
.sutunlar {
    display: flex;
    gap: 20px;
}

.kart {
    flex: 1;
}

@media (max-width: 600px) {
    .sutunlar {
        flex-direction: column;
    }
}

Burada her .kart aynı büyüme payına sahip olduğu için kullanılabilir alanı eşit paylaşır. Ancak içerik uzunluğu, min-width değeri veya uzun ve bölünemeyen bir metin genişliği düzeni bozabilir. Böyle bir durumda min-width: 0 eklemek, esnek öğenin kapsayıcı içinde küçülebilmesini sağlar.

Eşit görünmeyen sütunlarda ne kontrol edilmeli?​


Sütunların genişlikleri eşit görünmüyorsa önce grid-template-columns veya flex: 1 kuralının gerçekten doğru kapsayıcıya uygulandığını kontrol edin. Çocuk öğelerden birinde ayrıca verilmiş width, min-width ya da flex-basis değeri varsa bu değer eşit dağılımı etkileyebilir.

Grid kullanırken 1fr 2fr 1fr gibi farklı oranlar yazmadığınızdan emin olun. Bu tanımda ortadaki sütun diğerlerinin iki katı genişliğinde olur. Eşit dağılım için her sütun parçası 1fr olmalıdır.

Uzun bir kelime, URL veya kod satırı sütunu taşırıyorsa şu kural yardımcı olabilir:

CSS: 
.kart {
    min-width: 0;
    overflow-wrap: anywhere;
}

Bu kural sütunun küçülebilmesini ve bölünemeyen uzun metinlerin gerektiğinde satıra bölünmesini sağlar. Buna rağmen görsel genişlikleri farklı görünüyorsa geliştirici araçlarında kapsayıcının gerçek genişliğini, sütunlar arasındaki gap değerini ve çocuk öğelerin ek genişlik kurallarını inceleyin. Eşit genişlik yalnızca aynı genişlikteki Grid izleri veya eşit esneme payları için geçerlidir; içeriklerin aynı yükseklikte olmasını garanti etmez.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)