CSS Çok Sütunlu Düzen Ne Zaman ve Nasıl Kullanılır?

CSS Izgara Düzeni ve Flexbox ile ilgili tüm heyecanda, başka bir düzen yöntemi genellikle göz ardı edilir. Bu makalede, genellikle çok sütunlu veya bazen "CSS Sütunları" olarak adlandırılan Çok Sütunlu Düzen'e bir göz atacağım. Hangi görevler için uygun olduğunu ve sütun oluştururken dikkat etmeniz gereken bazı şeyleri öğreneceksiniz.

Multikol Nedir?

Çoklu sütunun temel fikri, bir gazetede olduğu gibi, bir içerik yığınını alıp birden çok sütuna akıtabilmenizdir. Bunu iki özellikten birini kullanarak yaparsınız. column-count özelliği, içeriğin içine girmesini istediğiniz sütun sayısını belirtir. column-width özelliği ideal genişliği belirtir ve tarayıcının kaç sütunun sığacağını bulmasını sağlar.

Çok noktalı bir kapsayıcıya dönüştürdüğünüz içeriğin içinde hangi öğelerin olduğu önemli değil, her şey normal akışta kalır, ancak sütunlara bölünür. Bu, multicol'ü bugün tarayıcılarda sahip olduğumuz diğer düzen yöntemlerinden farklı kılar. Örneğin, Flexbox ve Grid, kabın alt öğelerini alır ve bu öğeler daha sonra esnek veya ızgara düzenine katılır. multicol ile, bir sütunun içi dışında hala normal akışınız olur.

Aşağıdaki örnekte, en az 14em sütunlarını görüntülemek için column-width kullanıyorum. Multicol, sığabileceği kadar 14em sütun atar ve ardından kalan alanı sütunlar arasında paylaşır. Sütunlar en az 14em olacaktır, yalnızca bir sütun görüntüleyemezsek, bu durumda daha küçük olabilir. Multicol, CSS'de bu tür davranışları ilk kez gördüğümüzde, varsayılan olarak esasen duyarlı olan sütunlar oluşturuldu. Medya Sorguları eklemeniz ve çeşitli kesme noktaları için sütun sayısını değiştirmeniz gerekmez, bunun yerine en uygun genişliği belirleriz ve tarayıcı bunu çözer.

Stil Sütunları

Sütun özelliklerinden birini kullandığınızda oluşturulan sütun kutuları hedeflenemez. Bunları JavaScript ile ele alamazsınız veya tek bir kutuya arka plan rengi verecek veya dolgu ve kenar boşluklarını ayarlayacak şekilde stil veremezsiniz. Tüm sütun kutuları aynı boyutta olacaktır. Yapabileceğiniz tek şey, border gibi davranan column-rule özelliğini kullanarak sütunlar arasına bir kural eklemektir. Ayrıca varsayılan değeri 1em olan column-gap özelliğini kullanarak sütunlar arasındaki boşluğu kontrol edebilirsiniz, ancak bunu herhangi bir geçerli uzunluk birimiyle değiştirebilirsiniz.

Multicol'ün temel işlevi budur. Bir parça içerik alabilir ve sütunlara bölebilirsiniz. İçerik sırayla sütunları dolduracak ve satır içi yönde sütunlar oluşturacaktır. Sütunlar arasındaki boşlukları kontrol edebilir ve kenarlıkla aynı olası değerlerle bir kural ekleyebilirsiniz. Şimdiye kadar çok iyi ve yukarıdakilerin tümü tarayıcılarda çok iyi destekleniyor ve uzun süredir bu özelliği geriye dönük uyumluluk açısından çok güvenli hale getiriyor.

Sütunlarınızla ilgili olarak göz önünde bulundurmak isteyebileceğiniz başka şeyler ve web'de sütunları kullanırken dikkat etmeniz gereken bazı olası sorunlar vardır.

Yayılan Sütunlar

Bazen bazı içeriği sütunlara bölmek, ancak daha sonra bir öğenin sütun kutularına yayılmasına neden olmak isteyebilirsiniz. Column column-span özelliğinin multicol kapsayıcısının bir alt öğesine uygulanması bunu başarır.

Aşağıdaki örnekte, bir <blockquote> öğesinin sütunlarıma yayılmasına neden oldum. Bunu yaptığınızda, içeriğin yayılma alanının üzerinde bir dizi kutuya bölündüğünü ve ardından aşağıda yeni bir sütun kutusu seti başlattığını unutmayın. İçerik, yayılan öğenin üzerinden atlamaz.

column-span özelliği şu anda Firefox'ta uygulanmaktadır ve bir özellik bayrağının arkasındadır.

