Home / CSS / Menguasai CSS Grid Advanced: Template Area dan Auto Placement

Menguasai CSS Grid Advanced: Template Area dan Auto Placement

Created at by Aris Munandar
Share on

Jika kamu sudah familiar dengan dasar-dasar CSS Grid, kini saatnya naik level dan menguasai CSS Grid Advanced.

CSS Grid adalah salah satu fitur paling revolusioner di CSS modern karena memberikan kontrol penuh terhadap tata letak dua dimensi — baik baris (rows) maupun kolom (columns) — tanpa memerlukan hack atau framework tambahan.

Dalam panduan ini, kamu akan belajar dua fitur lanjutan yang sangat penting, yaitu:

  • CSS Grid Template Area — untuk membuat layout dengan nama area yang mudah dibaca dan dikelola.
  • CSS Grid Auto Placement — untuk menempatkan elemen secara otomatis sesuai aturan grid tanpa perlu menentukan posisi satu per satu.

Panduan ini akan membawa kamu dari pemahaman dasar menuju teknik penataan layout kompleks dengan CSS Grid, termasuk cara membuat struktur grid responsif dan dinamis yang dapat diterapkan dalam proyek nyata.

Daftar isi

Baca juga: Tutorial Membuat Animasi Kompleks dengan CSS dan Keyframes

Apa Itu CSS Grid Advanced?

Secara sederhana, CSS Grid Advanced mencakup semua fitur lanjutan dari sistem grid CSS yang memungkinkan kamu membuat layout kompleks dengan kontrol tinggi terhadap posisi dan ukuran elemen.

Beberapa kemampuan lanjutan CSS Grid meliputi:

  • Template area dengan nama kustom.
  • Penempatan otomatis (auto placement).
  • Spanning (elemen yang melintasi beberapa kolom/baris).
  • Responsivitas berbasis fractional units (fr) dan minmax().
  • Pengaturan explicit dan implicit grid tracks.

Dengan menguasai teknik ini, kamu dapat membuat layout sekelas dashboard profesional, galeri dinamis, hingga struktur halaman majalah digital — semuanya hanya dengan CSS, tanpa bantuan JavaScript atau framework seperti Bootstrap.

Konsep Dasar Grid Template Area

Grid Template Area adalah cara mendefinisikan layout grid menggunakan nama area yang mudah dibaca.

Alih-alih mengingat baris dan kolom dengan angka, kamu bisa memberikan nama seperti header, sidebar, content, dan footer.

Contoh sederhana:

HTML:

<div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ipsum at unde repellat, incidunt libero laboriosam voluptatem sapiente quibusdam, ducimus illo? Expedita vero perferendis deleniti iste mollitia necessitatibus pariatur id.</div>
    <div class="footer">Footer</div>
</div>Code language: HTML, XML (xml)

CSS:

.container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px auto 60px;
    gap: 100px;
}

.header {
    grid-area: header;
    border-bottom: 1px solid #ccc;
}

.sidebar {
    grid-area: sidebar;
    border-right: 1px solid #ccc;
}

.content {
    grid-area: content;
    border-right: 1px solid #ccc;
}

.footer {
    grid-area: footer;
    border-top: 1px solid #ccc;
}Code language: CSS (css)

Dengan sintaks seperti di atas, layout menjadi lebih semantik dan mudah diatur — terutama untuk proyek besar dengan banyak elemen.

Berikut ini adalah contoh HTML lengkap dari kode diatas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Advance</title>

    <style>
        .container {
            display: grid;
            grid-template-areas:
                "header header"
                "sidebar content"
                "footer footer";
            grid-template-columns: 200px 1fr;
            grid-template-rows: 80px auto 60px;
            gap: 100px;
        }

        .header {
            grid-area: header;
            border-bottom: 1px solid #ccc;
        }

        .sidebar {
            grid-area: sidebar;
            border-right: 1px solid #ccc;
        }

        .content {
            grid-area: content;
            border-right: 1px solid #ccc;
        }

        .footer {
            grid-area: footer;
            border-top: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="sidebar">Sidebar</div>
        <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ipsum at unde repellat, incidunt libero laboriosam voluptatem sapiente quibusdam, ducimus illo? Expedita vero perferendis deleniti iste mollitia necessitatibus pariatur id.</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>Code language: HTML, XML (xml)

Berikut ini adalah hasil visualnya di web browser.

CSS Grid Layout

Cara Kerja Grid Template Area

Beberapa hal yang perlu kamu pahami:

  1. Setiap string di dalam grid-template-areas mewakili satu baris grid.
  2. Setiap nama area yang berulang dalam satu baris berarti area tersebut melebar (span) ke beberapa kolom.
  3. Kamu bisa menggunakan titik (.) untuk area kosong.

Contoh layout yang lebih kompleks:

grid-template-areas:
    "header header header"
    "sidebar content ads"
    "footer footer footer";Code language: JavaScript (javascript)

Kamu bisa membayangkannya seperti desain wireframe — sangat membantu ketika berkolaborasi dengan tim desain.

Grid Template Columns dan Rows

Untuk mendukung area layout, kamu bisa mengatur ukuran kolom dan baris dengan grid-template-columns dan grid-template-rows.

.container {
    display: grid;
    grid-template-columns: 250px 1fr 200px;
    grid-template-rows: 100px auto 80px;
}Code language: CSS (css)

Kamu juga bisa menggunakan unit fraction (fr) agar lebih fleksibel:

grid-template-columns: 1fr 2fr 1fr;Code language: HTTP (http)

Artinya:

  • Kolom pertama = 1 bagian.
  • Kolom kedua = 2 bagian (dua kali lebih lebar).
  • Kolom ketiga = 1 bagian.

Contoh Layout CSS Grid Kompleks

Sekarang, mari kita lihat contoh layout yang lebih realistis seperti halaman portal berita:

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 300px;
    grid-template-rows: 80px auto 60px;
    gap: 15px;
}

