Skip to main content

B.7.2.1. Grid Container

Pada chapter ini kita akan membahas bagaimana teman-teman bisa membuat layout website yang rapi dan terstruktur menggunakan CSS Grid Layout.

Jadi, apa sih yang dimaksud dengan Grid Container? Nah, Grid Container itu adalah elemen HTML yang diberi properti display: grid; atau display: inline-grid;. Begitu teman-teman menambahkan properti ini, elemen tersebut berubah menjadi Grid Container, dan elemen-elemen di dalamnya disebut Grid Items. Dengan Grid Container, kita bisa mengatur posisi dan ukuran setiap item dengan mudah dalam grid berbentuk kolom dan baris.

Untuk membuat Grid Container, teman-teman hanya perlu menambahkan display: grid; atau display: inline-grid;pada CSS elemen yang ingin dijadikan sebagai container.

Coba perhatikan kode di bawah ini:

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

Ketika sebuah elemen memiliki display:grid; maka elemen tersebut bisa teman-teman sebut sebagai sebuah grid-container ya.

kode di atas ketika teman-teman buka di web browser maka hasilnya akan terlihat seperti:

Output

Apa saja yang bisa kita lakukan dengan grid-container ini? banyak ya teman-teman. Di chapter-chapter selanjutnya kita akan coba membahas satu-persatu ya. Next aja ya langsung:D

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.7-css-layouting/B.7.2-grid/B.7.2.1-grid-container