CSS Grid adalah alat susun atur web dua dimensi yang membolehkan pemaju mengawal kedudukan dan saiz elemen halaman dengan tepat dengan menentukan baris dan lajur. Tidak seperti Flexbox, ia boleh mengendalikan baris dan lajur secara serentak, sesuai untuk membina struktur kompleks. Untuk menggunakan grid, anda perlu menetapkan bekas untuk memaparkan: grid terlebih dahulu, dan menentukan saiz baris dan lajur melalui 1. Grid-template-lajur dan 2. Grid-template-baris, 3. Senario aplikasi biasa termasuk susun atur responsif, antara muka papan pemuka, dan galeri gambar. Petua praktikal termasuk: 5. Gunakan grid-lajur/grid-baris untuk mengawal span projek, 6. Secara automatik mengatur projek baru dalam aliran grid-auto, 7. Ulang () dan Minmax () untuk mencapai susun atur elastik dan responsif. Menguasai grid dapat meningkatkan kecekapan dan fleksibiliti susun atur, dan sesuai untuk keperluan pembangunan web moden.

Susun atur Grid CSS adalah alat yang berkuasa untuk susun atur laman web yang membolehkan pemaju menyusun unsur-unsur di halaman melalui sistem grid dua dimensi. Berbanding dengan kaedah susun atur tradisional seperti terapung atau kotak flex, susun atur grid lebih fleksibel dan intuitif, terutamanya sesuai untuk membina struktur web yang kompleks.

Apakah grid CSS?

Ringkasnya, grid CSS adalah kaedah susun atur yang membahagikan laman web ke dalam baris dan lajur, dengan itu membentuk "grid". Anda boleh meletakkan setiap elemen dengan tepat dalam grid ini, mengawal kedudukan, saiz dan susunan mereka. Daripada memberi tumpuan hanya pada pengaturan satu dimensi (sama ada secara mendatar atau menegak) seperti Flexbox, ia boleh mengendalikan baris dan lajur pada masa yang sama.

Sebagai contoh: Jika anda merancang halaman dengan tajuk, bar sisi, kawasan kandungan utama dan footer, menggunakan grid dengan mudah boleh menentukan lokasi kawasan ini dan mengekalkan hubungan relatif di antara mereka.

Bagaimana untuk memulakan susun atur grid?

Untuk menggunakan grid, anda perlu terlebih dahulu menetapkan display: grid pada bekas, dan bekas menjadi "bekas grid", dan unsur -unsur anaknya adalah "item grid".

 .container {
  paparan: grid;
}

Seterusnya anda boleh menentukan berapa lajur, baris grid ini mempunyai, dan saiz setiap kawasan:

• Gunakan grid-template-columns dan grid-template-rows untuk menentukan lajur baris.
• Gunakan grid-gap untuk menetapkan jarak antara projek (atribut singkatan gap adalah disyorkan sekarang).
• Gunakan grid-template-areas untuk menamakan kawasan tersebut untuk menjadikan susun atur lebih jelas.

Contohnya:

 .container {
  paparan: grid;
  Grid-template-lajur: 200px 1FR 1FR;
  grid-template-baris: auto 1FR auto;
  Gap: 10px;
}

Kod ini mencipta susun atur tiga lajur dan dua baris, dua lajur tengah masing-masing menduduki separuh ruang yang tinggal, dan ketinggian baris diselaraskan secara automatik mengikut kandungan.

Senario aplikasi praktikal susun atur grid

Grid paling sesuai untuk mereka bentuk struktur halaman keseluruhan, seperti:

• Susun atur laman web responsif : Anda boleh menggunakan fungsi repeat() dan minmax() untuk mencapai susun atur penyesuaian bersama dengan pertanyaan media.
• Antara muka papan pemuka : Modul berfungsi berganda disusun dengan kemas dalam baris dan lajur, dan pesanan juga mudah.
• Galeri Gambar : Secara automatik mengatur blok gambar, menyokong perkadaran dan rentang yang berbeza.

Amalan biasa adalah dengan menamakan blok yang berbeza dalam kombinasi dengan grid-template-areas , supaya logiknya jelas dan mudah dijaga:

 .container {
  paparan: grid;
  grid-template-kawasan:
    "Header Header"
    "Sidebar Utama"
    "Footer Footer";
}

Kemudian tambahkan nama kelas ke blok yang sepadan dalam HTML.

Beberapa petua praktikal untuk grid

• Kawal rentang item : Anda boleh menggunakan grid-column atau grid-row untuk membuat item span pelbagai lajur atau baris.
• Secara automatik Susun item : Gunakan grid-auto-flow untuk mengawal sama ada item yang baru ditambah secara automatik diisi oleh baris atau lajur.
• Petua Reka Bentuk Responsif : Gunakan auto-fit dan minmax() dengan repeat() dengan cepat membuat susun atur elastik.

Contohnya:

 .Grid {
  paparan: grid;
  Grid-template-lajur: Ulang (Auto-Fit, Minmax (200px, 1FR));
}

Penulisan ini membolehkan projek untuk membungkus garisan secara automatik pada lebar skrin yang berbeza dan mengekalkan lebar minimum 200px.

Secara keseluruhannya, CSS Grid menyediakan cara yang lebih moden dan fleksibel untuk membina susun atur web. Walaupun ia mungkin agak rumit pada mulanya, sebaik sahaja anda mendapatkannya, anda akan mendapati ia sangat kuat dan cekap. Pada dasarnya itu sahaja. Jangan takut dengan syarat -syarat. Anda boleh memulakan dengan hanya mencuba beberapa contoh.

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