Izgaraya mı Esnekliğe mi?

Faydalı Alternatif Metin Yazma

Yakın zamanda Twitter dizisi Chris Coyier tarafından başlatılan, insanların genel olarak CSS Grid Layout’un flexbox’a karşı kullanım durumlarını nasıl yorumladığını düşünmemi sağladı:

Doğal olarak en anlayışlı yanıtlardan bazıları Rachel Andrew ve Jen Simmons’tan geldi:

Ancak tweetleri tek tek okumak tüm hikayeyi anlatmaz. Bu makalede, Grid veya flexbox’ı ne zaman ve nerede kullanmak isteyebileceğinizi ve birini veya diğerini seçmek için bazı nedenleri açmak istiyorum.

Konudaki yanıtları okurken beni şaşırtan şey, yalnızca sayfa düzeyinde düzen için Grid’i ve diğer her şey için flexbox’ı kullanacaklarını belirten kişi sayısıydı. Bunu bir kural olarak alırsanız, Grid’in gücü söz konusu olduğunda kendinizi ciddi şekilde sınırlarsınız. Vereceğim ana tavsiye, her tasarımı ayrı ayrı ele almak, mevcut seçenekleri analiz etmek ve hangi teknolojiye ihtiyacınız olduğu konusunda varsayımlarda bulunmamaktır. Bir yerleşim yöntemi seçerken kendinize sorabileceğiniz sorulardan bazıları burada.

Ne kadar matematik yapman gerekiyor?

Konuya kendi katkım şuydu:

Çoğu zaman, kullanmak zorunda kalırsanız hesap() kesin iz boyutları elde etmek için çok fazla (örneğin, olukları faktoring) o zaman Grid kullanmayı düşünmeye değer fr birim sizin için ağır kaldırma işlemini yapacak ve sizi herhangi bir sayıda baş ağrısından kurtaracaktır. Bu genel bir prensip olarak iyi olsa da, resmin tamamı bu değil. Mizanpajınız gerektirmese de, Grid’e ihtiyaç duyabileceğiniz durumlar vardır. hesap(). Bir örnek, her parçanın 200 piksel genişliğinde olduğu sabit genişlikli, iki boyutlu bir düzen olabilir – buna ihtiyacınız yok hesap() size bu izlerin ne kadar geniş olması gerektiğini söylemek için, ancak yine de Grid’in davranışını isteyebilirsiniz. Aynı şekilde, ihtiyacınız olan yerlerde flexbox kullanmak için durumlar vardır. hesap()bu nedenle bu yalnızca bir kılavuz olarak yorumlanabilir.

Bir boyut mu, iki mi?

Grid ve flexbox arasındaki büyük fark, Grid’in, flexbox’ın yapmadığı iki boyutta (satırlar ve sütunlar) öğelerin yerleşimini kontrol etmemize izin vermesidir. Yine, bu yapman gerektiği anlamına gelmez asla tek boyutlu düzenler için ızgara kullanın. Bu demo ve eşlik eden makale:

Kalemi Gör Değişkenler ve medya sorguları içeren CSS Izgara bileşenleri Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Elementlerin nasıl davranmasını istiyorsunuz?

Düzeni iki boyutlu olarak kontrol etmeniz gerektiğinde ızgara genellikle doğru seçimdir. Bu, Grid’i aşağıdakiler için daha iyi bir seçim yapmaz her şey Yine de. Izgara ile izleriniz (satırlar ve sütunlar), hücreler ve ızgara alanları (birden fazla hücreden oluşan bir grup) vardır ve öğeler bu hücrelere veya Izgara alanlarına yerleştirilmelidir.

Diyelim ki şöyle bir düzenimiz var:

Üç sıra halinde soldan sağa yerleştirilmiş eşit genişlikte dokuz öğeden oluşan bir ızgaramız ve her öğe arasında 20 piksel boşluk var. Bunu Grid veya flexbox ile yapabiliriz. Izgara kodu çok daha basit ve temizdir:

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
/* Assuming we want our rows to be a fixed height – could be left as the default `auto` if we want the height to respond to the content */
gap: 20px;
}

Öğeler daha sonra başka bir şey yapmamıza gerek kalmadan otomatik olarak yerleştirilir. Bu konuda gerçekten akıllı olmak istiyorsak Grid’s’i kullanabiliriz. otomatik sığdır() ve en az en çok() medya sorgularına ihtiyaç duymadan bize tamamen duyarlı bir düzen sağlamak için işlevler – bu örneği yeniden boyutlandırmayı deneyin ve ne olduğunu görün.

Kalemi Gör Izgara otomatik sığdırma örneği Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Heydon Pickering’in videosunu izlemenizi tavsiye ederim Algoritmik Düzenler Bu tekniğe genel bir bakış ve daha fazlası için.

Buna karşılık, bu düzeni flexbox ile oluşturacak olsaydık, asıl öğeler ızgara kabının yanı sıra:

.grid {
display: flex;
flex-wrap: wrap;
margin: -10px;
width: calc(100% + 20px);
}

.item {
width: calc((100% / 3) - 20px);
flex: 0 0 auto;
margin: 0 10px 20px 10px;
}

Öğelerin toplam genişliğinin kabın kendisinden daha büyük olacağı ve dolayısıyla bir sonraki satıra sarılacağı gerçeğini ortadan kaldırmak için ızgara kabı üzerinde negatif kenar boşluklarına ihtiyacımız var. Ayrıca, aynı duyarlı davranışı kutudan çıkarmıyoruz ve muhtemelen medya sorgularını kullanmamız gerekecek.

