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 KaseGö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 KaseGö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ütunBir sütunun gönderi ve diğerinin bir kenar çubuğu olduğu klasik bir blog düzeni.
Esnek 2 SütunluGö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 makaleTyler 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 TakvimTahmin 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 KuruluOyun 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.