header { grid-area: header; background: #4a90e2; }
nav { grid-area: nav; background: #f1c40f; }
main { grid-area: main; background: #ecf0f1; }
aside { grid-area: aside; background: #e67e22; }
footer { grid-area: footer; background: #2ecc71; }
Code language: CSS (css)

Layout ini menggambarkan struktur 3 kolom dengan header dan footer penuh, mirip seperti banyak situs web profesional.

Responsivitas dengan Grid Template Area

Salah satu kekuatan CSS Grid adalah mudahnya membuat layout responsif tanpa media query yang rumit.

Misalnya, ubah struktur saat layar kecil:

@media (max-width: 768px) {
    .container {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
        grid-template-columns: 1fr;
    }
}Code language: CSS (css)

Layout langsung menyesuaikan: dari 3 kolom menjadi 1 kolom vertikal di perangkat mobile.

Auto Placement di CSS Grid

Selain template area, fitur lain yang sangat membantu adalah Auto Placement.

CSS Grid bisa menempatkan elemen secara otomatis berdasarkan urutan HTML tanpa kamu menentukan posisi spesifik.

CSS:

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

HTML:

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
</div>Code language: HTML, XML (xml)

Elemen otomatis mengisi baris per baris — bahkan kamu bisa mengatur arah dan perilaku pengisian.

Pengaturan Auto Placement yang Lebih Dalam

Gunakan properti grid-auto-flow untuk mengontrol arah dan logika penempatan otomatis.

.container {
    display: grid;
    grid-auto-flow: row; /* default */
}

.container-alt {
    display: grid;
    grid-auto-flow: column;
}Code language: CSS (css)

Nilai yang tersedia:

  • row → menambahkan item secara horizontal.
  • column → menambahkan item secara vertikal.
  • row dense atau column dense → memungkinkan repacking item untuk mengisi ruang kosong.
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.gallery div {
    background: #3498db;
    height: 100px;
    border-radius: 8px;
}Code language: CSS (css)

Layout ini otomatis menyesuaikan jumlah kolom berdasarkan lebar layar — cocok untuk galeri foto atau daftar produk.

Berikut ini adalah contoh galeri dengan kode HTML lengkap menggunakan grid seperti CSS diatas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Advance</title>

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

        .gallery div {
            background: #3498db;
            height: 100px;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="gallery">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>Code language: HTML, XML (xml)

Maka hasil visualnya seperti gambar di bawah ini.

CSS Grid Gallery Layout

Menggabungkan Template Area dan Auto Placement

Kamu bahkan bisa menggabungkan kedua teknik ini.

Misalnya, layout dengan bagian tetap (header/footer) dan bagian dinamis (konten galeri):

.container {
    display: grid;
    grid-template-areas:
        "header header"
        "gallery gallery"
        "footer footer";
    grid-template-rows: 80px auto 60px;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.gallery {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}Code language: CSS (css)

Struktur ini menciptakan layout hybrid — bagian atas & bawah statis, tengahnya fleksibel mengikuti jumlah item.

Tips Mengoptimalkan CSS Grid Advanced

  1. Gunakan repeat() dan minmax() untuk fleksibilitas tinggi.
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  2. Gunakan nama area yang deskriptif.
    Hindari nama generik seperti a, b, c. Gunakan header, sidebar, ads, dll.

  3. Gunakan devtools browser.
    Chrome dan Firefox memiliki CSS Grid inspector yang memudahkan debugging layout.

  4. Gabungkan Grid & Flexbox.
    Gunakan Grid untuk struktur besar, Flexbox untuk elemen kecil di dalam grid cell.

  5. Gunakan auto-placement untuk konten dinamis.
    Cocok untuk cards, gallery, atau feed.

Kesimpulan

CSS Grid bukan hanya alat tata letak biasa. Dengan memahami dan menguasai CSS Grid Advanced, kamu bisa membangun layout modern, efisien, dan responsif hanya dengan CSS.

Dua konsep utama — Grid Template Area dan Auto Placement — memberi fleksibilitas luar biasa untuk proyek besar tanpa harus bergantung pada framework.

Mulailah berlatih membuat layout kompleks, dan kamu akan segera memahami kekuatan sejati dari CSS Grid.

Share on

5 CSS Ahli

Menjadi CSS Developer yang siap proyek nyata

Related article!

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Leave comment

Alamat email Anda tidak akan dipublikasikan. Required fields are marked *