Kalemi Gör Flexbox düzeni örnekleri Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Aynı düzeni flexbox ile elde etmenin birkaç farklı yolu vardır, ancak hepsi biraz hileli hissettiriyor – çünkü öyleler. Flexbox’ı gerçekten tasarlanmadığı bir şey için kullanıyoruz – ancak bu her zaman yanlış seçim olduğu anlamına gelmez.

Birçok modern CSS çerçevesi, mizanpajlar için bu yöntemde bazı varyasyonlar kullanır. Bir yan not olarak, bu yoldan gitmeniz gerekiyorsa, büyük bir hayranıyım. Susybu sizin için matematiği idare eder.

Peki, burada daha iyi seçim hangisi – Grid veya flexbox? Grid’in burada bazı açık avantajları var gibi görünüyor, ancak bu soruyu cevaplamak için dokuzdan fazla ancak 12’den az öğemiz olduğunda ne olması gerektiğini düşünmemiz gerekiyor (bir sonraki kat, onların bir satırı doldurmasına izin verecek) . Yeni öğelerin, daha önce gördüğümüz örnekler gibi bir sonraki satırın başına oturmasını istiyor muyuz? Yoksa farklı davranmalarını mı istiyoruz? Belki bir sonraki satırda yalnızca bir öğe varsa, aşağıdaki örnek A gibi, satırdaki tüm kullanılabilir alanı kaplamasını isteriz. Ya da belki iki öğe varsa, B örneğindeki gibi onların ortalanmasını istiyoruz.

Izgara Düzeni ve otomatik yerleştirmeyi kullanarak, önceki örneklerde olduğu gibi soldaki hücreye yalnızca son öğenin yerleştirilmesi seçeneğine sahibiz – değerini varsayarak yön özellik olarak ayarlanmadı rtl (bu durumda öğenin yerleşimi sağdan sola akacak ve son öğe sağdaki hücreye yerleştirilecektir). Aşağıdaki öğeler, bir sonraki kullanılabilir ızgara hücrelerine yerleştirilecektir. Flexbox, öğelerin esnek. Bu, esnek ve hizalama özelliklerinin bir kombinasyonunu kullanarak bu öğelerin davranışını kontrol edebileceğimiz anlamına gelir.

Kalemi Gör Flexbox düzeni örnekleri Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Dolayısıyla, yukarıdaki düzen için Grid’i mi yoksa flexbox’ı mı seçeceğiniz, gerçekten ızgara öğelerinizin nasıl davranmasını istediğinize bağlıdır – ve farklı durumlar için farklı cevaplar olabilir.

Flexbox’ı Grid ile değiştirmeye mi çalışıyorsunuz?

Konuşma yaptığımda, Grid yerine ne zaman flexbox kullanacağım ve artık flexbox’a ihtiyacımız olup olmadığı soruluyor. Yukarıdaki örnekte gördüğümüz gibi Grid, flexbox’ın yerini tutmaz. Her ikisi de oldukça mutlu bir şekilde bir arada var olurlar ve her birinin ne zaman kullanılacağını bilmek, mizanpajlarınıza daha da fazla güç verir!

Grid kullanılarak oluşturulmuş bir bileşen

Yukarıdaki bileşende, sütundaki metnin, resmin ve başlığın yerleşimini kontrol etmem gerekiyordu. ve satır ekseni ve birbirleriyle nasıl etkileşime gireceklerini bir dereceye kadar kontrol edin. Bunu tatmin edici bir şekilde yapmanın tek yolu Grid kullanmaktır.

Ancak bir masaüstü gezinme menüsü oluşturmak için kesinlikle flexbox kullanırdım:

Kalemi Gör Flexbox navigasyonu Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Burada akışı tek bir boyutta kontrol etmek istiyorum ve öğelerin esnek – hangi flexbox gerçekten iyi iş çıkarıyor. Flexbox ile bu öğelerin sarılıp sarılmamasını seçebilir ve boşluk tüm öğelerin tek bir satırda görüntülenmesine izin vermiyorsa, bunların incelikle sarılmasına izin verebiliriz.

Grid’i desteklemeyen tarayıcılarda düzen nasıl görünmelidir?

Grid kullanıyorsak, göz önünde bulundurmamız gereken diğer konu tarayıcı desteği ve Grid’i desteklemeyen tarayıcılarda (IE11 ve altı) mizanpajımıza ne olmasını istediğimizdir. Benim yaklaşımım, bu durumları karşılamak için özellik sorguları kullanmaktır. Genellikle (ancak her zaman değil) eski tarayıcılar için bir geri dönüş olarak esnek kutu tabanlı bir düzeni tercih ederim:

.grid {
display: flex;
flex-wrap: wrap;
/* Rest of the fallback layout code */
}

@supports (display: grid) {
.grid {
display: grid;
/* Rest of the Grid code */
}
}

Ancak, kendinizi tekrarlamak için saatler harcadığınızı fark ederseniz, birebir aynı Grid’i desteklemeyen tarayıcılar için düzen, o zaman muhtemelen Grid’i ilk etapta kullanmak için pek fazla neden yoktur. Grid’in en güzel yanı, flexbox’ın tek başına yapamayacağı şeyleri yapabilmesidir.

Burada bazı çok basit, yaygın yerleşim örneklerini ve bunların Grid veya flexbox ile nasıl uygulanacağını tartıştık. Daha karmaşık düzen örnekleri görmek için bu blogdaki diğer makalelere göz atın veya gelecekte daha fazla gönderi için bizi izlemeye devam edin.

Bir cevap yazın

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