Belajar CSS Bagian 11: Fungsi dan Contoh Grid Layout

Setelah sebelumnya kita belajar tentang CSS Variables pada sesi belajar CSS bagian 10, dalam artikel ini kami akan membahas tentang Grid Layout. Lalu, apa itu Grid Layout dan fungsinya pada CSS? Simak informasi berikut ini.

Apa itu Grid Layout?

Grid Layout adalah sistem tata letak dua dimensi yang digunakan untuk membuat struktur halaman web yang responsif dan fleksibel. Dengan Grid Layout, elemen dalam sebuah kontainer dapat disusun dalam bentuk baris dan kolom secara mudah, sehingga menghasilkan tata letak yang lebih teratur dan simetris.

Selain itu, CSS Grid akan memberikan kebebasan dan kemudahan kepada desainer website untuk mengatur elemen, baik itu baris dan kolom agar terlihat responsive di semua perangkat.

Fungsi CSS Grid

Berikut adalah beberapa fungsi yang dapat diimplementasikan pada CSS grid:

• Mengatur Baris dan Kolom: CSS Grid dapat mempermudah dalam mengatur pembuatan tata letak yang dinamis dalam bentuk baris dan kolom.
• Mengatur Ukuran dan Posisi Elemen: CSS Grid dapat mengatur ukuran elemen grid. Contoh properti yang digunakan yaitu seperti grid-column, grid-row, grid-template-columns, dan grid-template-rows.
• Mengatur Tata Letak Responsif: CSS Grid dapat mengatur untuk membuat desain website yang responsif dan sesuai dengan ukuran layar. Contoh properti yang digunakan yaitu seperti grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
• Mengatur Jarak Antar Elemen (Gap): CSS Grid dapat mengatur jarak antar elemen tanpa menggunakan padding atau margin. Properti yang digunakan yaitu gap, row-gap, dan column-gap.

Dasar Penggunaan CSS Grid

Selanjutnya, kita akan belajar CSS Grid Layout pada website. Namun, kami berharap Anda memahami terlebih dahulu dasar-dasar penggunaan Grid Layout pada CSS, yang penjelasannya dapat Anda pelajari sebagai berikut:

Display Property

Untuk membuat elemen HTML sebagai grid, Anda harus mengatur property display menjadi grid atau inline-grid pada elemen html atau kontainer html Anda.

Grid Columns

Grid Column merupakan layout tampilan grid secara vertikal. Bayangkan baris vertikal yang membagi tata letak menjadi beberapa bagian dari kiri ke kanan.

Kolom-kolom ini bisa diatur lebarnya menggunakan properti grid-template-columns, yang menerima nilai-nilai seperti ukuran absolut (px, em), persentase (%), atau unit fraction (fr).

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

Kode di atas akan membuat tiga kolom dengan proporsi 1:2:1.

Grid Rows

Grid Rows merupakan layout tampilan grid secara horizontal. Kita bisa mengatur tingginya dengan properti grid-template-rows, menggunakan ukuran absolut, persentase, atau fraction untuk menetapkan proporsi tinggi baris.

.container {
display: grid;
grid-template-rows: 100px 200px 100px;
}

Kode diatas membuat tiga baris dengan tinggi masing-masing 100px, 200px, dan 100px.

Grid Gaps

Grid Gaps merupakan layout tampilan grid untuk mengatur jarak antar kolom dan baris lain. Properti yang digunakan yaitu column-gap, row-gap, atau gap (gabungan dari column-gap dan row-gap).

Grid Lines

Dengan Grid Lines dapat mengatur jumlah ukuran elemen sesuai dengan jumlah kolom atau baris. Properti yang digunakan untuk jumlah kolom yaitu grid-column-start dan grid-column-end, sedangkan properti yang digunakan untuk jumlah row yaitu grid-row-start dan grid-row-end.

Grid Container

Untuk membuat elemen HTML sebagai container grid, Anda harus mengatur property display menjadi grid atau inline-grid pada element html Anda. Selanjutnya Anda dapat menambahkan property lain seperti grid-template-columns, grid-template-rows. Berikut contoh scriptnya :

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

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

Grid Item

Secara default dalam sebuah kontainer grid memiliki 1 kolom dan 1 baris, Dengan Grid Item Anda dapat mengatur elemen dan beberapa elemen di dalam grid. Properti yang digunakan yaitu grid-column (gabungan dari grid-column-start dan grid-column-end) dan grid-row (gabungan dari grid-row-start dan grid-row-end).

Berikut contoh scriptnya :

.item1 {
  grid-column: 1 / 5;
}

Contoh Implementasi Grid Layout

Untuk membuat layout Grid, Anda harus membuat sebuah container html dengan property display menggunakan grid. Berikut contoh skripnya:

<div class="grid-container">
</div>

kemudian untuk script CSS-nya yaitu :

.grid-container {
  display: grid;
}

Selanjutnya, tambahkan item didalam kontainer yang dibuat seperti di atas, berikut contoh script htmlnya.

<div class="grid-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>

Kemudian, tambahkan script CSS untuk mengatur gird layout pada kontainer html tersebut, berikut contoh script cssnya :

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: 100px 100px;
    background-color: blueviolet;
    gap: 10px;
    padding: 10px;
}
.item {
    text-align: center;
    background-color: aqua;
    padding: 10px;
    font-size: 28px;
}

dan untuk script lengkapnya seperti berikut :

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: 100px 100px;
    background-color: blueviolet;
    gap: 10px;
    padding: 10px;
}
.item {
    text-align: center;
    background-color: aqua;
    padding: 10px;
    font-size: 28px;
}
</style>
</head>

<body>
<div class="grid-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>
</body>
</html>

Kemudian jika di testing di browser untuk tampilan layar lebar (laptop / dekstop pc), akan menampilkan screenshoot seperti berikut :

Sedangkan jika di testng di browser untuk tampilan layan kecil (mobile / smartphone), akan menampilkan screenshoot seperti berikut :

Dari screenshoot diatas, dengan menggunakan CSS Grid Layout posisi layout html akan mengikuti sesuai dengan ukuran layar / perangkat pengguna.

Kesimpulan

Dengan memahami fungsi dasar CSS Grid, Anda dapat memanfaatkan CSS Grid Layout untuk menciptakan desain web yang modern, responsive, dan mudah disesuaikan sesuai kebutuhan halaman atau perangkat pengguna.

Demikian artikel belajar CSS bagian 11 tetang pengertian dan fungsi CSS Grid Layout. Ikuti terus artikel belajar CSS bagian selanjutnya, yang akan kami publikasikan bulan depan. Semoga bermanfaat.