Geçerli spesifikasyonda, column-span değerlerinin ya all ya da none olduğunu unutmayın. Sütunların yalnızca bazılarını dağıtamazsınız, ancak multicol ile diğer yerleşim yöntemlerini birleştirerek bir gazetede görebileceğiniz türde bir yerleşimi elde edebilirsiniz. Bu sonraki örnekte, iki sütun izi olan bir ızgara kapsayıcım var. Soldaki iz 2fr , sağdaki iz 1fr . Sol taraftaki parçada, iki parçalı bir multicol konteynere dönüştürdüğüm makale, ayrıca bir yayılma elemanına sahip.

Sağda, ikinci Grid sütun izine giden bir kenar var. Bizim için mevcut olan çeşitli yerleşim yöntemleriyle oynayarak, tam olarak hangi yerleşim yönteminin elimizdeki işe uygun olduğunu bulabiliriz - karıştırıp eşleştirmekten korkmayın!

İçerik Aralarını Kontrol Etme

Başlıklar içeren içeriğiniz varsa, muhtemelen bir başlığın bir sütundaki son şey olarak sona erdiği ve içeriğin bir sonraki sütuna geçtiği durumdan kaçınmak istersiniz. Altyazılı resimleriniz varsa, ideal durum, resim ve resim yazısının tek bir birim olarak kalması ve sütunlara bölünmemesidir. Bu sorunlarla başa çıkmak için CSS, içeriğin nerede kesildiğini kontrol etme özelliklerine sahiptir.

İçeriğinizi sütunlara böldüğünüzde, parçalanma olarak bilinen işlemi gerçekleştirirsiniz. Aynısı, örneğin bir yazdırma bağlamı için bir stil sayfası oluşturduğunuzda olduğu gibi, içeriğinizi sayfalar arasında bölerseniz de geçerlidir. Bu nedenle multicol, Web'deki diğer mizanpaj yöntemlerine göre Paged Media'ya en yakındır. Bu nedenle, birkaç yıldır içerikteki kesintileri kontrol etmenin yolu, CSS2.1'in parçası olan page-break- sonu özelliklerini kullanmak olmuştur.

• page-break-before
• page-break-after
• page-break-inside

Daha yakın zamanlarda, CSS Parçalama belirtimi, herhangi bir parçalanmış bağlam için tasarlanmış parçalanma özelliklerini tanımlamıştır; belirtim, Sayfalı Ortam, çoklu sütun ve durdurulmuş Bölgeler belirtimi için ayrıntıları içerir; Bölgeler ayrıca sürekli bir içerik parçasını parçalar. Bu özellikleri genel hale getirerek, Flexbox'taki hizalama özelliklerinin Izgara ve Blok düzeninde kullanılabilecekleri şekilde Kutu Hizalama belirtimine taşınmasıyla aynı şekilde, gelecekteki herhangi bir parçalanmış bağlama uygulanabilirler.

• break-before
• break-after
• break-inside

Örnek olarak, resim yazısının görüntüden ayrılmasını önlemek için <figure> öğesinde break-inside avoid kullandım. Destekleyen bir tarayıcı, sütunların dengesiz görünmesine neden olsa bile şekli bir arada tutmalıdır.

Ne yazık ki, multicol'deki bu özellikler için destek oldukça düzensizdir. Desteklenseler bile, kırılmayı kontrol etmeye çalışırken çok fazla istekte bulunmanın mümkün olacağı gerçeğinden dolayı bir öneri olarak görülmelidir, aslında tarayıcı gerçekten hiçbir yerde kırılamaz. Spesifikasyon, bu durumda öncelikleri tanımlar, ancak yalnızca en önemli durumları kontrol etmeniz muhtemelen sizin için daha yararlıdır.

Web'deki Sütun Sorunu

Web'de multicol'ün pek kullanıldığını görmememizin bir nedeni, okuyucuyu blok boyutunda kaydıran bir okuma deneyimiyle sonuçlanmanın çok kolay olacağı gerçeğidir. Bu, İngilizce veya başka bir dikey yazma modunu kullananlarımız için dikey olarak yukarı ve aşağı kaydırma anlamına gelir. Bu iyi bir okuma deneyimi değil!

Kabın yüksekliğini, örneğin vh görünüm birimini kullanarak sabitlerseniz ve çok fazla içerik varsa, satır içi yönde taşma olur ve bunun yerine yatay bir kaydırma çubuğu alırsınız.

Bunların hiçbiri ideal değildir ve web'de multicol kullanmak, sütunlarımıza akmayı hedefleyebileceğimiz içerik miktarı açısından çok dikkatli düşünmemiz gereken bir şeydir.

Taşma Sütunlarını Engelle

Spesifikasyonun 2. Seviyesi için, şu anda yatay kaydırma çubuğuna neden olan taşma sütunlarının bunun yerine blok yönünde oluşturulabileceği bir yöntemin nasıl etkinleştirileceğini düşünüyoruz. Bu, yüksekliği olan bir çoklu sütun kapsayıcınız olabileceği ve içerik bu kabı dolduran sütunlar oluşturduğunda, aşağıda yeni bir sütun kümesi oluşturulacağı anlamına gelir. Bu, yukarıdaki yayılma örneğimize biraz benzeyecek, ancak yeni sütun kutularının başlamasına neden olan bir anahtara sahip olmak yerine, blok boyutunda bir kısıtlamaya sahip bir kapsayıcının neden olduğu taşma olacaktır.

