Susun atur Permulaan Grid CSS - Trik CSS

Ini adalah koleksi templat permulaan untuk susun atur dan corak menggunakan CSS Grid. Ideanya di sini adalah untuk menunjukkan teknik apa yang mampu dilakukan dan menyediakan titik permulaan yang dapat dirancang semula untuk projek lain.

Ingat bahawa sokongan penyemak imbas untuk Grid bagus tetapi memerlukan cadangan untuk penyemak imbas lama. Ini bermaksud salinan dan tampalan lurus ke atas mungkin tidak sesuai untuk beberapa kes penggunaan.

Tata Letak Holy Grail

Susun atur tiga lajur klasik di mana dua bar sisi dan sebuah wadah yang memegang salinan badan diapit antara pengepala dan kaki bawah lebar penuh.

Holy Grail yang fleksibel

Segala-galanya tetap utuh apabila lebar ruang pandang berubah menggunakan bekas kandungan cecair.

Lihat Pen CSS Grid - Holy Grail 2 oleh Geoff Graham (@geoffgraham) di CodePen.

Grail Suci Responsif

Segala-galanya disusun setelah bahagian pandangan menjadi sempit.

Lihat Pen CSS Grid: Holy Grail Layout - Responsive oleh Geoff Graham (@geoffgraham) di CodePen.

2-Lajur dengan Header dan Footer

Susun atur blog klasik di mana satu lajur untuk siaran dan yang lain untuk bar sisi.

2-Tiang Fleksibel

Susun atur menjadi licin apabila ruang pandang menjadi sempit tetapi susun atur tetap di tempatnya.

Lihat Pen CSS Grid: Header, Footer with 2-Column (Flexible) oleh Geoff Graham (@geoffgraham) di CodePen.

2-Lajur Responsif

Perkara disusun pada skrin yang lebih kecil.

Lihat Pen CSS Grid: Header, Footer with 2-Column (Responsive) oleh Geoff Graham (@geoffgraham) di CodePen.

Diagihkan Merata, Sesuai dengan Keperluan

Elemen mengalir ke susun atur dan berakhir apabila tidak ada lagi.

Lihat Grid CSS Pena Diagihkan Secara Merata, Sebanyak Yang Diperlukan oleh Geoff Graham (@geoffgraham) di CodePen

Artikel dengan Breakout

Satu muslihat kecil oleh Tyler Sticka yang membolehkan elemen keluar dari grid. Rachel Andrew memberikan penjelasan menyeluruh tentang bagaimana garis grid bernama membolehkan ini berfungsi.

Lihat Pen CSS Grid: Artikel dengan Breakout oleh Geoff Graham (@geoffgraham) di CodePen.

Kalendar Asas

Seperti yang anda jangkakan, CSS Grid berfungsi dengan baik untuk grid kalendar.

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

Lembaga Monopoli

Rekreasi ringkas papan permainan. Jen Simmons mempunyai demo manis lengkap dengan gaya Monpoly.

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

Master Frontend Rakan Belajar Kami

Memerlukan latihan pembangunan akhir?

Frontend Masters adalah tempat terbaik untuk mendapatkannya. Mereka mempunyai kursus mengenai semua teknologi front-end yang paling penting, dari React hingga CSS, dari Vue hingga D3, dan seterusnya dengan Node.js dan Full Stack.