Masalah Dengan Persentase di CSS

Belum lama ini, kami sepenuhnya bergantung pada penggunaan persentase untuk lebar dan tinggi. Menggunakan persentase berarti tata letak dan elemen Anda dapat mengasumsikan tinggi dan lebar berdasarkan viewport. Namun seiring berkembangnya CSS modern, kita telah sampai pada titik di mana mungkin merupakan ide bagus untuk menghindari penggunaan persentase.

Pelajari tentang masalah umum yang akan Anda temui saat menggunakan persentase. Cari tahu juga tentang teknik CSS modern untuk digunakan sebagai pengganti persentase. Teknik-teknik ini akan memberi Anda hasil yang sama dengan persentase tanpa ada kekurangannya.

Contoh Grid Sangat Sederhana

Untuk mendemonstrasikan masalah dengan unit persentase, pertimbangkan tata letak HTML ini:

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

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

Elemen luar adalah dasar div elemen kontainer dengan dua div anak-anak. Setiap anak memiliki a grid-item kelas. Untuk mengubah wadah menjadi kisi dengan dua kolom (dua kotak), kita perlu menerapkan kode CSS berikut:

 body {
  background-color: black;
  align-items: center;
  justify-content: flex-start;
}
.my-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 3rem;
  border: 2px solid gold;
  padding: 1rem;
}
.grid-item {
  border: 3px solid gold;
  padding: 10rem 0;
  background: blue;
}
 

Jadi tiap kolom (grid item) memiliki background warna emas. Di kelas induk wadah, kami menetapkan kisi-templat-kolom hingga 50% untuk setiap kolom. Akibatnya, kedua kotak menempati 50% dari total lebar elemen penampung.

Inilah hasilnya:

Tapi ada masalah dengan keselarasan ini. Pertama, jika Anda memutuskan untuk menambahkan a celah ke induk grid, anak bisa meluap keluar dari samping. Misalnya, jika Anda menambahkan celah: 3px ke .my-grid blokir di CSS, berikut tampilan tata letaknya:

Seperti yang Anda lihat pada gambar di atas, kotak kanan telah keluar dari wadah. Terkadang Anda mungkin tidak menyadarinya karena celah Anda cukup kecil, sehingga menimbulkan masalah penyelarasan yang aneh. Tetapi jika Anda memiliki celah yang lebih besar, tumpang tindih menjadi sangat jelas.

Setiap kali Anda menggunakan persentase dan menambahkan margin atau celah, ada kemungkinan besar mengalami kesalahan semacam ini. Tetapi mengapa kesalahan itu terjadi?

Itu karena setiap kolom adalah 50% dari induknya. Dalam contoh di atas, kita memiliki 50% ditambah 50% ditambah celah (3px), yang mendorong kotak keluar dari wadah.

Perhatikan bahwa kesalahan ini tidak hanya terjadi pada 50-50. Anda dapat mengatur kolom pertama menjadi 75%, kolom kedua menjadi 25% dan kesalahan akan tetap terjadi. Inilah sebabnya mengapa Anda perlu menggunakan solusi berikut lebih sering.

Solusi Dengan Nilai Pecahan

Solusinya adalah dengan menggunakan nilai pecahan, bukan persentase. Jadi alih-alih mengatur kolom pertama menjadi 75% dan yang kedua menjadi 50%, Anda dapat mengatur kolom pertama menjadi 3fr dan kolom kedua menjadi 1fr:

 grid-template-columns: 3fr 1fr 

Ini mempertahankan rasio yang sama dengan contoh pertama. Tapi keuntungan menggunakan fr unit adalah bahwa mereka menggunakan sebagian kecil dari ruang yang tersedia. Dalam hal ini, kolom pertama akan mengambil tiga bagian ruang sedangkan kolom kedua akan mengambil satu bagian, tidak termasuk celahnya.

Keuntungan lain menggunakan frs dibandingkan persentase—atau satuan absolut lainnya, seperti px atau em—adalah Anda dapat menggabungkannya dengan nilai tetap. Berikut contohnya:

