DaunKoder
CSS

Belajar CSS: Responsive Layout dengan CSS Grid

Kita kali ini akan membuat tampilan responsive dengan CSS Grid tanpa CSS Media Query.

Apa yang Kita Pelajari?

Kita akan mempelajar hal-hal berikut:

  • Grid auto-fill
  • Fungsi minmax

Praktik Kali Ini

Kita kali ini akan membuat tampilan seperti ini

Praktik Kali Ini

Persiapan

Pertama kita menggunakan kode berikut:

HTML:

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS:

  .container > div {
    background: red;
    height: 100px;
  }

Kode di atas membuat tampilan seperti ini:

Hasil Persiapan

Menggunakan CSS Grid

Tambahkan kode CSS berikut:

  .container {
	  display: grid;
	  grid-template-columns: repeat(3, 200px);
	  column-gap: 10px;
  	  row-gap: 10px;
  }

Hasilnya:

Hasil Menambahkan CSS Grid

Menjadikan Grid Responsive

Untuk menjadikan grid responsive kita dapat menggunakan auto-fill pada fungsi repeat(). auto-fill akan memberikan jumlah kolom berdasarkan area yang tersedia pada kontainer. Tambahkan kode CSS di bawah ini:

.container {
    grid-template-columns: repeat(auto-fill, 200px);
}

Hasilnya:

Menentukan jumlah kolom berdasarkan area kosong

Agar kolom dapat meluas berdasarkan area yang tersedia kita dapat menggunakan fungsi minmax pada repeat. Fungsi min-max mempunyai dua argumen, yang pertama merupakan nilai terkecil dan kedua merupakan nilai terbesar. Tambahkan kode CSS berikut:

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

Ukuran minimal dari kolom akan 200px dan ukuran maksimal 1fr. 1fr menandakan bahwa ukuran akan berdasarkan area kosong. Jika semua kolom mempunyai ukuran 1fr maka semua kolom akan mempunyai luas sama. Maka hasilnya seperti ini:

Kolom Otomatis meluas

Kode Akhir

Kode akhir kita seperti ini:

HTML:

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS:

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

  .container > div {
    background: red;
    height: 100px;
  }

Referensi