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
- Apa Itu CSS Grid Advanced?
- Konsep Dasar Grid Template Area
- Cara Kerja Grid Template Area
- Grid Template Columns dan Rows
- Contoh Layout CSS Grid Kompleks
- Responsivitas dengan Grid Template Area
- Auto Placement di CSS Grid
- Pengaturan Auto Placement yang Lebih Dalam
- Contoh: Gallery Dinamis dengan Auto Placement
- Menggabungkan Template Area dan Auto Placement
- Tips Mengoptimalkan CSS Grid Advanced
- Kesimpulan
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) danminmax(). - 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.
Cara Kerja Grid Template Area
Beberapa hal yang perlu kamu pahami:
- Setiap string di dalam
grid-template-areasmewakili satu baris grid. - Setiap nama area yang berulang dalam satu baris berarti area tersebut melebar (
span) ke beberapa kolom. - 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 denseataucolumn dense→ memungkinkan repacking item untuk mengisi ruang kosong.
Contoh: Gallery Dinamis dengan Auto Placement
.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.
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
Gunakan
repeat()danminmax()untuk fleksibilitas tinggi.
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));Gunakan nama area yang deskriptif.
Hindari nama generik seperti a, b, c. Gunakan header, sidebar, ads, dll.Gunakan devtools browser.
Chrome dan Firefox memiliki CSS Grid inspector yang memudahkan debugging layout.Gabungkan Grid & Flexbox.
Gunakan Grid untuk struktur besar, Flexbox untuk elemen kecil di dalam grid cell.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.
