CSS Izgara Başlangıç ​​Düzenleri - CSS Hileleri

Bu, CSS Grid kullanan düzenler ve desenler için başlangıç ​​şablonlarından oluşan bir koleksiyondur. Buradaki fikir, tekniğin neler yapabileceğini göstermek ve diğer projeler için yeniden amaçlanabilecek bir başlangıç ​​noktası sağlamaktır.

Grid için tarayıcı desteğinin iyi olduğunu ancak eski tarayıcılar için geri dönüşler gerektirdiğini unutmayın. Bu, bunların doğrudan bir kopyasının ve yapıştırmasının bazı kullanım durumları için uygun olmayabileceği anlamına gelir.

Kutsal Kase Düzeni

İki kenar çubuğunun ve gövde kopyasını tutan bir kabın tam genişlikte bir üstbilgi ve altbilgi arasına sıkıştırıldığı ol 'klasik üç sütunlu düzen.

Esnek Kutsal Kase

Görüntü alanı genişliği bir akışkan içerik kabı kullanılarak değiştiğinden her şey bozulmadan kalır.

CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen CSS Grid - Holy Grail 2'ye bakın.

Duyarlı Kutsal Kase

Görüntü alanı daraldığında işler yığılır.

CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen CSS Grid: Holy Grail Layout - Responsive bölümüne bakın.

Üstbilgi ve Altbilgi ile 2 Sütun

Bir sütunun gönderi ve diğerinin bir kenar çubuğu olduğu klasik bir blog düzeni.

Esnek 2 Sütunlu

Görüntü alanı daraldığında düzen yumuşar, ancak düzen yerinde kalır.

CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen CSS Grid: Header, Footer with 2 Column (Flexible)

Duyarlı 2 Sütunlu

Şeyler daha küçük ekranlarda yığılır.

CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Pen CSS Grid: Header, Footer with 2-Column (Responsive) bölümüne bakın.

Eşit Olarak Dağıtılmış, Gerektiği Gibi Sığdır

Öğeler düzene akar ve artık kalmadığında sona erer.

CodePen'de Geoff Graham (@geoffgraham) tarafından Gerektiği Kadar Gerektiği Kadar Eşit Dağıtılmış Kalem CSS Izgarasına bakın.

Breakout içeren makale

Tyler Sticka'nın bir elementin ızgaradan çıkmasına izin veren harika bir küçük numarası. Rachel Andrew, adlandırılmış ızgara çizgilerinin bunun işe yaramasına nasıl izin verdiğiyle ilgili kapsamlı bir açıklama yapıyor.

CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Pen CSS Grid: Breakout Makalesine bakın.

Temel Takvim

Tahmin edebileceğiniz gibi, CSS Izgarası bir takvim ızgarası için iyi çalışır.

CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen CSS Grid: Calendar'a bakın.

Tekel Kurulu

Oyun tahtasının basit bir yeniden oluşturulması. Jen Simmons'ın Monpoly stilleri ile tamamlanmış tatlı bir demosu var.

CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen CSS Grid: Monopoly Board'a bakın.

Öğrenme Ortağımız Ön Uç Ustaları

Ön uç geliştirme eğitimine mi ihtiyacınız var?

Frontend Masters, onu elde etmek için en iyi yerdir. React'ten CSS'ye, Vue'dan D3'e ve daha fazlası Node.js ve Full Stack ile en önemli ön uç teknolojileriyle ilgili kursları var.