grid-template-columns: 1fr 10rem;

Dengan kode di atas, Anda akan mendapatkan nilai tetap yang tidak pernah berubah berapa pun ukuran layarnya. Ini karena kolom di sebelah kanan akan selalu tetap pada 10rem sedangkan kolom di sebelah kiri akan menempati ruang yang tersisa (dikurangi celah).

Terkadang Anda bisa menggunakan persentase. Namun Anda harus menggunakannya dengan cara cerdas yang tetap bisa beradaptasi dengan situasi. Seringkali, ini berarti memasangkan mereka dengan fr nilai.

Contoh yang Lebih Realistis

Bayangkan Anda memiliki halaman yang terdiri dari area konten utama dan samping (untuk posting terkait). Area konten utama mengambil tiga fraksi layar sementara bagian samping mengambil ruang yang tersisa dikurangi celah:

 .container {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1.5rem;
}
.card {
  background-color: #5A5A5A;
  padding: 10px;
  margin-bottom: .5rem;
}
 

Inilah hasilnya:

Biasanya, Anda akan memindahkan sidebar (atau samping) ke bagian bawah (atau atas) halaman setelah layar menjadi terlalu sempit. Ini berarti menyiapkan kueri media yang menumpuk semuanya di atas satu sama lain saat viewport mencapai breakpoint tertentu.

Inilah cara Anda menumpuk semuanya ke dalam kolom saat viewport mencapai 55em atau kurang:

 @media(max-width: 55em) {
  .container {
    display: flex;
    flex-direction: column;
  }
}
 

Dan hasilnya akan terlihat seperti ini:

Sekarang Anda tidak ingin setiap kartu menjangkau lebar seluruh viewport. Melainkan kartu harus ditampilkan berdampingan. Cara terbaik untuk mencapai ini adalah dengan kisi-kisi CSS. Namun alih-alih menyetel nilai lebar tetap (seperti 50%) untuk kolom-templat-kisi, gunakan mengulang() berfungsi sebagai berikut:

 .sidebar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    align-content: start;
    gap: 2rem;
}
 

CSS ini menetapkan ukuran minimum 25rem dan ukuran maksimum 1fr. Pendekatan itu jauh lebih baik daripada menetapkan lebar tetap karena bergantung pada ukuran intrinsik. Dengan kata lain, itu memungkinkan browser mencari tahu berdasarkan parameter yang tersedia.

Sekarang ketika Anda mengurangi jendela browser ke lebar tertentu, kotak kisi secara otomatis menyesuaikan kembali menjadi dua kotak per baris.

Saat layar menjadi lebih kecil, layar turun menjadi satu kotak per baris. Jadi browser menumpuk semuanya di atas satu sama lain. Semua ini terjadi saat Anda mengubah ukuran jendela. Anda dapat menggunakan fitur browser seperti Chrome DevTools untuk memahami cara kerja CSS ini, dan bagaimana mengubah ukuran jendela mengubah tata letak.

Bagian terbaiknya adalah Anda tidak memerlukan kueri kontainer atau apa pun yang mewah untuk membuat elemen responsif. Cukup atur kisi dan gunakan min-maks() untuk menetapkan nilai pecahan alih-alih ukuran tetap.

Pelajari Lebih Lanjut Tentang Kotak CSS

Jika Anda ingin menjadi hebat dengan CSS, Anda harus memiliki pengetahuan yang mendalam tentang CSS Grids. Grid bisa sangat kuat bila digunakan dengan baik. Anda dapat mencapai hampir semua tata letak yang Anda inginkan menggunakan Grid. Ini menjadikannya alat yang sangat diperlukan dalam CSS.

Satu hal yang perlu diingat saat menggunakan kisi CSS adalah fokus pada daya tanggap. Anda juga dapat menggunakan pendekatan pecahan untuk menghindari kasus tabrakan antar elemen. Ingatlah untuk menguasai kisi-kisi CSS karena gaya tata letak akan sangat membantu Anda saat membuat situs web.