Belajar CSS: Dasar CSS Grid

Apa itu CSS Grid?

CSS Grid merupakan salah satu mode layout yang terdapat dalam CSS. CSS grid menggunakan konsep grid atau kisi-kisi.

Konsep Dasar CSS Grid

Dalam CSS Grid terdapat Grid Container dan Grid Item. Grid Container merupakan parent dari Grid Item. Grid Item merupakan child langsung dari container. Grid item dapat tersusun dari beberapa Grid Cell.

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

Grid juga tersusun dari komponen berikut:

• Grid Track merupakan baris atau kolom pada Grid.
• Grid Line merupakan garis yang membatasi setiap Grid Track.
• Grid Cell merupakan sel atau bagian terkecil dari Grid.

Praktik Kali Ini

Praktik kita kali ini akan membuat tampilan seperti berikut:

Kode yang kita gunakan kali ini seperti berikut:

HTML:

<div class="container">
  <div class="html"></div>
  <div class="css"></div>
  <div class="js"></div>
  <div class="preview"></div>
</div>

CSS:

.container {
    width: 100%;
}

.css {
  background: green;
}

.js {
  background: blue;
}

.preview {
  background: yellow;
}

Properti Display

Properti display pada Grid Container harus bernilai grid. Kode CSS kita tambahkan dengan kode di bawah ini:

.container {
    display: grid;
}

Menentukan Ukuran Baris dan Kolom

Menentukan ukuran kolom dan baris dalam grid dapat dilakukan dengan properti grid-template-columns dan grid-template-rows pada Grid Container. grid-template-columns menentukan panjang lebar setiap kolom. grid-template-rows menentukan tinggi setiap baris. Dua properti tersebut dapat diisi dengan CSS Unit dan tiap ukuran dipisahkan oleh spasi. Contoh penulisannya sebagai berikut:

.container {
    grid-template-columns: 50px 100px auto 100px 50px; /* Terdapat 6 kolom */
    grid-template-rows: 100px 50px; /* Terdapat dua baris */
}

Kita dapat juga menentukan ukuran berdasarkan ruang yang tersedia menggunakan unit fr.

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

Jika kita mengulang-mengulang ukuran kita dapat menggunakan fungsi repeat().

.container {
    grid-template-columns: repeat(2, 1fr); /* Sama dengan 1fr 1fr */
}

Kode CSS kita tambahkan dengan kode di bawah ini:

.container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 150px 100px;
}

Tampilannya menjadi:

Menentukan dan Menggunakan Grid Area

Properti grid-template-areas pada Grid Container dapat digunakan untuk menentukan area-area pada Grid. Contoh penulisannya seperti berikut:

.container {
    grid-template-areas: 
        "html css js"
        "preview preview preview";
    /* Area preview mempunyai panjang tiga kolom */
}

Ukuran tiap kolom dan baris bergantung pada grid-template-columns dan grid-template-rows

Kalian juga dapat menggunakan titik untuk menentukan area kosong:

.container {
    grid-template-areas:
        "html . js"
        "preview preview preview";
}

Untuk menggunakan area pada item kita bisa menggunakan properti grid-area berisi area yang kita gunakan.

.item {
    grid-area: preview;
}

Kode CSS kita tambahkan lagi dengan kode berikut:

.container {
    grid-template-areas:
      "html css js"
      "preview preview preview";
}

.html {
  grid-area: html;
}

.css {
  grid-area: css;
}

.js {
  grid-area: js;
}

.preview {
  grid-area: preview;
}

Menentukan Jarak Antar Kolom dan Baris

Untuk menentukan jarak antar kolom kalian dapat menggunakan properti column-gap dan untuk jarak antar baris dapat menggunakan properti row-gap. Kode CSS kita tambah kode berikut:

.container {
    column-gap: 10px;
    row-gap: 10px;
}

Tampilannya menjadi:

Kode Akhir

Kode CSS kita menjadi berikut:

.container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 150px 100px;
  grid-template-areas:
      "html css js"
      "preview preview preview";
  column-gap: 10px;
  row-gap: 10px;
}

.html {
  grid-area: html;
  background: red;
}

.css {
  grid-area: css;
  background: green;
}

.js {
  grid-area: js;
  background: blue;
}

.preview {
  grid-area: preview;
  background: yellow;
}

Referensi

• CSS Tricks: A Complete Guide to Grid