12 Sütunlu Izgarayı Değiştirmek İçin Çözümler

Hem CSS ızgarasını hem de esnek kutuyu kullanarak basitleştirilmiş duyarlı ızgara sistemleri oluşturalım ve 12 sütunlu ızgara sistemlerinin çoğunu ağır çerçevelerden çıkaralım.

Izgaraya gerçekten bakmadıysanız veya sizin için flexbox hakkında düşünmek için çerçevelere güveniyorsanız, bu, anlayışınızı geliştirmenize yardımcı olacaktır 🚀

Web’e baktığınızda, genellikle birkaç seçkin çeşnide düzenlenmiş içeriği görürsünüz:

  • konteynerinin tam genişliği
  • iki eşit genişlikte sütun
  • üç eşit genişlikte sütun
  • dört eşit genişlikte sütun

Genellikle bu, kesme noktaları arasında genişlikler ayarlayan önemli miktarda yardımcı sınıf tarafından gerçekleştirilir.

CSS ızgarası ve flexbox arasında ve yukarıda bahsedilen düzenler göz önünde bulundurularak, duyarlı ızgara sütunlarının kurulumunu büyük ölçüde azaltabiliriz.

Her iki çözüm için de, yalnızca iki sınıf oluşturacağız ve eşit şekilde yeniden boyutlandırılan 1-4 sütun içeriği işleyebileceğiz 🙌

Not: Bu çözümler, birincil sayfa düzeni kapsayıcılarını tanımlamak için en iyi şekilde çalışır, ancak diğer düzen hizalama ihtiyaçları için boşluğu doldurma konusunda bazı önerilerle bitireceğiz.

Izgara, adından da anlaşılacağı gibi ızgaralarda üstündür. Burada, “sütun” ve “satır” terimleri, çözümünüzü tanımlamayı daha net hale getirebilecek CSS ızgarasıyla çalışma şeklinize özgüdür.

Özellikle aşağıdaki kullanışlı özellikler şunlardır:

  • gap – sütunlar veya satırlar olsun, ızgara öğeleri arasında eşit boşluk tanımlar
  • repeat() – her satır veya sütun için veya belirli sayıda satır veya sütun için kuralları hızlı bir şekilde tanımlayın
  • fr birim – o sütuna veya satıra dağıtılmak üzere bırakılan alanın kullanılabilir “kesiri”
  • minmax() – minimum ve maksimum kabul edilen sütun genişliğini veya satır yüksekliğini tanımlayın

İlk olarak bir sarma sınıfı oluşturuyoruz. Bu sadece bizim eşdeğerini uygulamak içindir gap dolgu olarak değer ve tamamen isteğe bağlıdır. Bunu isteyebilirsiniz çünkü gap özellik, boşluk aralığını ızgaranın dışına uygulamaz. Belki de içeren öğenize dolgu uygulanmış olabilir; bodyveya ızgara sütunlarınızın görünümün uçtan uca temas etmesini isteyebilirsiniz.

$gridGap: 2rem;

.grid-wrap {
padding: $gridGap;
}

İşte bu – herhangi bir öğeyi hemen alt öğelerin eşit genişlikte, duyarlı sütunlar haline geldiği bir ızgara kabına hızla dönüştürebilen tek sınıf.

İşte tam kural ve sonra onu parçalayacağız:

$minColWidth: 15rem;

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax($minColWidth, 1fr));
gap: 2rem;

& + .grid {
margin-top: $gridGap;
}
}

İlk olarak, içerik sütunlarımız için bir minimum genişlik tanımlarız. kullanmanı tavsiye ederim rem deneyiminiz boyunca tutarlı olması için bu değer için. buna göre ayarlarsak em temel öğe yazı tipi boyutundaki herhangi bir değişiklikle değiştirilir. Birimlerle çalışma hakkında daha fazla bilgi edinin >

O zaman, sihir nasıl tanımladığımızdan gelir grid-template-columns.

