Izgara Dönüştürmenizi Sağlayacak 3 CSS Izgara Tekniği

Izgara Dönüştürmenizi Sağlayacak 3 CSS Izgara Tekniği

CSS ızgara düzeni göz korkutucu gelebilir. Aslında, birkaç yıl boyunca bundan kaçındım ve bir zor Ölüm flexbox fanı.

Ardından, melodimi tamamen değiştiren aşağıdaki 3 güçlü özelliği/tekniği buldum.

Spoiler, işte hepsinin olduğu bir tweet. Biraz daha fazlasını öğrenmek için okumaya devam edin!

Tweeti görüntüle

1: Şebeke Akış Eksenini Değiştirin

Bu davranışı ilk önce değişken genişlikteki öğelerin X ekseni hizalamasını istediğimde ve ayrıca yararlanmak istediğimde istedim. gap.

grid-auto-flow: column;

Varsayılan ızgara akışı, öğelerin Y ekseni boyunca sayfadan aşağı aktığı blok düzenini tamamlayan “satır” düzenine yöneliktir.

Bu, varsayılan davranışı “sütun” olarak değiştirir; bu, öğelerin varsayılan olarak X ekseni boyunca akması anlamına gelir.

  • öğeler, içeriklerini içermek için gerektiği kadar yer kaplar kadar kadar metnin yeni satırlara bölüneceği kabın maksimum genişliği
  • ızgarada “sarma” davranışının olmaması nedeniyle taşma riski vardır, bu da bu özelliğin atanması şeyleri X ekseni boyunca sonsuza kadar akıtacağı anlamına gelir
    • bu, bu davranışı yalnızca bir medya sorgusu aracılığıyla belirli bir görüntü alanı genişliğinin üzerine uygulayarak çözülebilir.

Not: bir kez flexbox gap tamamen destekleniyorsa, aynı zamanda sarma davranışına sahip olması nedeniyle bu sonuç için muhtemelen daha iyi bir yöntem olacaktır.

Gezinme çubuğu veya simgeler listesi gibi değişken genişliklerin istendiği kısa içerik için ve sarma bir sorun olmadığında veya bu özelliği çevirmek için bir medya sorgusu kullanılabilir.

Kelimenin tam anlamıyla, CSS bir konu olarak ortaya çıktığında herkesin dalga geçtiği şey:

“Bir div’i nasıl ortalarsınız?”

Grid en kolay cevaba sahip!

Psst – ilgilenen çok merkezleme çözümleri? Kontrol et “CSS’de Merkezleme için Eksiksiz Kılavuz

place-content: center;

Herhangi bir alt içeriği hem dikey (Y) hem de yatay (X) olarak ortalar 🙌

  • biraz var yakaladım çocuklara verilen davranışla ilgili
  • görsel görünüm, kabın yüksekliği çocukların boyunu geçmiyorsa, yalnızca yatay olarak ortalanmış olabilir.

Bir şeyi dikey ve yatay olarak ortalamak istediğiniz zaman.

3. Kendinden Duyarlı Izgara Sütunları

:root {
--grid-col-breakpoint: 15rem;
}

.grid-columns {
grid-template-columns: repeat(
auto-fit,
minmax(var(--grid-col-breakpoint), 1fr)
);
}

Şebekeye özgü işlevler repeat() ve minmax() ile birlikte auto-fit anahtar kelime birlikte çalışarak, doğrudan çocukların eşit genişlikte, duyarlı sütunlar haline geldiği bir sonuç yaratır.

Izgara kabı yeniden boyutlandırıldığında, sağlanan değere ulaşıldığında --grid-col-breakpointsütunlar yeni bir sanal satıra düşmeye başlar.

kullanımı --grid-col-breakpoint CSS değişkenleri, bir düzen içinde veya yalnızca tek bir sınıfa sahip bileşenler arasında çeşitli içeriği barındırmak için satır içi stil aracılığıyla bu “kesme noktasının” değiştirilmesine izin verir.

  • sütunlar her zaman eşit genişlikte olacak, kap da boyut olarak esnedikçe eşit kalacak şekilde büyüyecek ve küçülecek
  • yetim sütunların belirli kap genişliklerinde bulunması mümkündür

Neler olduğuna dair daha kapsamlı bir açıklamaya göz atın “12 Sütunlu Izgarayı Değiştirmek İçin Çözümler

Eşit genişlikte sütunlara sahip, özünde duyarlı bir ızgaraya ihtiyacınız varsa.

Bu davranış, aynı zamanda, medya sorguları tarafından kontrol edilmek yerine kapsayıcı genişliğine yanıt verdiği için şu anda elimizde olan iki geçerli “kapsayıcı sorgusu” yönteminden biridir.

kullanma fikri hakkında daha fazla bilgi edinin kapsayıcı sorguları için ızgara >

Bu CodePen, 3 tekniği de gösterir:

Stephanie Eckles (@5t3ph)

benim kontrol et yumurta kafa dersleri bu ızgara tekniklerini daha fazla keşfeden

Bir cevap yazın

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