Sejauh ini, kita telah melihat berbagai metode untuk memposisikan dan menata halaman web kita seperti tata letak kotak, tata letak flexbox, dll. Dalam semua ini, kita akan menulis kode HTML sesuai urutan tata letak dan menata CSS sesuai dengan desain kita. kebutuhan dan pilihan gaya. Jadi bagaimana jika kita bisa menulis kode HTML kita dalam urutan apa pun dan menempatkannya di mana pun kita mau di halaman web kita? Di sinilah peran grid.

Jadi apa sebenarnya grid itu?

Grid pada dasarnya adalah tata letak struktural dua dimensi dari halaman web. Kisi memisahkan urutan kode HTML sumber dari cara gaya dan penyajiannya. Katakanlah Anda ingin membuat situs web responsif dan Anda memerlukan tata letak dalam urutan yang berbeda untuk versi seluler situs web Anda dibandingkan versi desktop. Grid memungkinkan kita menempatkan dan menata elemen sesuai urutan yang kita inginkan.

Istilah dasar dalam kisi:

  1. Garis Kisi:

Ini adalah garis-garis yang membentuk grid.

2. Sel Kisi:

Sel grid adalah unit tunggal dari grid CSS.

3. Area Jaringan:

Area grid adalah setiap area dalam grid yang diapit oleh empat garis grid.

4. Jalur Kisi:

Jalur kisi adalah ruang di antara dua garis kisi. Garisnya bisa vertikal atau horizontal.

5. Talang:

Talang mengacu pada ruang antara baris dan kolom dalam kotak.

Membuat grid pertama kami:

Langkah 1: Buat wadah kotak. Untuk ini buat div dan di dalam CSS, tulis

tampilan: kisi

Sekarang tampilan container kita sudah diatur ke grid.

Langkah 2: Tentukan baris dan kolom grid. Meskipun ada berbagai metode untuk mendefinisikannya, kami akan tetap menggunakan metode dasar di sini.

grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;

Apa yang dilakukan potongan kode di atas adalah mendefinisikan 3 kolom dan 2 baris masing-masing berukuran 150px.

Sekarang mari kita tambahkan selokan ke dalamnya.

grid-gap: 1rem;

Cara di atas menambahkan 1rem ruang antara baris dan kolom grid.

Sekarang kita masuk ke wadah HTML dan menambahkan enam div di dalamnya.

Berikut tampilan kodenya:

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
</div>

Sekarang mari tambahkan bagian CSS:

.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px;
  grid-gap: 1rem;
}

Berikut hasil akhirnya:

Sekarang kita telah membuat grid pertama, mari kita lihat beberapa unit yang kita gunakan dalam grid.

Satuan Fr:

Sebelumnya kita menggunakan px sebagai unit untuk grid kita. Tapi itu tidak terlalu efisien untuk digunakan. Di situlah fungsi satuan Fr. Fr adalah kependekan dari pecahan. Artinya adalah sebagian kecil ruang yang tersedia di jaringan kita.

Sekarang kita membuat grid menggunakan unit Fr:

grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 150px 150px;

Apa yang dilakukan potongan kode di atas adalah membuat kotak dengan 3 kolom dengan lebar masing-masing 1 fr. Artinya berapapun lebar wadahnya, maka akan dibagi menjadi 3 kolom yang masing-masing lebarnya 1 fr. Kita juga dapat mengubah rasionya. Lihatlah contoh ini:

grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 150px 150px;

Notasi repeat():

Lihatlah kode di atas yang kami tulis. Kami menulis “1fr” tiga kali untuk menentukan tiga kolom. Dalam situasi seperti ini di mana kita merasa perlu mengulangi diri kita sendiri, kita menggunakan notasi repeat(). Lihatlah kode ini:

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);

Ini memberikan hasil yang sama seperti kode awal kita tetapi notasinya memudahkan kita menulis kodenya.

Pemosisian dalam kotak:

Perhatikan grid di atas. Ini memiliki 3 kolom dan 2 baris. Angka-angka tersebut disebut “garis grid”. Jadi jika ada 2 kolom dalam satu grid, maka akan ada 3 garis grid untuknya.

Di sini grid mempunyai 3 kolom, jadi mempunyai 4 garis grid berdasarkan kolom.

Ini memiliki 2 baris, sehingga memiliki 3 garis grid berdasarkan baris.

Sangat penting bagi kita untuk memahami konsep garis grid saat memposisikan elemen apa pun dalam grid karena dengan menggunakan garis inilah kita menentukan di mana elemen harus ditempatkan.

Sekarang mari kita definisikan sebuah container dalam HTML yang berisi enam div di dalamnya:

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

Katakanlah kita ingin item1 menempati 2 kolom pertama dan baris pertama grid kita. Untuk itu kami menggunakan kode CSS berikut:

.item1 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 3;
}

Ini akan memposisikan item1 di 2 kolom pertama dan baris pertama grid kita. Perhatikan bahwa garis kisi digunakan untuk menentukan di mana elemen dimulai dan diakhiri baik berdasarkan baris maupun kolom.

Properti singkatan:

Kita juga dapat menulis kode CSS di atas menggunakan notasi singkat yang diberikan di bawah ini:

.item1 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

Membuat tata letak dasar:

Kita telah mempelajari dasar-dasar membuat grid. Namun dalam penggunaan sebenarnya, grid digunakan untuk memposisikan berbagai bagian tata letak halaman web.

Misalnya, ini adalah tata letak dasar:

Mari kita mulai dengan menulis kode HTML dasar :

<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>

Di sini kita telah mendefinisikan “wadah” kelas dengan enam divisi di dalamnya.

Sekarang mari kita tentukan kode CSS gridnya:

.container {
  display: grid;
  width: 750px;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
}

Sekarang mari kita tempatkan pembagian kontainer di area grid:

.header {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}

.sidebar {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}

.content-1 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

.content-2 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.content-3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.footer {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}

Membuka kode ini di browser akan memberi kita tata letak di atas.

Area Templat Grid:

Sekarang kita telah melihat cara menempatkan item yang berbeda dalam grid menggunakan garis grid, mari kita lihat metode lain:

Metode lain untuk memposisikan item adalah dengan menggunakan area grid bernama dengan properti grid-template-area dan grid-area. Cara terbaik untuk menjelaskan hal ini adalah dengan sebuah contoh. Mari kita buat ulang grid dari contoh sebelumnya dengan properti grid-template-areas:

.container {
  display: grid;
  width: 100%;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header header"
      "sidebar content-1 content-1"
      "sidebar content-2 content-3"
      "footer footer footer";
}

Di sini kita telah mendefinisikan tiga kolom dan empat baris. Daripada menempatkan setiap item individual, kita dapat menentukan keseluruhan tata letak menggunakan properti grid-template-areas. Kita kemudian dapat menetapkan area tersebut ke setiap item grid menggunakan properti grid-area.

Sekarang mari tambahkan area ini ke kode HTML untuk menentukan area template grid:

<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>

Sekarang tambahkan sisa CSS:

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.footer {
  grid-area: footer;
}

Merender kode di atas di browser akan memberi kita tata letak yang sama seperti yang kita buat dengan kode terakhir.

Ini hanyalah dasar-dasar grid, masih banyak lagi yang bisa kita lakukan dengannya.

Terima kasih sudah membaca.