kullanıyoruz repeat var olan tüm sütunlara aynı parametrelerin uygulanmasını istediğimizi söyleme işlevi.

Ardından, mutlak bir sayı yerine, auto-fit Mevcut herhangi bir alanı doldurmak için sütunları gererek sütunların eşit genişlikte kalmasını sağlamaktan sorumlu olan değer.

Ondan sonra kullanırız minmax() izin verilen minimum sütun genişliğini ayarlamak ve ardından 1fr içeriğin sütunu odanın izin verdiği kadar doldurmasını sağlayan maks.

Ardından boşluğumuzu ve ardışık arasındaki aynı değeri uygulamak için isteğe bağlı bir kuralı ekliyoruz. .grid kaplar.

İşte tamamen çözüm:

Stephanie Eckles (@5t3ph)

Not: Teknik olarak içine 4’ten fazla sütun ekleyebilirsiniz. .griddaha büyük görünüm pencerelerinde bile minimum genişliğe kadar daha dar hale gelirler.

benim kontrol et yumurta kafa video dersi Bu tekniğin nasıl bir araya geldiği hakkında.

3 sütunlu + ızgara durumunda, iyi yanıt verse de, bazı görüntü alanı genişliklerinde “yetim” bir sütunla karşılaşacaksınız.

Medya sorgularıyla bunun üstesinden gelebilirsiniz, ancak bunlar kırılgan olacaktır.

Yetim kolonları önlemek tasarım için gerekliyse, bunun yerine flexbox çözümünü tercih etmek isteyebilirsiniz.

Flexbox çözümümüz, önceliğin eşit genişlikte sütunlar olduğu için ızgarayı taklit edecektir.

Ancak, henüz tam olarak desteklenen bir flexbox boşluk özelliği yoktur (biri yolda!), bu yüzden aynı etkiyi elde etmek için biraz hile yapmalıyız.

Izgara çözümüyle aynı amaç:

$gridGap: 2rem;

.flex-grid-wrap {
padding: $gridGap;
}

Doğal flexbox davranışı, öğeleri, her öğenin içerik uzunluğuyla büyüdüğü ve büyüdükçe bir sonraki öğeyi çarptığı bir sıraya yerleştirir.

Bu nedenle, eşit genişlikte davranış oluşturmak için biraz fazladan mantık eklemeliyiz.

Kuralı ile tanımlarız display: flexve sonra hemen çocukları kullanmaya yönlendiren bir kural ekliyoruz. flex değerlendiren davranış:

  • flex-grow: 0 – eşit olarak paylaşılan bir alanın ötesinde büyümeyi önler
  • flex-shrink: 1 – elemanları aynı oranda “küçülmeye” yönlendirir
  • flex-basis: 100% – karşı koyar flex-grow öğeleri mevcut alanı dolduracak şekilde genişletme yönergesi
.flex-grid {
display: flex;

& > * {
flex: 0 1 100%;

&:not(:first-child) {
margin-left: $gridGap;
}
}
}

Ve boşluk olmaması kuralını telafi etmek için tanımlarız margin-left ilk öğe hariç hepsinde.

Küçük görünüm alanları için tutamaç

Harika bir başlangıç, ancak bu, küçük görünüm pencereleri için asla bozulmaz:

küçük görünüm alanında geçerli esnek sütun davranışı

Başlangıçta belirtildiği gibi, bu ızgara çözümü birincil sayfa düzeni kapsayıcıları için kullanılmak üzere tasarlandığından, bir kesme noktası eklemek için medya sorgularını getireceğiz. flex-wrap: wrapve marjımızı “boşluk kesme” yi sol kenar boşluğu yerine bir üste değiştirmek.

Sarmanın ne zaman ekleneceğini belirlemek için, temel çözüm, kabul edilebilir minimum genişliğimizi 3 ile çarpar. Buradaki mantık, 3 sütunun bireysel genişlikleri kabul edilebilir minimumumuzdan daha az olduğunda, bunun yerine her şeyi tam genişlikte kırarız ve atarız. Kabul edilebilir minimumunuza bağlı olarak, bu kuralı değiştirebilirsiniz.

