Belajar Grid CSS: Panduan Mudah dengan Banyak Contoh

Hei! Jika anda pernah merasakan CSS Grid agak seperti cuba menyelesaikan Kiub Rubik yang ditutup matanya, anda tidak bersendirian. Saya Eleftheria, dan hari ini, saya di sini untuk membantu anda menavigasi grid CSS dengan mudah. Jom selami. ?

Pengenalan kepada Grid CSS

Grid CSS dibuat untuk membolehkan anda mencipta reka letak dua dimensi yang kompleks yang sebelum ini agak sukar untuk dicapai. Sebelum Grid, kami bermain-main dengan pelampung, meja atau kotak fleksibel untuk susun atur. Grid datang dan berkata, "Tahan bir saya," menawarkan cara yang lebih intuitif dan berkuasa untuk menstruktur halaman web.

Mengapa Belajar Grid CSS?

• Kecekapan

  : Grid memudahkan cara anda mereka bentuk reka letak, mengurangkan keperluan elemen bersarang hanya untuk tujuan reka letak.

• Fleksibiliti

  : Ia hebat untuk reka bentuk responsif, menyesuaikan dengan cantik pada saiz skrin yang berbeza.

• Kuasa

  : Dengan Grid, anda boleh menyelaraskan elemen secara menegak dan mendatar dengan mudah, yang merupakan mimpi ngeri dengan kaedah lama.

Asas Grid CSS

Mari kita mulakan dari awal lagi. Untuk menggunakan Grid CSS, anda perlu menentukan bekas sebagai grid. Contohnya:

.container { display: grid;}

Barisan ringkas ini menukarkan .container menjadi bekas grid, yang bermaksud anak langsungnya akan menjadi item grid.

Membuat Lajur dan Baris Grid

Anda mentakrifkan struktur grid dengan menyatakan lajur dan baris:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three columns with equal width */
    grid-template-rows: auto auto auto;  /* Three rows with automatic height */
}

Di sini, 1fr bermaksud satu pecahan daripada ruang yang tersedia, menjadikan lajur sama lebar.

Meletakkan Item dalam Grid

Anda boleh meletakkan item di kawasan tertentu menggunakan sifat lajur grid dan baris grid:

.item-a {
    grid-column: 1 / 3; /* Start at line 1, end at line 3 */
    grid-row: 1 / 2;    /* Span from line 1 to line 2 */
}

Ini meletakkan .item-a bermula dari baris lajur pertama hingga baris ketiga, dan melalui baris pertama.

Garisan dan Kawasan Grid

Anda boleh menamakan baris untuk rujukan lebih mudah:

.grid-container {
    grid-template-columns: [start] 1fr [line2] 1fr [end];
    grid-template-rows: [row1-start] auto [row2-start] auto [row3-end];
}

Kemudian gunakan nama ini:

.item-b {
    grid-column: start / line2;
    grid-row: row1-start / row2-start;
}

Kawasan Grid

Untuk pendekatan yang lebih visual, anda boleh menamakan kawasan:

.grid-container {
    display: grid;
    grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

Kemudian tetapkan elemen pada kawasan ini:

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Lagi Contoh Grid CSS dalam Tindakan

1. Reka Letak Responsif dengan Pertanyaan Media

Salah satu kekuatan Grid CSS ialah kemudahannya dalam mengendalikan reka bentuk responsif. Berikut ialah contoh yang menunjukkan cara melaraskan reka letak grid untuk saiz skrin yang berbeza

:

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

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

Persediaan ini mencipta grid di mana setiap item berukuran sekurang-kurangnya 300px lebar tetapi berkembang untuk menggunakan ruang yang tersedia. Pada skrin yang lebih kecil daripada 768px, ia beralih kepada reka letak lajur tunggal.

2. Reka Letak Kompleks: Gaya Majalah

Bayangkan halaman majalah dengan artikel utama yang besar, artikel sampingan yang lebih kecil dan iklan:

<div class="grid-container">
    <article class="featured">Featured Article</article>
    <article class="side">Side Article 1</article>
    <article class="side">Side Article 2</article>
    <div class="ad">Advertisement</div>
    <footer class="footer">Footer</footer>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
        "featured featured ad"
        "side1 side2 ad"
        "footer footer footer";
    gap: 10px;
}

.featured { grid-area: featured; }
.side:nth-child(1) { grid-area: side1; }
.side:nth-child(2) { grid-area: side2; }
.ad { grid-area: ad; }
.footer { grid-area: footer; }

Contoh ini menggunakan kawasan grid yang dinamakan untuk mencipta reka letak yang kompleks tetapi menarik secara visual.

3. Grid Bersarang untuk Reka Bentuk Komponen

Untuk komponen dalam grid anda, anda mungkin menyusun grid:

<div class="grid-container">
    <div class="card">
        <h2 id="Card-Title">Card Title</h2>
        <div class="card-content">
            <p>Content Here</p>
            <button class="card-button">Action</button>
        </div>
    </div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.card-title {
    /* Styles for title */
}

