CSS Grid: Alat susun atur yang kuat untuk reka bentuk web moden

Petikan ini dari Tiffany's CSS Master, edisi ke -2 , memberikan pengenalan ringkas kepada grid CSS, sistem susun atur revolusioner yang diperkenalkan pada bulan Oktober 2017. Grid memudahkan penciptaan susun atur kompleks sebelum ini memerlukan manipulasi DOM yang luas. Walaupun spesifikasi terperinci, gambaran ini merangkumi konsep utama dan menunjuk kepada sumber selanjutnya untuk pembelajaran mendalam.

Konsep Utama:

grid CSS membolehkan penciptaan susun atur rumit yang sebelum ini mencabar atau mustahil untuk dicapai. Ia mendapat sokongan penyemak imbas yang meluas pada bulan Oktober 2017.
Memohon
• ke elemen menetapkan konteks pemformatan grid, mengubah elemen ke dalam bekas peringkat blok dan anak-anaknya ke dalam item grid yang diatur dalam baris dan lajur. display: grid sifat
dan
• menentukan bilangan dan saiz baris dan lajur menggunakan senarai trek yang dipisahkan grid-template-rows grid-template-columns (mis., Panjang, peratusan, , , auto). min-content max-content grid tersirat secara automatik mengendalikan item grid melebihi sel-sel yang ditakrifkan secara eksplisit, memungkiri saiz auto berdasarkan kandungan.
Shorthand menggabungkan definisi baris dan lajur. Fungsi
• memudahkan mengulangi lajur atau baris, sementara grid-template dan repeat() secara dinamik menyesuaikan lajur/baris. auto-fit auto-fill

Konteks pemformatan grid:

mencetuskan konteks pemformatan grid dengan kesan ini:

display: grid

elemen menjadi elemen tahap blok.

1. elemen kanak-kanak (atau nod teks) menjadi item grid seperti blok.
2. dalam mod penulisan mendatar, ketinggian baris sepadan dengan item tertinggi kecuali ditetapkan secara eksplisit; Mod penulisan menegak menggunakan panjang item terpanjang.

berkelakuan sama, tetapi kontena tetap berada dalam tahap.

display: inline-grid

Menentukan susun atur grid:

Selepas menentukan bekas grid, nyatakan bilangan baris dan lajur menggunakan dan . Ini menerima senarai trek

, nama dan saiz garis grid yang dipisahkan ruang yang ditentukan untuk setiap kedudukan baris atau lajur. grid-template-rows grid-template-columns grid yang jelas dan tersirat:

an grid eksplisit mentakrifkan semua sel. A Item grid tersirat bersaiz automatik, berkembang agar sesuai dengan kandungan atau mengisi ruang yang tinggal. dan mengawal saiz lalai untuk item grid tersirat, tetapi menggunakan menghalang limpahan kandungan. grid-auto-rows grid-auto-columns minmax()

grid fleksibel dengan unit flex (

):

fr Unit flex ()

mewakili pecahan ruang yang tersedia, menyediakan saiz berkadar. Mereka adalah nisbah, bukan panjang mutlak, dan tidak serasi dengan unit panjang lain atau

. fr calc()

Shorthand:

harta menggabungkan grid-template dan untuk kesimpulan.

grid-template mengulangi baris dan lajur (): grid-template-rows grid-template-columns

Fungsi

memudahkan mencipta corak berulang: . repeat() dan secara dinamik menyesuaikan bilangan pengulangan berdasarkan ruang yang tersedia.

menyesuaikan saiz trek;

menambah trek tanpa nama. repeat() repeat(number, track list) auto-fit auto-fill auto-fit auto-fill

pembelajaran selanjutnya:

Ini adalah pengenalan asas; Banyak sumber yang menawarkan maklumat yang lebih terperinci, termasuk spesifikasi grid CSS itu sendiri, grid Rachel Andrew dengan contoh , makmal susun atur eksperimen Jen Simmons dan susun atur tanah YouTube, dan CSS-Tricks '"panduan lengkap untuk grid. "

Kesimpulan:

CSS Grid adalah alat yang berkuasa. Gambaran keseluruhan ini menyediakan asas untuk meneroka keupayaannya.

Atas ialah kandungan terperinci Membuat susun atur dengan grid CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!