LAYOUT DENGAN GRID

Membuat layout website yang responsif dapat menjadi tantangan untuk beberapa pengembang. Salah satu teknik yang populer dan dapat digunakan untuk membantu proses ini adalah dengan menggunakan sistem Grid CSS. Secara ringkas, sistem Grid CSS memungkinkan kamu untuk membuat layout yang kompleks dan fleksibel dengan lebih mudah dan terorganisir.

Mengenal Grid CSS

Grid CSS adalah teknik layout dalam CSS yang membuat elemen-elemen di halaman web dapat diatur dalam bentuk grid seperti baris dan kolom. Grid CSS sudah sangat mendukung pengembangan website yang responsif dan fleksibel.

<div style="display: grid;">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
</div>

Pada contoh di atas, kita menjadikan elemen div pusat sebagai grid dengan menambahkan display: grid;, dan elemen div anak sebagai item grid.

Mengatur Kolom dan Baris

Anda dapat mengatur jumlah dan ukuran kolom dan baris dalam Grid CSS.

.container {
    display: grid;
    grid-template-columns: auto auto auto; /*membuat tiga kolom dengan lebar otomatis*/
    grid-template-rows: 80px auto 80px; /*membuat tiga baris dengan tinggi 80px, otomatis, dan 80px */
}

grid-template-columns dan grid-template-rows

grid-template-columns dan grid-template-rows digunakan untuk mendefinisikan kolom dan baris dari grid, dengan nilai yang menggambarkan lebar dan tinggi setiap kolom dan baris. Nilai auto digunakan untuk mengatur lebar atau tinggi menjadi sebanding dengan konten dalam elemen tersebut.

Menggunakan Grid Gap

Grid gap dapat digunakan untuk menambahkan jarak antara kolom dan baris di dalam grid.

.container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 80px auto 80px;
    grid-gap: 10px;
}

Dalam contoh di atas, grid gap menambahkan jarak 10px antara setiap kolom dan baris dalam grid.

Penempatan Item Grid

Setelah grid sudah dibuat, kamu dapat mulai menempatkan item grid ke dalam baris atau kolom yang diinginkan.

.item1 {
    grid-column: 1 / 3;  /* item akan memulai dari kolom 1 dan berakhir di kolom 3 */
    grid-row: 2;         /* item akan ditempatkan di baris 2 */
}

Menggunakan Grid CSS bisa sangat membantu dalam membuat layout yang responsif dan fleksibel. Jangan ragu untuk bereksperimen dan mencoba berbagai pengaturan untuk menciptakan layout yang paling sesuai dengan kebutuhan website kamu.