Belajar CSS: Mengatur Posisi Item Lebih Lanjut pada CSS Grid

Pada tutorial Belajar CSS: Dasar CSS Grid kita telah mempelajari cara mengatur posisi item dengan Grid Area. Kali ini, kita akan mempelajari cara mengatur posisi item yang lebih advanced pada CSS Grid.

Apa yang Akan Kita Pelajari?

Kita akan mempelajari hal berikut:

• grid-column-start
• grid-row-start
• grid-column-end
• grid-row-end.

Praktik Kali Ini

Kali ini kita akan membuat tampilan seperti ini:

Persiapan

Pertama kita menggunakan kode berikut:

HTML:

<div class="berita-container">
    <div class="berita">1</div>
    <div class="berita">2</div>
    <div class="berita lebar">3</div>
    <div class="berita besar">4</div>
</div>

CSS:

.berita-container {
    width: 100%;
}

.berita {
    background: gray;
    color: white;
    font-size: 24pt;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

Kode awal kita menghasilkan tampilan seperti ini:

Menambahkan Grid

Tambahkan CSS kode berikut untuk mengatur grid:

.berita-container {
    display: grid;
    gap: 5px;
    grid-auto-rows: 200px;
    grid-template-columns: repeat(4, 1fr);
}

Properti grid-auto-rows mengatur ukuran baris yang dibuat otomatis.Kode tersebut menghasilkan tampilan seperti ini:

Menentukan Posisi Awal Item

Untuk menentukan posisi awal item pada CSS Grid kita bisa menggunakan properti grid-column-start (untuk kolom) dan grid-row-start (untuk akhir). Properti tersebut dapat diisi dengan posisi Grid Line. Untuk melihat posisi Grid Line kita bisa menggunakan Firefox DevTool.

Tambahkan kode CSS berikut:

.besar {
    grid-column-start: 3;
}

.lebar {
    grid-row-start: 2;
}

Maka tampilannya menjadi seperti ini:

Menentukan Posisi Akhir Item

Untuk menentukan posisi akhir item pada CSS Grid kita bisa menggunakan properti grid-column-end (untuk kolom) dan grid-row-end (untuk akhir). Properti tersebut dapat diisi dengan posisi Grid Line. Kita juga dapat mengisinya dengan span <angka> agar item merentang sampai beberapa (<angka>) item. Tambahkan kode CSS berikut:

.besar {
    grid-column-end: 5;
    grid-row-end: span 2;
}

.lebar {
    grid-column-end: span 2;
}

Hasilnya seperti ini:

Kode Akhir

Kode CSS kita seperti ini:

.berita-container {
    width: 100%;
    display: grid;
    gap: 5px;
    grid-auto-rows: 200px;
    grid-template-columns: repeat(4, 1fr);
}

.berita {
    background: gray;
    color: white;
    font-size: 24pt;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.besar {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-end: span 2;
}

.lebar {
    grid-row-start: 2;
    grid-column-end: span 2;
}

Kalian juga dapat melihatnya hasilnya di CodePen ini.

Referensi

• A Complete Guide to Grid