.flex-grid {
@media (max-width: ($minColWidth * 3)) {
flex-wrap: wrap;

& > * {
margin: 2rem 0 0 !important;
}
}

@media (min-width: ($minColWidth * 3)) {
& + .flex-grid {
margin-top: $gridGap;
}
}
}

Ayrıca bir ekledik min-width Sorgu, böylece daha büyük görünüm alanlarında üst kenar boşluğu “boşluğuna” sahip oluruz. Küçük de olsa, içerik grupları arasındaki marjı ikiye katlardık, bu da muhtemelen arzu edilen bir sonuçtur.

İşte flexbox çözüm demosu:

Stephanie Eckles (@5t3ph)

Bu ızgarayı sayfanızdaki alt kapsayıcılara uygulamak, kapsayıcı genişliğine değil görünüm alanı genişliğine bakan manuel bir medya sorgusu olduğundan istenmeyen kesme noktası sorunlarına neden olabilir.

Olası çare: Her zaman uygulamak yerine max-width sorgu, bunu bir sınıfla uygulayabilirsiniz. Bu, daha az istenmeyen sonuçlara sahip alt kaplar için bu temel ızgara fikrinin kullanılmasını sağlayacaktır.

Önerilen çözümler çok geneldir ancak geniş bir uygulama alanına sahiptir.

Her birinin amacı, ülkenin çocuklarını yönlendirmek için uygulanacaktır. bodyveya bir katman derinliğinde bir main geneli sınırlayan bileşen max-width içeriğin yüzdesi yayılır, ancak yine de görünüm alanıyla senkronize olarak aşağı doğru yanıt verir.

  • yararlanmak istiyorsun auto-fit + minmax Kabul edilebilir minimum genişliğe ulaşıldığında öğeleri otomatik olarak yeni bir satıra çarpma davranışı
  • kesme noktaları uygulamak için medya sorguları gerekmediğinden alt kapsayıcılarda kullanmayı planlıyorsunuz (daha küçük bir minimum genişlik ayarlayarak fikri gezinme çubukları veya kart eylemi öğeleri gibi bileşenlere uygulama fikrini genişletebilirsiniz)
  • istersin hemen hemen öğeler içerik uzunluklarına göre yanıt verdiği için kapsayıcı sorguları elde edin
  • “ızgara” davranışına ihtiyacınız olan tek yer, kart satırlarını tanımlamak veya iki sütunlu metin içeriği oluşturmak gibi birincil sayfa kapsayıcılarını düzenlemektir.
  • “yetim” sütunları önlemek istiyorsunuz

Eğer sen Yok canım 12 Sütunlu Bir Izgara İstiyor

İşte burada – ancak öğeleri istediğiniz gibi yerleştirmekten siz sorumlusunuz, bu da daha özel CSS kuralları anlamına gelir 🙂

.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2rem;
}

Alternatif olarak, sütun beklentilerini daha net bir şekilde tanımlamak için yalnızca birkaç hedefli sınıf oluşturun. Bu tür bir kullanımın, sütunların tam olarak 1/2, 1/3 veya 1/4’e eşit olacak alanı kaplayacağı anlamına geldiğini unutmayın. Bu nedenle, yalnızca bir sütununuz varsa 2cols ızgara, yine de toplam genişliğin sadece yarısını kaplayacak, mevcut alanı doldurmayacaktır.

.grid {
display: grid;
gap: 2rem;

&--2cols {
grid-template-columns: repeat(2, 1fr);
}

&--3cols {
grid-template-columns: repeat(3, 1fr);
}

&--4cols {
grid-template-columns: repeat(4, 1fr);
}
}

Minimal, genel uygulama düzeni kapsayıcıları ve yardımcı programları içeren temel bir HTML/Sass çözümü için hafif bir başlangıç ​​noktasıyla ilgileniyorsanız, hızlı başlangıç ​​>

Bir cevap yazın

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