Tata Letak CSS Grid Starter - Trik CSS

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 Grail

Tata 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 Fleksibel

Semuanya 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 Responsif

Hal-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 Footer

Tata letak blog klasik di mana satu kolom untuk posting dan yang lainnya untuk sidebar.

2-Kolom Fleksibel

Tata 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 Responsif

Hal-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 Kebutuhan

Elemen 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 Breakout

Trik 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 Dasar

Seperti yang Anda duga, CSS Grid berfungsi dengan baik untuk kisi kalender.

Lihat Pen CSS Grid: Calendar oleh Geoff Graham (@geoffgraham) di CodePen.

Dewan Monopoli

Rekreasi 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.