Bu özellik, multicol'ü web için çok daha kullanışlı hale getirecektir. Şu anda biraz uzakta olsak da, CSS Çalışma Grubu deposunda konuya göz atabilirsiniz. Bu özellik için ek kullanım durumlarınız varsa, bunları yayınlayın, yeni özelliği tasarlarken gerçekten yardımcı olabilir.

Multicol Bugün Neye Yararlı?

Mevcut spesifikasyonla, tüm içeriğinizi kaydırma sorunları göz önünde bulundurulmadan sütunlara bölmeniz önerilmez. Ancak, multicol'ün web'de ideal olduğu bazı durumlar vardır. Tasarım modellerine bakarken göz önünde bulundurmanız gereken bir şey yapmak için yeterli kullanım durumu vardır.

Daralan Küçük Kullanıcı Arabirimi veya Metin Öğeleri

Multicol, daha az yer kaplamak istediğiniz küçük bir öğe listesine sahip olduğunuz herhangi bir yerde yararlı olabilir. Örneğin, basit bir onay kutuları listesi veya bir ad listesi. Genellikle bu senaryolarda, ziyaretçi bir sütunu okuyup bir sonraki sütunun başına dönmez, içeriği tıklatılacak bir onay kutusu veya seçilecek bir öğe için tarar. Kaydırılmış bir deneyim oluştursanız bile bu bir sorun olmayabilir.

DonarMuseum web sitesinde Sander de Jong tarafından bu şekilde kullanılan bir multicol örneğini görebilirsiniz.

Bilinen Küçük Miktarlarda İçerik

Bazı içeriğin nispeten küçük olduğunu ve istenmeyen kaydırmalara neden olmadan ekranların çoğuna sığacağını bildiğimiz bir site tasarladığımız zamanlar vardır. Bir konuşmaya giriş için Notist sunum sayfalarında multicol kullandım.

Andy Clarke, Equfund web sitesi için güzel bir örnek tasarladı.

Çok küçük ekranların kaydırmaya neden olma olasılığını önlemek için, yüksekliği ve genişliği (veya mantıksal bir dünyada, satır içi kadar blok) kontrol etmek için medya sorgularını kullanabileceğinizi unutmayın. Sütunları yalnızca içerikleri için yeterince büyük bir min-height sahip bir kesme noktasında etkinleştirirseniz, bu, çok küçük cihazların kullanıcılarının kötü bir kaydırma deneyimi yaşamasını sağlayabilir.

İçeriğin Duvar Benzeri Görüntülenmesi

Çok Sütunlu Düzenin güzel çalıştığı başka bir yer, Duvarcılık türünde bir içerik görüntüsü oluşturmak istiyorsanız. Multicol, şu anda eşit olmayan yükseklik öğeleriyle bu tür bir düzen oluşturacak tek düzen yöntemidir. Izgara ya bir boşluk bırakır ya da iki boyutlu katı bir ızgara oluşturmak için öğeleri uzatır.

Veerle Pieters, ilham sayfasında multicol'ü bu şekilde kullanmanın güzel bir örneğine sahiptir.

Izgara ve Flexbox Geri Dönüşleri

column- özellikleri, Grid ve Flex düzeni için bir geri dönüş olarak da kullanılabilir. Bir kapta özelliklerden birini belirtirseniz, o kapsayıcıyı display: flex veya display: grid kullanarak bir Esnek veya Izgara düzenine dönüştürün, herhangi bir sütun davranışı kaldırılacaktır. Örneğin, Izgara Düzeni kullanan bir kart düzeniniz varsa ve düzen, sayfa boyunca değil de sütunlarda çalıştırılırsa okunabilirse, multicol'ü basit bir geri dönüş olarak kullanabilirsiniz. Grid'i desteklemeyen tarayıcılar multicol ekranı alacaklar, Grid'i destekleyenler Grid Layout'u alacaklar.

Multicol'ü Unutmayın!

Oldukça sık Grid ve Flexbox sorularını yanıtlıyorum, burada cevabın Grid veya Flexbox kullanmamak, bunun yerine Multicol'e bakmak. Muhtemelen her sitede kullanmayacaksınız, ancak bir kullanım durumuyla karşılaştığınızda gerçekten yardımcı olabilir. MDN'de multicol ve ilgili parçalanma özellikleri için faydalı kaynaklar vardır.

Bir projede multicol kullandıysanız, özelliği kullanabileceğimiz diğer yolları paylaşmak için yorumlara bir not bırakın.