Tech: CSS Grid

Apabila berkata tentang grid di dalam CSS, kebanyakkan orang akan terfikir tentang nested div dengan class yang pelbagai seperti row dan column seumpama Bootstrap ataupun sesuatu yang lebih klasik seperti 960gs. Tetapi kini CSS sendiri mempunyai fungsi grid.

Fungsi grid jika dilihat adalah layout oriented. Tidak kisah macam mana susunan asal tetapi dengan menggunakan grid, kita boleh menentukan dimana mahu diletakkan sesuatu element tersebut di dalam layout. Sebagai contoh, ini adalah elemen yang ada di dalam layout anda.

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
</div>

grid-css-pre

Tetapi dengan menggunakan grid, kita boleh mengubahnya menjadi seperti ini;

grid-css-post

Langkah 0 – Firefox

Untuk Grid, aku amat mencadangkan anda menggunakan Firefox. Sebab Firefox ada fungsi grid yang terbina secara dalaman tanpa memerlukan pemalam tambahan.

Dan untuk memudahkan pembelajaran, kita tambahkan sendiri border dan beberapa perkara lain.

.container {
  width: 500px;
  height: 500px;
  margin: 100px auto 0;  
}

.item {
  border: 1px dashed purple;
}

div with purple dotted border

Langkah 1 – Grid

Langkah pertama adalah untuk mengaktifkan grid kedalam CSS.

.container {
 ...
 display: grid
}

css display grid

Ini kerana apabila menggunakan grid, grid akan mengambil semua height dan width yang diberikan di dalam CSS iaitu 500px×500px dalam kes ini. Ratio untuk setiap kotak adalah automatik. Konsep automatik amat kuat di dalam grid.

Langkah 2 – 4×4

Perbezaan besar di antara grid dan flexbox adalah konsepnya. Grid sesuai untuk membuat layout dua dimensi tetapi flexbox lebih sesuai untuk satu dimensi. Sebagai contoh, Untuk menggunakan flexbox bagi mencapai apa yang kita henda buat pada hari ini adalah tidak sesuai kerana melibatkan dua dimensi (???? dan ????) tetapi jika satu dimensi (????) sahaja seperti navbar, flexbox adalah calon yang sesuai.

Kembali ke grid kita, daripada hasil akhir yang mahu dicapai di atas, kita tahu bahawa kotak yang kita perlukan adalah berbentuk 4×4. Maka kita perlu memberi tahu kepada grid, yang kita mahu membina grid bersaiz 4×4.

.container{
  ...
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto auto;
}

css grid 4 by 4

Kenapa hanya 4×2? sebab kita hanya ada 8 kotak. Jika mahu melihat 4×4 dalam masa ini, anda perlu menjadikannya 16 kotak atau anda juga boleh melihatnya menggunakan Firefox grid inspect element.

Jika anda perasan, penggunaan auto auto auto auto tersebut amat merenyahkan. Maka CSS mempunyai satu fungsi khas untuk digunakan di dalam grid iaitu repeat. Anda boleh menukarkan daripada auto auto auto auto kepada repeat(4, auto) seperti ini;

.container{
  ...
  grid-template-columns: repeat(4,auto);
  grid-template-rows: repeat(4,auto);
}

Kemudian untuk memberikan sedikit jarak di antara kotak, kita tambahkan grid-gap.

.container {
  ...
  grid-gap: 1em;
}
grid gap
via browser biasa
grid gap firefox
via firefox grid element inspector

Langkah 3 – Pindahkan 1 kepada 7

Kita mahu pindakan kotak 1 kepada kotak 7.

Langkah 3.1 – Pindahkan 1 kepada 3

Untuk memindahkan kotak 1 kepada 3, kita perlu menggerakkan kotak 1 kepada column 3 sehingga column 4. Jika tidak faham rujuk gambar di bawah.

css grid column start stop
nombor column boleh dilihat menggunakan firefox grid
.item:first-child {
  background: red; // estetika
  grid-column-start: 3;
  grid-column-end: 4;
}

css grid column start end post

Langkah 3.2 – Turunkan kotak 1 ke posisi kotak 5 (sekarang) atau 7 (asal)

Untuk memindahkan kotak 1 kepada 5 atau 7, kita perlu menggerakkan kotak 1 kepada row 2 sehingga column 3. Jika tidak faham rujuk gambar di bawah.

.item:first-child {
  ...
  grid-row-start: 2;
  grid-row-end: 3;
}

css grid row post

Langkah 3.3 – Refactor

Anda boleh meringkaskan CSS kepada

.item:first-child {
  background: red;
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

Langkah 3.4 – Besarkan saiz kotak 1 kepada 2×2.

.item:first-child {
  background: red;
  grid-row: 2 / 4;
  grid-column: 3 / 5;
}

css grid make it bigger

Hasil akhir langkah 3:

hasil akhir langkah 3

Langkah 4 – Pindahkan kotak 3 kepada kotak 2 dan jadikan saiznya 2×2

.item:nth-child(3) {
  background: cornflowerblue;
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}

final langkah 4

Langkah 5 – Besarkan kotak 8 kepada 1×3

.item:last-child {
  background: yellowgreen;
  grid-column: 2 / 5;
}

final langkah 5

Selesai. Jika anda perasan, walau di mana pun kedudukan baharu kotak tersebut, untuk menggerakkannya masih menggunakan kedudukan element yang asal.

Nota: Aku tak pasti kenapa baris kedua lebih kecil daripada yang lain.

 

One thought on “Tech: CSS Grid

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.