.card-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.card-button {
    align-self: flex-start;
}

Di sini, setiap kad itu sendiri menggunakan grid untuk susun atur tajuk dan kandungannya, menunjukkan cara grid boleh disarangkan untuk kawalan halus ke atas elemen reka bentuk.

4. Grid Dinamik dengan Imej

Untuk galeri atau portfolio:

<div class="gallery">
    <img src="/static/imghwm/default1.png" data-src="img1.jpg" class="lazy" alt="Image 1">
    <img src="/static/imghwm/default1.png" data-src="img2.jpg" class="lazy" alt="Image 2">
    <img src="/static/imghwm/default1.png" data-src="img3.jpg" class="lazy" alt="Image 3">
    <!-- More images -->
</div>

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.gallery img {
    width: 100%;
    height: auto;
}

Grid ini melaraskan secara dinamik untuk mengisi bekas dengan imej, setiap satu sekurang-kurangnya 200px lebar, memuatkan sebanyak mungkin ke dalam setiap baris.

Ciri Grid Terperinci

• Grid Auto-Flow

  : Meletakkan item secara automatik.

• Jurang Grid

  : Menambah ruang antara sel grid.

• Minmax()

  : Mentakrifkan julat saiz untuk baris atau lajur.

Aliran Auto Grid

Grid Auto-Flow

mengawal cara penyemak imbas harus mengisi grid dengan item apabila ia tidak diletakkan secara jelas. Secara lalai, item diletakkan dalam susunan baris-utama, yang bermaksud item mengisi seluruh baris sebelum beralih ke baris seterusnya. Walau bagaimanapun, anda boleh mengubah tingkah laku ini:

• baris

  : Tingkah laku lalai di mana item diletakkan dalam baris sebelum beralih ke lajur seterusnya.

• lajur

  : Item diletakkan dalam lajur sebelum beralih ke baris seterusnya.<script> // Detect dark theme var iframe = document.getElementById('tweet-1832648056296063240-389'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1832648056296063240&theme=dark" } </script>

• dense : This option tells the browser to fill in gaps in the grid as items are placed, potentially rearranging items to avoid empty spaces. This can result in an "optimal" arrangement but can also lead to unexpected layouts if not used carefully.

Example:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: column; /* Items will fill by column before moving to next row */
}

Grid Gaps (or Gutter)

Grid Gaps add space between grid cells, which is crucial for visual breathing room in your layout. You can set gaps for rows, columns, or both:

Example:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 40px; /* 20px vertical gap, 40px horizontal gap */
    grid-row-gap: 30px; /* Alternative for vertical gap */
    grid-column-gap: 50px; /* Alternative for horizontal gap */
}

Using gap is shorthand for both grid-row-gap and grid-column-gap. This feature helps in creating a more polished and organized look, making your content feel less cramped.

Minmax() Function

The Minmax() function in CSS Grid allows you to define a size range for grid tracks (rows or columns). This is extremely useful for creating flexible yet controlled layouts:

Example:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

• minmax(min, max): Here, min is the minimum width (or height for rows) the track can take, and max is the maximum. The track will grow from min to max as more space becomes available.

• auto-fill inside repeat alongside minmax means the browser will automatically generate as many columns as fit within the container, each having a minimum width of 100px but can expand if there's space.

• 1fr means the track can grow to take up an equal fraction of the available space if there's room after all minimum sizes are accounted for.

Real Example Use:

Imagine designing a dashboard where you want cards to have at least 200px width but grow to fill the space without exceeding 400px:

Solution:

.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 400px));
    gap: 20px;
}

This setup ensures each card is visible and usable on smaller screens while maximizing space on larger displays.

• Grid Auto-flow helps in managing how items are naturally placed within your grid, optimizing for space or maintaining order.

• Grid Gaps provide the breathing room that makes layouts more visually appealing and user-friendly.

• Minmax offers the flexibility to design layouts that adapt beautifully to different screen sizes and content volumes.

Conclusion

I hope by now, you've seen Grid not just as a layout tool, but as a creative companion in your web design adventures. CSS Grid has transformed how we approach layout design, offering a blend of simplicity and power that was hard to imagine before its arrival.

Remember, mastering Grid isn't about memorizing every property or function, but understanding its logic. Like learning any new language, it's about practicetrying out different configurations, seeing how elements respond, and adapting your design to the fluidity of the web.

As you incorporate Grid into your projects, whether they're personal blogs, complex dashboards, or innovative web applications, you'll find yourself equipped to handle challenges with elegance and efficiency. Keep this guide handy, refer back to these examples, and most importantly, keep experimenting.

Thank you for joining me on this exploration of CSS Grid.

---

? Hello, I'm Eleftheria, Community Manager, developer, public speaker, and content creator.

? If you liked this article, consider sharing it.

? All links | X | LinkedIn

Atas ialah kandungan terperinci Belajar Grid CSS: Panduan Mudah dengan Banyak Contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!