Membuat susun atur berasaskan grid dua dimensi dengan grid CSS

Susun atur grid CSS menyediakan mekanisme yang kuat untuk membuat susun atur berasaskan grid dua dimensi. Tidak seperti Flexbox, yang cemerlang pada susun atur satu dimensi, grid membolehkan anda mengawal kedua-dua baris dan lajur secara serentak. Ini dicapai melalui penggunaan grid-template-columns dan ciri-ciri grid-template-rows . grid-template-columns mentakrifkan lajur grid anda, menyatakan lebarnya sama ada secara eksplisit (contohnya, 100px 200px auto ) atau secara tersirat (contohnya, repeat(3, 1fr) yang menghasilkan tiga lajur lebar yang sama). Begitu juga, grid-template-rows mentakrifkan baris.

Anda juga boleh menggunakan harta grid-template-areas untuk menentukan kawasan yang dinamakan dalam grid anda, menjadikannya lebih mudah untuk memetakan susun atur secara visual. Harta ini mengambil templat grid literal di mana setiap entri mewakili kawasan grid dan diberikan nama. Item kemudian dimasukkan ke dalam kawasan ini menggunakan harta grid-area . Contohnya:

 <code class="css">.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 150px auto; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }</code>

Ini mewujudkan susun atur tiga lajur dengan header, sidebar, kawasan kandungan utama, dan footer, dengan jelas ditakrifkan menggunakan kawasan grid yang dinamakan. Pendekatan ini sangat mudah dibaca dan dikekalkan untuk susun atur yang kompleks. Selain itu, anda boleh menggabungkan definisi grid yang jelas dan tersirat untuk kawalan halus ke atas susun atur anda.

Kelebihan grid CSS atas kaedah susun atur lain

CSS Grid menawarkan beberapa kelebihan utama ke atas kaedah susun atur lain, terutamanya untuk struktur grid kompleks:

• Kawalan dua dimensi: Tidak seperti Flexbox yang terutamanya mengendalikan satu dimensi, grid menyediakan kawalan lengkap ke atas kedua-dua baris dan lajur secara serentak. Ini memudahkan penciptaan susun atur kompleks yang memerlukan penempatan baris dan lajur yang tepat.
• Definisi baris dan lajur yang jelas: Grid membolehkan definisi baris dan lajur yang jelas menggunakan grid-template-rows dan grid-template-columns . Ini menyediakan struktur susun atur yang jelas dan boleh diramal, terutamanya bermanfaat untuk grid besar dan kompleks.
• Penjajaran dan jarak yang dipermudahkan: Grid menawarkan ciri penjajaran yang mantap untuk kedua -dua item dan garis, menjadikannya mudah untuk memusatkan kandungan baik secara mendatar dan menegak. Harta gap memudahkan penciptaan selokan antara item grid.
• Prestasi yang lebih baik: Walaupun tidak secara drastik berbeza daripada kaedah lain dalam kebanyakan kes, pelaksanaan yang cekap Grid sering menghasilkan prestasi yang sedikit lebih baik untuk susun atur kompleks.
• Kebolehbacaan dan penyelenggaraan: Sifat deklaratif grid, digabungkan dengan ciri-ciri seperti grid-template-areas , menjadikannya lebih mudah untuk memahami dan mengekalkan susun atur yang kompleks berbanding dengan pendekatan yang bergantung pada terapung bersarang atau blok sebaris.

Pertimbangan reka bentuk yang responsif dengan grid CSS

Mewujudkan reka bentuk responsif dengan grid CSS adalah mudah. Beberapa teknik boleh digunakan untuk menyesuaikan susun atur grid anda ke saiz skrin yang berbeza:

• Pertanyaan Media: Gunakan pertanyaan media untuk menyesuaikan struktur grid berdasarkan saiz viewport. Di dalam pertanyaan media, ubah suai sifat seperti grid-template-columns , grid-template-rows , atau grid-template-areas untuk membuat susun atur yang berbeza untuk saiz skrin yang berbeza.
• Unit fr : Gunakan unit pecahan ( fr ) untuk membuat lajur fleksibel dan lebar baris yang menyesuaikan secara proporsional ke ruang yang tersedia. Ini membolehkan grid menyesuaikan diri dengan anggun ke pelbagai saiz skrin.
• min-content dan max-content : Nilai-nilai ini memberikan cara untuk menetapkan saiz minimum dan maksimum untuk trek grid, memastikan kandungan tidak melimpah atau menjadi terlalu kecil pada titik putus yang berbeza.
• Auto-Fit dan Auto-Fill: grid-auto-flow boleh digunakan dengan column atau row untuk membolehkan grid secara automatik menyesuaikan bilangan lajur atau baris berdasarkan ruang yang tersedia. grid-auto-columns dan grid-auto-rows boleh digunakan untuk menetapkan ukuran trek lalai.
• Penempatan Auto Grid: Menggunakan grid-auto-flow dengan dense dapat mengoptimumkan penempatan item, mengisi jurang dan menghalang ruang putih yang berlebihan kerana grid menyesuaikan diri dengan saiz skrin yang berbeza.

Menguruskan struktur grid bersarang kompleks

Ya, grid CSS berkesan menguruskan struktur grid bersarang kompleks. Anda boleh membenamkan grid dalam grid lain untuk membuat susun atur hierarki. Ini membolehkan anda membina reka bentuk yang canggih, pelbagai peringkat.

Sebagai contoh, anda boleh mempunyai grid utama yang menentukan susun atur halaman keseluruhan, dengan bahagian individu yang mengandungi grid bersarang mereka sendiri untuk lebih banyak kawalan berbutir ke atas susunan kandungan. Pendekatan ini membolehkan modulariti dan kebolehgunaan semula, kerana anda boleh membuat komponen grid yang boleh diguna semula yang boleh diintegrasikan dengan mudah ke dalam susun atur yang lebih besar dan lebih kompleks. Gabungan kawasan grid yang dinamakan dan grid bersarang menyediakan cara yang kuat dan teratur untuk menguruskan reka bentuk web yang paling maju. Ingatlah untuk menentukan dengan jelas hubungan antara grid bersarang menggunakan pemilih yang sesuai dan elakkan bersarang yang terlalu kompleks untuk mengekalkan.

Atas ialah kandungan terperinci Bagaimanakah anda boleh menggunakan susun atur grid CSS untuk membuat susun atur berasaskan grid dua dimensi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!