Membuat Responsive Layout Tanpa Media Query di CSS

Membuat desain website yang responsif adalah sebuah keharusan saat ingin menjadi frontend web. Biasanya, kita menggunakan media query untuk memastikan tampilan website tetap proporsional di berbagai ukuran layar. Namun, tahukah kamu bahwa ada cara membuat responsive layout tanpa perlu menggunakan media query? Artikel ini akan membahas cara tersebut dengan pendekatan CSS murni.

Mengapa Tanpa Media Query?

Media query sering digunakan untuk menentukan aturan styling berdasarkan ukuran layar. Contohnya:

@media screen and (min-width: 992px) {
  .item {
    width: 240px;
  }
}

@media screen and (min-width: 480px) {
  .item {
    width: 120px;
  }
}

Namun, pendekatan ini bisa menjadi rumit jika kita harus menangani banyak breakpoint. Solusinya? Gunakan CSS Flexbox dengan properti seperti flex-grow, flex-wrap, dan flex-basis untuk menciptakan desain yang responsif tanpa memerlukan media query.

Membuat Responsive Layout dengan Flexbox

Berikut adalah langkah-langkah untuk menciptakan layout responsif:

1. Struktur HTML

Kita mulai dengan membuat struktur HTML sederhana seperti ini:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

2. Styling Dasar dengan CSS

Selanjutnya, tambahkan CSS untuk membuat item dalam container tampil sejajar:

.container {
  display: flex;
}

.item {
  background-color: brown;
  width: 250px;
  height: 250px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

Hasilnya adalah empat item yang tersusun sejajar secara horizontal dengan ukuran tetap 250px.

Membuat Layout Lebih Fleksibel

Agar layout lebih responsif dan dapat menyesuaikan ruang kosong dalam container, gunakan properti flex-grow. Tambahkan properti ini ke elemen .item:

.item {
  flex-grow: 1;
}

Apa yang terjadi?

• Properti flex-grow: 1 memungkinkan setiap item memperbesar ukurannya untuk mengisi ruang kosong dalam container.
• Semua item akan berbagi ruang kosong secara proporsional.

Menyesuaikan Tampilan pada Layar Lebar dan Sempit

Bagaimana jika kita ingin item turun ke bawah saat layar mengecil, tanpa menjadi terlalu kecil? Di sinilah flex-wrap dan flex-basis berperan.

Tambahkan properti berikut ke container dan item:

.container {
  flex-wrap: wrap;
}

.item {
  flex-basis: 200px;
}

Penjelasan:

1. flex-wrap: wrap: Membuat item turun ke baris berikutnya jika tidak cukup ruang pada satu baris.
2. flex-basis: 200px: Menentukan ukuran awal setiap item sebelum ruang kosong diperhitungkan. Saat ukuran layar mengecil hingga item mencapai 200px, elemen akan turun ke baris berikutnya.

Prioritas flex-basis vs. width

Mengapa kita menggunakan flex-basis alih-alih width? Karena flex-basis memiliki prioritas lebih tinggi dalam sistem flexbox. Bahkan jika kamu menetapkan width ke nilai tertentu, flex-basis akan tetap menjadi patokan utama untuk menentukan ukuran awal elemen.

Baca juga: Menempatkan Element Di Posisi Tengah Menggunakan CSS

Kesimpulan

Dengan menggunakan properti seperti flex-grow, flex-wrap, dan flex-basis, kamu dapat menciptakan layout yang responsif tanpa memerlukan media query. Pendekatan ini membuat kode lebih sederhana dan mudah di-maintain, terutama untuk desain yang fleksibel di berbagai perangkat.

Berikut adalah contoh lengkap CSS yang sudah dibahas:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: brown;
  flex-basis: 200px;
  flex-grow: 1;
  height: 250px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

Dengan pendekatan ini, kamu tidak hanya menghemat waktu dalam membuat desain responsif, tetapi juga mengurangi kompleksitas kode CSS. Selamat mencoba! 😊