Panduan Lengkap CSS Grid

Proses pertama yang harus dilakukan dalam membuat desain halaman website yaitu menentukan layoutnya.

Sayangnya, proses inilah yang biasanya paling banyak menyita waktu karena tingkat kesulitannya cukup tinggi.

Tapi itu dulu…

Di era tahun 90an.

Waktu itu, untuk membuat layout halaman website masih menggunakan teknik CSS tabel dengan dibantu image slicing tools seperti Fireworks.

Saat ini dunia terus berubah.

Fitur CSS juga terus berkembang.

Sekarang sudah ada beberapa teknik yang bisa dilakukan untuk menentukan layout halaman website.

Mulai dari teknik CSS table (cara jadul), CSS property float dan clearfix, CSS Flexbox, dan yang paling baru yaitu CSS Grid.

Semakin baru fiturnya, semakin memudahkan kita untuk mengatur tata letak elemen website.

Jadi bagi kamu yang baru belajar CSS, tidak ada salahnya untuk langsung mempelajari teknik membuat layout dengan CSS Grid ini.

Dan saya akan membahasnya secara detail dalam artikel ini.

Yuk baca sampai selesai…

Apa itu CSS Grid Layout?

CSS Grid Layout adalah fitur terbaru dari CSS3 yang digunakan untuk mengatur sistem tata letak elemen HTML.

Grid layout memiliki sistem 2 dimensi sehingga dapat menangani kolom dan baris.

Tidak seperti CSS Flexbox yang sebagian besar merupakan sistem 1 dimensi.

Dengan menentukan CSS Grid pada elemen induk (sebagai grid container), otomatis elemen anak akan menjadi item grid (grid items).

CSS Grid telah mengubah cara kita dalam mengatur tata letak elemen menjadi lebih mudah.

Sebelum adanya fitur ini, untuk mengatur tata letak elemen (misalnya menengahkan elemen secara vertikal) harus menggunakan teknik float atau positioning yang cukup ribet dan kadang perlu teknik hack CSS.

Kemudian datang fitur flexbox yang bisa memecahkan masalah tersebut. Tapi masih menyisakan sedikit masalah dalam hal pengaturan baris elemen.

Dan akhirnya, fitur grid layout ini datang untuk menyelesaikan semua masalah sebelumnya.

Dasar CSS Grid Layout

Untuk mulai menggunakan CSS Grid, kamu harus menentukan elemen container sebagai grid dengan display: grid.

Kemudian tentukan ukuran kolom dan baris dengan grid-template-columns dan grid-template-rows.

Setelah itu, tambahkan grid-column dan grid-row pada elemen anak sebagai grid item.

Terminology CSS Grid

Sebelum mendalami konsep Grid, kamu harus memahami dulu terminologinya.

Karena ada beberapa istilah dalam CSS grid ini yang semua konsepnya hampir sama.

Sehingga kamu harus menghafalnya seperti yang didefinisikan oleh spesifikasi Grid.

Grid Container

Grid container adalah elemen yang ditentukan dengan display: grid dan dijadikan induk dari semua item grid.

Pada contoh ini, <div class="container"> adalah grid container.

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

Grid Item

Grid Item adalah semua elemen anak pertama dari grid container.

Pada contoh berikut, semua <div class="item"> adalah grid item.

Tetapi <p class="sub-item"> bukanlah grid item karena sebagai anak kedua.

<div class="container">
  <div class="item"></div>
  <div class="item">
      <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Grid Line

Grid line adalah garis pemisah yang membentuk struktur grid.

Garis ini berupa garis vertikal (“column grid lines”) dan juga garis horizontal (“row grid lines”) yang berada di kedua sisi baris dan kolom.

Garis ini bisa dilihat secara real pada browser Chrome dengan cara klik kanan > klik inspeksi > pada tab elements, arahkan kursor pada elemen grid container.

Garis berwarna orange itulah yang disebut dengan grid lines.

Grid Track

Grid track adalah ruang antara dua garis grid yang berdekatan.

Atau bisa disebut sebagai kolom atau baris grid.

Pada contoh berikut, grid track ada diantara garis grid kedua dan ketiga yang saya beri warna orange.

Grid Cell

Grid Cell adalah ruang antara dua garis grid kolom (“column”) dan garis grid baris (“row”) yang berdekatan.

Grid cell ini merupakan satu “unit” dari grid.

Pada contoh berikut, grid cell ada di antara garis grid baris 1 dan 2, dan garis grid kolom 2 dan 3.

Grid Area

Grid Area adalah total ruang dari beberapa grid cell yang telah ditentukan sebelumnya.

Pada contoh berikut, grid area terdiri dari 4 grid cell yang ada di antara garis grid baris 1 dan 3, dan garis grid kolom 1 dan 3.

.container {
  display: grid;
}

.container {
  display: grid;
}

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
}

.container {
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

.item {
  grid-column-start: col-start 2;
}

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 15px 10px;
}

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

.container {
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-row-gap: 24px;
  grid-column-gap: 5rem;
}

.container {
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-gap: 100px 1em
}

.container {
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-gap: 2rem;
}

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

.container {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.item-1 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}

.container {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.item-1 {
  grid-row: 2;
  grid-column: 3 / 4;
}

.container {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.item-1 {
  grid-area: 2 / 2 / 3 / 3
}