Grid CSS – Membina Reka Letak Kompleks dengan Mudah

Kuliah 15: Grid CSS – Membina Reka Letak Kompleks dengan Mudah

Dalam kuliah ini, kami menyelami Grid CSS, sistem susun atur berkuasa yang memberi anda kawalan penuh ke atas kedua-dua baris dan lajur. Walaupun Flexbox bagus untuk reka letak satu dimensi (sama ada baris atau lajur), Grid membenarkan anda mengendalikan reka letak dua dimensi, bermakna anda boleh mereka bentuk keseluruhan reka letak halaman web dengan ketepatan.

1. Apakah Grid CSS?

Reka Letak Grid CSS, biasanya dikenali sebagai Grid, ialah sistem reka letak 2D yang direka untuk mengurus kedua-dua baris dan lajur secara serentak. Anda boleh menganggapnya sebagai matriks atau hamparan di mana setiap elemen diletakkan ke dalam sel grid, membolehkan reka letak yang bersih dan teratur.

2. Cara Membuat Grid

Untuk mula menggunakan Grid, anda perlu menentukan bekas sebagai grid dengan menetapkan paparan: grid. Kemudian, anda akan menentukan bilangan baris dan lajur menggunakan sifat grid-template-rows dan grid-template-columns.

Contoh:

<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px; /* space between the grid items */
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    text-align: center;
}

Ini menghasilkan grid 2x2, dengan setiap sel adalah 100px kali 100px dan jurang 10px antara sel.

3. Menentukan Kawasan Grid

Anda juga boleh menentukan kawasan grid tertentu untuk diduduki item menggunakan sifat kawasan grid. Ini membolehkan anda mengawal dengan tepat di mana item akan diletakkan dalam grid.

Contoh:

<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
</div>

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

Contoh ini mencipta reka letak asas di mana pengepala dan pengaki merentangi dua lajur, dan bar sisi serta kandungan utama menduduki lajurnya sendiri. Sifat grid-template-areas membolehkan anda mentakrifkan struktur grid dengan nama untuk setiap kawasan.

4. Auto-Fit dan Auto-Isi untuk Grid Responsif

Salah satu bahagian terbaik tentang Grid CSS ialah betapa mudahnya untuk menjadikannya responsif. Ciri auto muat dan auto isi boleh melaraskan bilangan lajur secara automatik berdasarkan ruang yang tersedia.

Contoh:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

Dalam contoh ini, grid secara automatik akan membuat seberapa banyak lajur yang sesuai dalam bekas, dengan setiap lajur sekurang-kurangnya 150px lebar. Jika terdapat ruang tambahan, lajur akan terbentang untuk memenuhi kawasan yang tinggal.

5. Penjajaran Grid

Anda boleh menjajarkan item di dalam grid menggunakan justify-item dan align-item.

• justify-item: Menjajarkan item secara mendatar dalam sel gridnya.
• menjajarkan-item: Menjajarkan item secara menegak dalam sel gridnya.

Contoh:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 10px;
}

.item {
    background-color: #FF5722;
    padding: 20px;
    color: white;
    text-align: center;
}

Ini akan memusatkan semua item secara mendatar dan menegak dalam sel grid mereka.

6. Grid Bersarang

Grid CSS juga menyokong grid bersarang, membolehkan anda membuat grid dalam item grid untuk reka letak yang lebih kompleks.

Contoh:

<div class="grid-container">
    <div class="item">
        <div class="nested-grid">
            <div class="nested-item">Nested 1</div>
            <div class="nested-item">Nested 2</div>
        </div>
    </div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.nested-item {
    background-color: #FFC107;
    padding: 10px;
    color: black;
}

Dalam contoh ini, salah satu item grid mengandungi grid bersarang, membolehkan reka letak yang lebih fleksibel dan terperinci.

7. Grid lwn. Flexbox: Bila Perlu Menggunakan Setiap

• Gunakan Flexbox apabila anda perlu mengurus reka letak item dalam satu arah (sama ada baris atau lajur).
• Gunakan Grid apabila anda perlu mengurus kedua-dua baris dan lajur secara serentak untuk reka letak berbilang dimensi yang kompleks.

Kesimpulan

CSS Grid ialah pengubah permainan untuk reka bentuk web, menawarkan cara yang berkuasa untuk membina reka letak yang kompleks dan responsif dengan usaha yang minimum. Sama ada anda sedang mengusahakan reka letak blog, papan pemuka atau struktur tapak web, Grid memberi anda fleksibiliti untuk mengawal kedua-dua baris dan lajur dengan mudah.

---

ikuti saya di LinkedIn

Ridoy Hasan

Atas ialah kandungan terperinci Grid CSS – Membina Reka Letak Kompleks dengan Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!