Modul 3-12 CSS Grid

Halo, apa kabar teman-teman. Kita kembali lagi dalam course HTML & CSS Nusantech Academy. Setelah sebelumnya kita sempat mengenal mengenai Flexbox, kini kita akan lanjut membahas Grid. Semangat!

Apa itu Grid

Grid merupakan salah satu super tool yang digunakan untuk mengatur layout website. Layaknya Flexbox, Grid mampu membuat layout kita responsive dan fleksibel. Untuk membuat halaman web yang lebih powerful kita bisa mengkombinasikan kedua konsep ini.

Grid digunakan untuk menangani layout yang harus kita kontrol dari sisi kolom dan baris(multi-dimensi). Sedangkan didalam flexbox kita hanya dapat mengatur satu dimensi antara kolom atau baris. Hal ini yang membuat grid cocok untuk mengatur layout dalam skala besar.

Sebelum kita mengenal Property yang digunakan dalam grid, penting bagi teman-teman untuk mengetahui istilah-istilah berikut ini

Item & container

Mirip dengan flexbox, container dalam grid disebut grid container, dan elemen child didalamnya disebut grid item.

Grid Lines

Grid lines merupakan garis yang membentang membentuk pondasi elemen grid. Ada 2 jenis grid lines. Yaitu row (baris) dan column (kolom). berikut ini contoh ilustrasi 4 row lines (kuning) dan 4 column lines (merah).

Grid Cell

Grid cell merupakan unit tunggal yang berada diantara 2 row lines dan 2 column lines yang berdekatan. Contoh berikut ini ini :

Grid Gap

Grid gap memiliki fungsi mirip dengan margin yakni memberi jarak kosong antar grid cell. Grid gap yang vertical disebut column gap dan horizontal disebut row gap

Grid Track

Jika grid cell merupakan hasil dari perpotongan 2 row lines dan 2 column lines. Maka grid track merupakan hasil dari 2 garis baik row atau column yang berdekatan dan sejajar. Jadi bisa dibilang grid track ini seperti baris atau kolom.

Grid Area

Ilustrasi dibawah ini merupakan contoh grid area. Terdiri dari 4 grid cell atau 3 row lines dan 3 column lines. Bahkan 1 grid cell pun bisa disebut grid area

Penggunaan:

Kode HTML:

<div class="grid-container">
        <div class="grid-item1">Item 1</div>
        <div class="grid-item2">Item 2</div>
        <div class="grid-item3">Item 3</div>
        <div class="grid-item4">Item 4</div>
        <div class="grid-item5">Item 5</div>
        <div class="grid-item6">Item 6</div>
        <div class="grid-item7">Item 7</div>
        <div class="grid-item8">Item 8</div>
        <div class="grid-item9">Item 9</div>
    </div>

Kode CSS:

.grid-container {
margin: 3rem;
    min-height: 3rem;
    background-color: pink;
}

.grid-container > div {
    padding: 5rem; 
}

Tiap item bisa diwarnai terserah teman-teman

display

Untuk menghasilkan elemen grid maka kita menggunakan property display: grid atau inline-grid sebagai patokan utama.

Kode CSS:

.grid-container {
display: grid; /* atau inline-grid */
}

grid-template-rows & grid-template-columns

Mendeklarasikan display: grid tidak akan langsung membuat elemen tersebut berubah bentuk. Kita akan mencoba mengatur kolom dan baris seperti berikut

Kode CSS:

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

Hasil:

Apa itu 1fr? fr atau fraction merupakan unit untuk mengatur proporsi tiap item pada kolom atau baris. Pada contoh diatas kita telah mencoba membuat 3 kolom yang dideklarasikan dengan grid-template-columns: 1fr 1fr 1fr; dan 3 baris dengan grid-template-rows: 1fr 1fr 1fr;

Masih ingat dengan property flex-grow pada materi Flexbox sebelumnya? Yups cara kerja fr ini mirip dengan property tersebut.

Selain dengan menggunakan fr kita juga bisa memakai pixel, prosentase, atau auto.

Contoh

Kode CSS :

.grid-container {
display: grid;
grid-template-columns: 200px 1fr auto; 
    grid-template-rows: 1fr 100px 40%;
}

Dan juga ada repeat() function bawaan dari CSS yang berguna untuk membuat perulangan kolom atau baris yang sama ukuran.

Contoh

Kode CSS:

.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

Contoh diatas sama dengan :

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

Hasil:

Lebih banyak tentang repeat().

grid-template-areas & grid-area

grid-template-areas digunakan untuk membuat template row & column, menggunakan nilai yang didefinisikan pada property grid-area dalam elemen grid item.

Kode HTML:

<div class="grid-container">
    <div class="grid-header">Header</div>
    <div class="grid-main">Main</div>
    <div class="grid-side">Side</div>
    <div class="grid-footer">Footer</div>
</div>

Kode CSS:

.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: auto;
grid-template-area: 
“header header header header”
“main main . side”
“footer footer footer none”;
}
.grid-header {
    background-color: red;
    grid-area: header;
}

.grid-main {
    background-color: purple;
    grid-area: main;
}

.grid-side {
    background-color: aquamarine;
    grid-area: side;
}

.grid-footer {
    background-color: green;
    grid-area: footer;
}

Hasil

Contoh diatas menciptakan panjang 4 kolom dan 3 baris.

