flexbox'a
Flexbox ile dinamik bir duvar düzeni, en azından temiz ve verimli bir şekilde mümkün değildir.
Flexbox tek boyutlu bir yerleşim sistemidir. Bu, öğeleri yatay VEYA dikey çizgiler boyunca hizalayabileceği anlamına gelir. Bir esnek öğe, kendi satırı veya sütunuyla sınırlıdır.
Gerçek bir ızgara sistemi iki boyutludur, yani öğeleri yatay VE dikey çizgiler boyunca hizalayabilir. İçerik öğeleri, aynı anda satırlara ve sütunlara yayılabilir, bu esnada esnek öğeler bunu yapamaz.
Flexbox'ın ızgaralar oluşturmak için sınırlı bir kapasiteye sahip olmasının nedeni budur. W3C'nin başka bir CSS3 teknolojisi olan Grid Layout'u geliştirmesinin de bir nedeni bu .
row wrap
Bir esnek kapta flex-flow: row wrap, esnek öğeler yeni satırlara sarılmalıdır .
Bu, bir esnek öğenin aynı satırdaki başka bir öğenin altına sarılamayacağı anlamına gelir .
Div # 3'ün nasıl yeni bir satır oluşturarak div # 1'in altına sarıldığına dikkat edin . Div # 2'nin altına sarılamaz .
Sonuç olarak, öğeler satırdaki en uzun değilse, beyaz boşluk kalır ve çirkin boşluklar oluşturur.
column wrap
Geçiş yaparsanız flex-flow: column wrap, ızgara benzeri bir düzen daha elde edilebilir. Bununla birlikte, sütun yönündeki bir konteynerin hemen hemen dört potansiyel sorunu vardır:
- Flex öğeleri yatay olarak değil dikey olarak akar (bu durumda ihtiyacınız olduğu gibi).
- Kap, dikey olarak değil (Pinterest düzeni gibi) yatay olarak genişler.
- Kabın sabit bir yüksekliğe sahip olmasını gerektirir, böylece öğeler nereye sarılacağını bilir.
- Bu yazı itibariyle , kapsayıcının ek sütunları barındırmak için genişlemediği tüm büyük tarayıcılarda bir eksikliğe sahiptir .
Sonuç olarak, sütun yönlü bir kap bu durumda ve diğer birçok durumda bir seçenek değildir.
Öğe boyutları tanımlanmamış CSS Izgarası
Izgara Düzeni , içerik öğelerinin çeşitli yükseklikleri önceden belirlenebiliyorsa , sorununuz için mükemmel bir çözüm olacaktır . Diğer tüm gereksinimler Grid'in kapasitesi dahilindedir.
Çevreleyen öğelerle boşlukları kapatmak için ızgara öğelerinin genişliği ve yüksekliği bilinmelidir.
Dolayısıyla, yatay akan bir duvar düzeni oluşturmak için CSS'nin sunduğu en iyi olan Grid, bu durumda yetersiz kalıyor.
Aslında, boşlukları otomatik olarak kapatabilen bir CSS teknolojisi gelene kadar, genel olarak CSS'nin bir çözümü yoktur. Bunun gibi bir şey muhtemelen belgenin yeniden düzenlenmesini gerektirecektir, bu nedenle ne kadar yararlı veya verimli olacağından emin değilim.
Bir senaryoya ihtiyacınız olacak.
JavaScript çözümleri, içerik öğelerini boşluk olmadan yeniden düzenlemek için belge akışından kaldıran mutlak konumlandırma kullanma eğilimindedir. İşte iki örnek:
Öğe boyutları tanımlanmış CSS Izgarası
İçerik öğelerinin genişliğinin ve yüksekliğinin bilindiği mizanpajlar için, saf CSS'de yatay olarak akan bir duvar mizanpajı:
grid-container {
display: grid; /* 1 */
grid-auto-rows: 50px; /* 2 */
grid-gap: 10px; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */
}
[short] {
grid-row: span 1; /* 5 */
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
grid-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
font-weight: bold;
color: white;
}
<grid-container>
<grid-item short>01</grid-item>
<grid-item short>02</grid-item>
<grid-item tall>03</grid-item>
<grid-item tall>04</grid-item>
<grid-item short>05</grid-item>
<grid-item taller>06</grid-item>
<grid-item short>07</grid-item>
<grid-item tallest>08</grid-item>
<grid-item tall>09</grid-item>
<grid-item short>10</grid-item>
<grid-item tallest>etc.</grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
Nasıl çalışır
- Blok düzeyinde bir ızgara konteyneri oluşturun. (
inline-griddiğer seçenek olabilir)
grid-auto-rowsMülkiyet otomatik olarak oluşturulan satırların yüksekliğini ayarlar. Bu ızgarada her satır 50 piksel uzunluğundadır.grid-gapMülkiyet için bir kısaltmadır grid-column-gapve grid-row-gap. Bu kural, ızgara öğeleri arasında 10 piksellik bir boşluk ayarlar . (Öğeler ve kap arasındaki alan için geçerli değildir.)grid-template-columnsMülkiyet açıkça tanımlanmış sütunların genişliğini ayarlar.
repeatNotasyonu tekrar sütunların (ya da sıraların) bir model tanımlar.
auto-fillİşlev kabı taşan mümkün olduğu kadar çok sayıda sütun (veya satır) hizalamak için kılavuz anlatır. (Bu, esnek düzenlere benzer bir davranış oluşturabilir flex-wrap: wrap.)
minmax()Fonksiyon her bir kolonu (ya da arka arkaya) için minimum ve maksimum boyut aralığını belirler. Yukarıdaki kodda, her bir sütunun genişliği, kabın minimum% 30'u ve mevcut boş alanın maksimum genişliği olacaktır.
frBirim ızgara kabında boş alan bir bölümünü temsil eder. Flexbox'ın flex-growmülkü ile karşılaştırılabilir .
İle grid-rowve spangrid öğelerine kaç satır yayılmaları gerektiğini söylüyoruz.
CSS Grid için Tarayıcı Desteği
- Chrome - 8 Mart 2017 itibarıyla tam destek (sürüm 57)
- Firefox - 6 Mart 2017 itibarıyla tam destek (sürüm 52)
- Safari - 26 Mart 2017 itibarıyla tam destek (sürüm 10.1)
- Edge - 16 Ekim 2017 itibarıyla tam destek (sürüm 16)
- IE11 - mevcut spesifikasyon desteği yok; eski sürümü destekler
İşte resmin tamamı: http://caniuse.com/#search=grid
Firefox'ta harika ızgara yer paylaşımı özelliği
Firefox geliştirme araçlarında, ızgara kabını incelediğinizde, CSS bildiriminde küçük bir ızgara simgesi vardır. Tıklandığında, sayfada kılavuzunuzun bir taslağını görüntüler.
Daha fazla ayrıntı burada: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
