Düzelt: min-content codepen paylaşımı yanlıştı düzettik. Düzeltme uyarısı için L. Arman Özak‘a teşekkürler

  1. CSS Grid’e (Izgara) Giriş
  2. CSS Grid Özellikleri
  3. fr birimi
  4. CSS Izgara çizgi isimlendirmesi ve kullanımı
  5. Sayfa planlama sihirbazı grid-template-areas
  6. Explicit(belirlenmiş) ve implicit(belirlenmemiş) grid ögeleri

CSS grid makalelerimizin bu 7. sinde sizlere minmax() işlevini anlatmaya çalışacağım. CSS grid standartları ilk yazılmaya başlandığında çok karmaşık ve anlaşılması zor diye mesafeli yaklaşıyordum ancak beraberinde getirdiklerini öğrendikçe ve uyguladıkça daha iyi anlıyor ve seviyorum.

CSS minmax işlevi tanımlandığı grid ögesine en az (min) verilen değerine eşit ve daha büyük ve en fazla (max) değerine eşit ve daha küçük bir boyut aralığı tanımlar. Sadece CSS grid içinde kullanılır.

minmax(min, max)

İlk parametresi minimum değeri, ikinci parametresi maksimum değeri belirler.

Maksimum değeri eğer minimum değerden küçükse maksimum değeri tarayıcı tarafından yorumlanmaz ve minimum değer uygulanır.

Minimum değer fr birimli değer alamaz, maksimum değer fr birimli değer alabilir.

CSS minimax işlevi 5 farklı birimde değer alır.

  1. Ölçü değerleri (px, em, vm, vh, …)
  2. Esnek değerler (fr)
  3. max-content
  4. min-content
  5. auto

Bu değerlere göz atalım.

Ölçü değerleri

Ölçü değerleri, CSS uzunluk (px, em, vm vh, …) değerleri ve yüzde değerlerdir. Tanımlanan değer kolon genişliğini belirler ve eksi değer alamaz. Örneğin 25%, 250px, 100vw gibi.

Ölçü değerleri minmax işlevinin en basit halini gösterir.

.kapsayici {
    display: grid;
    grid-template-columns: minmax(80px, 240px) 100px 100px;
}

CSS grid minmax sabit ölçüleri

Kapsayıcı eleman için tanımlanmış grid-template-columns değeriyle 2. ve 3. ögeler 100px ile sabitlenmişken 1. öge görüntülenen alanın genişliğine göre en az 100px en fazla 200px genişlik değeri alır.

Yüzde değerlerine bir örnek yapalım.

.kapsayici {
    display: grid;
    grid-template-columns: minmax(50%, 80%) 100px 100px;
}

Esnek değer (fr)

Esnek değer, fr(ing. fraction) birimi ‘kesir’ anlamına gelir. px veya % gibi bir uzunluk değil, bunun yerine ‘esnek’ bir birim olarak kabul edilir. CSS grid ile birlikte gelen bir değerdir. Kullanılabilir alanı tanımlamamızı sağlayan esnek bir birimdir. Daha detaylı bilgi için fr birimi yazımıza göz atınız.

.kapsayici {
display: grid;
grid-template-columns: minmax(50%, 1fr) 1fr 1fr;
}

CSS grid minmax esnek değerler

Esnek değerler ile uyumlu bir yapı kazanır grid ögelerimiz.


min-content ve max-content tanımları

max-content

Izgara izi içindeki boşluklar da dahil en geniş içerikli ögesinin değeridir. Metin bir alt satıra kaydırılmadan boyut ölçülür.

.kapsayici {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) 1fr 1fr;
}

CSS grdi minmax max-content

Diğer kutular genişlik daralınca iki satıra düşerken max-content tanımlı kutu içeriğininin uzunluğunca sabit kalıyor.

min-content

Izgara izi içindeki ızgara ögesinin en az daraldığı durumdaki değeridir. Metin taşmadan daralabileceği en son noktadaki değerdir ya da ızgara ögesi içindeki satır içi ögenin genişliği kadardır.

.kapsayici {
  display: grid;
  grid-template-columns: minmax(min-content, min-content) minmax(max-content, max-content) 1fr;
}

CSS grid minmax min-content

min-content tanımlanan eleman scroll çıkmadan ufalacağı en dar genişliğe gelir.

auto

auto tanımlanan grid ögesi en fazla max-content değeri kadar, en az min-content değeri kadar değer alır.

.kapsayici {
  display: grid;
  grid-template-columns: minmax(auto, auto) 1fr 1fr;
}

CSS grid minmax auto

Kaynaklar

CSS Grid öge özellikleri

CSS Grid ögesine ait özellikleri tanımlayacağız Devamını oku

repeat() işlevi, auto-fill ve auto-fit değerleri

03 December 2019 tarihinde yayınlandı.

Kitap incelemesi Learn React - Alex Banks, Eve Porcello

20 November 2019 tarihinde yayınlandı.