Perhatikan juga pada

“…”

“main main . side”

“footer footer footer none”;

Tanda titik antara main dan side serta “none” diatas membuat cell kosong

grid-template

grid-template merupakan shorthand dari property grid-template-columns, grid-template-rows, dan grid-template-areas.

Kode HTML:

<div class="grid-container">
        <div class="gridheader">Header</div>
        <div class="gridside">Side</div>
        <div class="gridmain">Main</div>
        <div class="gridfooter">Footer</div>
    </div>

Kode CSS:

.grid-container {
display: grid;
      width: 100%;
      height: 600px;
      margin: 3rem;
      grid-template: 
          [header-start] "head head" 80px [header-end]
[main-start]   "side  main" 1fr  [main-end]
            [footer-start] "side  foot" 100px [footer-end]
            / 200px 1fr; 
}

.grid-container > div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white; 
}

.gridheader {
      background-color: red;
      grid-area: head;
}

.gridside {
      background-color: purple;
      grid-area: side;
}

.gridmain {
      background-color: blue;
      grid-area: main;
}

.gridfooter {
      background-color: green;
      grid-area: foot;
}

Hasil

Jika teman-teman bingung dengan contoh grid-template diatas berikut sedikit penjelasannya

grid-template diatas sama dengan kode berikut

Kode CSS:

.grid-container {
...
grid-template-rows: 
[header-start] 80px [header-end main-start] 1fr [main-end footer-start] 100px [footer-end];
grid-template-columns: 200px 1fr;
grid-template-area: 
“header header”
“side main”
“side footer”;
}

Dari contoh di atas, kita berhasil membuat 3 baris dan 2 kolom

Teman-teman pasti tanya apa itu [header-start] – [header-end] dan dsb.

Itu adalah contoh penamaan garis/line. Jika diilustrasikan seperti ini

Lebih lanjut tentang grid-template.

Gap pada elemen grid dapat dibuat dengan beberapa property berikut

row-gap: untuk membuat gap pada tiap baris
column-gap: untuk membuat gap pada tiap kolom
grid-column-gap: cara lama, sama seperti column gap
grid-row-gap: cara lama, sama seperti row gap

Contoh penggunaan

Kode CSS:

.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 2em;
column-gap: 10px;
}

Hasil

Teman-teman juga bisa memakai shorthand dari property diatas dengan menggunakan gap atau grid-gap

Contoh

Kode CSS:

grid-container {
display: grid;
gap: 2em 10px;
}

Mengatur single grid item

Kita bisa mengatur posisi sebuah grid item dengan menggunakan property grid-column-start, grid-column-end, grid-row-start, grid-row-end. Property ini dapat menentukan posisi item berdasarkan column lines dan row lines.

grid-column-start dan grid-row-start adalah Property yang menentukan garis awal grid-item diletakkan. Sedangkan grid-column-end dan grid-row-end menyatakan garis akhir dari posisi grid-item.

Property-property tersebut menerima beberapa nilai berikut:

garis/line

Ditulis dengan angka/nomor atau nama garis

span <nama-line | garis>

Item akan membentang sampai nomor garis / nama garis yang ditentukan

auto

Otomatis mengikuti aturan dari kontainer

Contoh

Kode CSS:

.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
background-color: pink;
gap: 1em;
}

Kita akan mencoba mengatur grid item 1

Kode CSS:

.grid-item {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}

Hasil

Dari contoh diatas kita membuat 2 kolom dan 3 baris. Akibatnya ada 3 garis kolom(kiri ke kanan), dan 4 garis baris(atas ke bawah).

Kemudian kita memposisikan item 1 dengan awalan garis column 2 dan diakhiri dengan garis column 3 serta garis row awal 2 dan garis row akhir 4.

Keempat properti diatas juga memiliki shorthand berikut

grid-column: shorthand dari property grid-column-start dan grid-column-end
grid-row: shorthand dari property grid-row-start dan grid-row-end

Contoh penggunaan

Kode CSS :

.grid-item 1 {
grid-row: 2 / span 2
grid-column: 2/3
}

Hasilnya akan sama dengan contoh sebelumnya, property -start dan -end dipisah dengan tanda slash “/”

Nah span diatas artinya item kita akan di render mulai dari garis kedua sampai ke dua garis berikutnya alias garis ke-4.

Penutup

Sebenarnya masih banyak lagi Property yang digunakan dalam mengatur elemen grid untuk lebih spesifik. Diantaranya

Justify-items
Align-items
Place-items
Justify-content
Align-content
Place-content
Justify-self
Align-self
Place-self
Grid-auto-columns
Grid-auto-rows
Grid-auto-flow
Grid

Selamat! teman-teman sudah mengenal tentang dasar Grid. Untuk teman-teman jangan lupa untuk membiasakan berlatih dengan Grid dan Flexbox ya!

Oh ya, kalau teman-teman ingin belajar sambil seru-seruan ini ada Grid Garden atau grid critters – Tempat bermain sambil belajar grid.

Jika teman-teman punya saran atau pertanyaan silahkan isi dikolom komentar ya. Untuk pembahasan berikutnya kita akan mengenal mengenai Media Query.

Semangat, see you next time!

Modul 3-12 CSS Grid

nusantech

Previous PostModul 3-13 CSS Media Query

Next PostModul 3-11 CSS Flexbox

Leave a Reply Cancel Reply