Ini adalah kumpulan template awal untuk tata letak dan pola menggunakan CSS Grid. Idenya di sini adalah untuk memamerkan apa yang mampu dilakukan oleh teknik ini dan memberikan titik awal yang dapat digunakan kembali untuk proyek lain.
Ingatlah bahwa dukungan browser untuk Grid bagus tetapi membutuhkan fallback untuk browser lama. Itu berarti salinan dan tempel langsung ini mungkin tidak cocok untuk beberapa kasus penggunaan.
Tata Letak Holy GrailTata letak tiga kolom klasik di mana dua sidebar dan wadah yang menyimpan salinan isi diapit di antara header dan footer dengan lebar penuh.
Holy Grail yang FleksibelSemuanya tetap utuh saat lebar area pandang berubah menggunakan wadah konten yang berubah-ubah.
Lihat Pen CSS Grid - Holy Grail 2 oleh Geoff Graham (@geoffgraham) di CodePen.
Holy Grail yang ResponsifHal-hal menumpuk begitu area pandang menjadi sempit.
Lihat Pen CSS Grid: Holy Grail Layout - Responsive oleh Geoff Graham (@geoffgraham) di CodePen.
2-Kolom dengan Header dan FooterTata letak blog klasik di mana satu kolom untuk posting dan yang lainnya untuk sidebar.
2-Kolom FleksibelTata letak menjadi licin saat viewport menjadi sempit tetapi tata letak tetap pada tempatnya.
Lihat Pen CSS Grid: Header, Footer with 2-Column (Fleksibel) oleh Geoff Graham (@geoffgraham) di CodePen.
2-Kolom ResponsifHal-hal bertumpuk di layar yang lebih kecil.
Lihat Pen CSS Grid: Header, Footer with 2-Column (Responsive) oleh Geoff Graham (@geoffgraham) di CodePen.
Didistribusikan Secara Merata, Sesuai KebutuhanElemen mengalir ke tata letak dan berakhir saat tidak ada lagi.
Lihat Pen CSS Grid Didistribusikan Secara Merata, Sebanyak Yang Dibutuhkan oleh Geoff Graham (@geoffgraham) di CodePen.
Artikel dengan BreakoutTrik kecil yang bagus dari Tyler Sticka yang memungkinkan sebuah elemen keluar dari grid. Rachel Andrew memberikan penjelasan menyeluruh tentang bagaimana garis grid yang diberi nama memungkinkan ini bekerja.
Lihat Pen CSS Grid: Artikel dengan Breakout oleh Geoff Graham (@geoffgraham) di CodePen.
Kalender DasarSeperti yang Anda duga, CSS Grid berfungsi dengan baik untuk kisi kalender.
Lihat Pen CSS Grid: Calendar oleh Geoff Graham (@geoffgraham) di CodePen.
Dewan MonopoliRekreasi sederhana dari papan permainan. Jen Simmons memiliki demo manis lengkap dengan gaya Monpoly.
Lihat Pen CSS Grid: Monopoly Board oleh Geoff Graham (@geoffgraham) di CodePen.
Master Frontend Mitra Pembelajaran kami
Butuh pelatihan pengembangan front-end?
Frontend Masters adalah tempat terbaik untuk mendapatkannya. Mereka memiliki kursus tentang semua teknologi front-end yang paling penting, dari React hingga CSS, dari Vue hingga D3, dan seterusnya dengan Node.js dan Full Stack.