Dulu tahun 90an, saya membuat layout HTML menggunakan struktur tabel dengan bantuan dari *image slicing tools* seperti Fireworks. Setelahnya kita *move on* ke *inline* dan *float*. Lalu muncul lagi Flexbox, dan sekarang kita tiba di masa CSS Grid. 

CSS Grid menyelesaikan permasalahan layout yang tidak dapat diselesaikan dengan baik oleh solusi CSS lainnya. Di tutorial ini, kita akan belajar bagaimana memebuat sebuah layout menggunakan CSS Grid.

Tutorial ini tidak membahas CSS Grid secara mendalam, hanya sebagai fondasi awal untuk memeprkenalkan potensi yang dapat diraih dengannya. 

Ayo kita mulai.

## Hasil yang Akan Dicapai

Berikut ini layout yang akan kita dapatkan diakhir tutorial. Saya membuat layout ini sesederhana mungkin sehingga pembaca dapat mengikuti tutorial ini tanpa kesulitan yang berarti. 

![](https://static.cdn-cdpl.com/source/998b78e349061b4971c0a2b0e8d6be41/https://static.cdn-cdpl.com/source/998b78e349061b4971c0a2b0e8d6be41/dd-1507496194348.png)

## Persiapan

Kita tidak akan menggunakan framework atau build tools apapun supaya fokus pada implementasi CSS aslinya. Ada tiga file yang kita butuhkan yaitu satu file HTML, satu file CSS, dan satu lagi file gambar untuk logo.

Buat sebuah folder kosong baru dan buat file `index.css` dan `index.html`.

Isi file `index.html` dengan konten berikut.

```
<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>

        <title>CSS Grid Tutorial</title>
        <meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet">
        <link media="all" type="text/css" rel="stylesheet" href="index.css">

    </head>
    <body>

    </body>
</html>
 
```

[Download logo yang diperlukan di sini](https://s3.amazonaws.com/coursetro/logo.png) lalu simpan di dalam folder tadi. 

## Konten HTML

Di dalam tag `<body>` di file `index.html`, kita akan membuat tiga *section*. Bagian *header*, *main content*, dan *footer* yang akan memiliki tidak panel *unordered list*:

```
      <header>
            <a href="#">Libertians > *</a>
        </header>

        <div class="container">
            <div id="content">
                <h1>Down with the state</h1>
                <p>Abandon the left vs. right paradigm and adopt new ideals, where consistency and logic reign supreme.</p>
            </div>
            <img src="logo.png" />
        </div>

        <footer>
            <ul>
                <li>
                    <span>But what about the roads?</span>
                    You just don't understand economics, like supply and demand. Don't worry kiddo, where there's a demand there will be a supply; we'll all have our roads.
                </li>
                <li>
                    <span>Is taxation theft?</span>
                    If I came to your house with some heavily armed buddies, demanded that you and your neighbors give me a percentage of your income, in return for some crappy monopolized services that you didn't ask for, would you consider that theft?
                </li>
                <li>
                    <span>So, what you're saying is...?</span>
                    Libertarians want to live in a world where gay couples can protect their poppy fields with fully automatic weapons.

A world where voluntaryism and property rights are treated with the highest respect.
                </li>

                <li> 
                <li> 
                <li> 
            </ul>
        </footer>
```

Berikut hasilnya:

![](https://static.cdn-cdpl.com/source/998b78e349061b4971c0a2b0e8d6be41/Screenshot-2017-12-4_CSS_Grid_Tutorial.png)

## Percantik dengan CSS

Agar nampak sedikit lebih indah, mari kita tambahkan beberapa properti CSS ke kode HTML yang sudah kita tulis. Tambahkan konten berikut ke file `index.css`:

```
body {
    font-family: 'Source Sans Pro';
    background:red;
    margin:0;
    color:white;
}

a {
    text-decoration:none;
    color:red;
    font-size:1.8em;
    font-weight:700;
}
img { 
    width:150px;
}
header {
    background:#FFFFFF;
    padding: 1em;
}

.container {
    padding: 4em 1em;
}

footer {
    background:#571212;
}

ul {
    margin:0;padding:0;
}
ul li {
    padding: 2em;
    color:#E98A8A;
}
ul li span {
    display:block;
    font-size:1.4em;
    margin-bottom:1em;
    color: white;
}

```

Kode di atas hanyalah kode CSS biasa yang sudah sering kita gunakan. Sekarang sisanya hanya menentukan properti CSS grid untuk layout. 

![](https://static.cdn-cdpl.com/source/998b78e349061b4971c0a2b0e8d6be41/Screenshot-2017-12-4_CSS_Grid_Tutorial(1).png)

## Menentukan CSS Grid

Untuk membuat layout menggunakan CSS Grid, kita menambahkan `display: grid` di sebuah elemen. Dimana elemen apa kita menambahkannya? 

![](https://static.cdn-cdpl.com/source/998b78e349061b4971c0a2b0e8d6be41/grid2-1507503953598.png)

Grid di bagian atas terdapat 1 baris/*row* dan 2 kolom/*column*. Grid di bagian bawah (yang ada 6 `<li>`) memiliki 2 baris dan 3 kolom. 

Tambahkan pengaturan CSS Grid untuk konten bagian atas berikut ke file `index.css`:

```
.container {
    display:grid;
    grid-template-columns: 66% auto;
    padding: 4em 1em;
}
```

Properti `grid-template-columns` mengatur jumlah kolom yang akan dibuat dengan mendefinisikan sebuah nilai yang dipisahkan oleh spasi. Artinya di sini kita akan memberikan kolom pertama jatah lebar 66% dan kolom setelahnya sisa lebar yang ada. 

Selanjutnya mari kita tambahkan properti css untuk konten bagian bawah:

```
ul {
    display:grid;
    list-style-type:none;
    margin:0;padding:0;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(2, auto);
}
```

Disini kita menggunakan `repeat()`, yang merupakan cara cepat menuliskan `grid-template-columns: auto auto auto`. Kode di atas artinya kita ingin membuat tiga kolom dengan lebar sama rata. 

Untuk `grid-template-rows` artinya kita ingin membuat dua baris dengan tinggi yang sama rata (sama seperti kolom). 

Bagaimana jika kita ingin membuat logo berada di tengah jatah kolomnya? Elemen yang ada di kolom atau baris dalam di atur posisinya dengan mudah. Salah satu properti untuk mengatur posisi agar suatu elemen berada di tengah misalnya, kita cukup menambahkan `justify-self`: 

```
img { 
    width:150px;
    justify-self:center;
}
```

Sampai di sini kita sudah mencapai tujuan awal. 

![](https://static.cdn-cdpl.com/source/998b78e349061b4971c0a2b0e8d6be41/Screenshot-2017-12-4_CSS_Grid_Tutorial(2).png)


## CSS Grid Bersarang dan Template Area

Kita juga bisa membuat CSS Grid bersarang (ada Grid di dalam Grid). Mari kita lakukan dengan membuat elemen body menjadi Grid. 

```
body {
    font-family: 'Source Sans Pro';
    background:red;
    margin:0;
    color:white;
    display:grid;
    grid-template-columns: auto;
    grid-template-rows: auto 60% 40%;
    grid-template-areas: 
    "header"
    "body"
    "footer";
}
```

Baik, apa yang sudah kita lakukan? Kita memiliki 1 kolom yang lebarnya diatur menjadi *auto* dan terdapat tiga baris (satu untuk *header*, *konten* dan *footer*). 

`grid-template-areas` memungkinkan kita untuk menggunakan beberapa area grid dan memberikan namanya. 

Disini kita menentukan elemen `<header>`, `<div>` dengan kelas `.container`, dan `<footer>` menjadi bagian dari Grid utama dan memberikan nama area, kita harus menambah kode CSS menjadi sebagai berikut:

```
header {
    grid-area: header;
    /* Properti lain tidak ditulis agar lebih singkat */
}

.container {
    grid-area: body;
    /* Properti lain tidak ditulis agar lebih singkat */
}

footer {
    grid-area: footer;
    /* Properti lain tidak ditulis agar lebih singkat */
}
```

Jika di refresh halaman tadi, hasilnya masih belum terlihat karena kelebihan *template area* adalah saat kita menggunakan *media queries*.

### Responsive CSS Grid

Bagaimana jika kita ingin menukar posisi footer dengan body saat dibuka di layar dengan ukuran kecil? 

Mudah sekali!

```
@media only screen and (max-width: 500px) {
    
    body {
        grid-template-areas: 
            "header"
            "footer"
            "body";
    }

}
```

![](https://static.cdn-cdpl.com/source/998b78e349061b4971c0a2b0e8d6be41/Screenshot-2017-12-4_CSS_Grid_Tutorial(3).png)

Keresponsifan di atas tidak akan dapat dicapai dengan CSS murni sebelum ada Grid. 

Jika kita perhatikan, dilayar yang kecil footer sudah bertukar posisi dengan body. namun tiga kolom membuat konten footer menjadi sulit dibaca. Sekarang kita atur agar container dan footer hanya menggunakan 1 kolom di layar yang kecil sehingga konten menjadi lebih mudah di baca:

```
@media only screen and (max-width: 500px) {
    
    body {
        grid-template-areas: 
            "header"
            "footer"
            "body";
    }

    ul, .container {
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    .container {
        text-align:center;
    }
    
}
```

![](https://static.cdn-cdpl.com/source/998b78e349061b4971c0a2b0e8d6be41/Screenshot-2017-12-4_CSS_Grid_Tutorial(4).png)

Wuih, keren abis kan? Dengan memanfaatkan CSS Grid, kita dapat membuat layout dengan relatif lebih mudah.

## Penutup

Tutorial ini hanya memberikan gambaran apa yang dapat dibuat menggunakan CSS grid. Ada lebih banyak properti lain yang memungkinkan kita membuat berbagai macam layout dengan lebih asik dibanding sebelumnya. 

Semoga artikel ini bermanfaat. 

Berikut ini versi tutorial videonya (dalam Bahasa Inggris):

<iframe width="560" height="315" src="https://www.youtube.com/embed/xXKp3b1YL-U" frameborder="0" allowfullscreen></iframe>

*Diterjemahkan dari [Learn the CSS Grid by Example (The New CSS Grid Tutorial)](https://coursetro.com/posts/code/93/Learn-the-CSS-Grid-by-Example-(The-New-CSS-Grid-Tutorial)) oleh Gary Simon dan dipublikasikan di Coursetro*

Mudah Mengatur Layout HTML dengan CSS Grid

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Mudah Mengatur Layout HTML dengan CSS Grid

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Hour of Code, Belajar Coding Satu Jam

Jangan Lewatkan, Jogja Geek Job Fair #2 Digelar Lagi Minggu Ini

Wawancara Bersama Luri Darmawan Pembuat AKSI IDE

io.js, Framework JavaScript yang Kompatibel dengan Node.js dan npm

CodeCombat, Belajar Coding Sambil Bermain Game

Mengenal Meteor, Framework JavaScript yang Sedang Naik Daun