Buka kekuatan ukuran trek CSS Grid dengan kata kunci intrinsik dan ekstrinsik. Pelajari cara membuat tata letak yang fleksibel dan responsif untuk beragam konten dan ukuran layar.
Ukuran Trek CSS Grid: Menguasai Kontrol Intrinsik dan Ekstrinsik
CSS Grid Layout adalah alat yang ampuh untuk membuat tata letak web yang kompleks dan responsif. Salah satu kekuatan utamanya terletak pada kemampuan ukuran trek yang fleksibel, memungkinkan Anda mengontrol ukuran baris dan kolom dengan presisi. Memahami berbagai kata kunci dan fungsi ukuran trek sangat penting untuk membangun tata letak yang dapat disesuaikan dan dipelihara. Artikel ini membahas konsep lanjutan ukuran intrinsik dan ekstrinsik di CSS Grid, mengeksplorasi bagaimana keduanya memungkinkan Anda membuat tata letak yang beradaptasi dengan baik terhadap berbagai konten dan ukuran layar.
Memahami Trek Grid dan Ukuran
Sebelum masuk ke detail ukuran intrinsik dan ekstrinsik, mari kita ulas kembali konsep dasar trek CSS Grid.
Apa itu Trek Grid?
Trek grid adalah baris dan kolom dari tata letak grid. Mereka mendefinisikan struktur tempat item-item grid ditempatkan. Ukuran trek ini secara langsung memengaruhi tata letak keseluruhan dan bagaimana konten didistribusikan di dalam grid.
Menentukan Ukuran Trek
Anda dapat mendefinisikan ukuran trek menggunakan properti grid-template-rows dan grid-template-columns. Properti ini menerima daftar nilai yang dipisahkan spasi, di mana setiap nilai mewakili ukuran trek yang sesuai. Sebagai contoh:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto auto;
}
Kode ini membuat grid dengan tiga kolom dan dua baris. Kolom pertama dan ketiga masing-masing mengambil 1 fraksi (fr) dari ruang yang tersedia, sedangkan kolom kedua mengambil 2 fraksi. Ukuran baris ditentukan secara otomatis berdasarkan kontennya.
Ukuran Intrinsik vs. Ekstrinsik
Inti dari ukuran trek grid tingkat lanjut terletak pada pemahaman perbedaan antara ukuran intrinsik dan ekstrinsik. Konsep-konsep ini menentukan bagaimana ukuran sebuah trek ditentukan berdasarkan kontennya dan ruang yang tersedia.
Ukuran Intrinsik: Didorong oleh Konten
Ukuran intrinsik berarti bahwa ukuran trek grid ditentukan oleh konten di dalam item-item grid yang ditempatkan di trek tersebut. Trek akan membesar atau mengecil untuk mengakomodasi konten, hingga batas tertentu. Kata kunci ukuran intrinsik meliputi:
auto: Nilai default. Ukuran trek ditentukan oleh kontribusi ukuran minimum terbesar dari item-item grid di trek tersebut. Dalam kebanyakan kasus, ini secara efektif berarti trek akan cukup besar untuk memuat semua konten tanpa meluap, tetapi dapat dipengaruhi oleh nilaimin-width/min-heightyang ditetapkan pada item grid.min-content: Trek diukur agar sesuai dengan ruang terkecil yang dibutuhkan konten tanpa meluap. Misalnya, teks akan melipat pada titik terkecil yang memungkinkan, bahkan jika itu mematahkan kata secara canggung.max-content: Trek diukur agar sesuai dengan ruang terbesar yang dibutuhkan konten tanpa meluap. Untuk teks, ini berarti akan mencoba menghindari pelipatan sebanyak mungkin, yang berpotensi menghasilkan trek yang sangat lebar atau tinggi.fit-content(length): Trek diukur ke nilai yang lebih kecil antaramax-contentdanlengthyang ditentukan. Ini memungkinkan Anda menetapkan ukuran maksimum untuk trek sambil tetap membiarkannya menyusut berdasarkan kontennya.
Contoh: Ukuran Intrinsik dengan min-content dan max-content
Pertimbangkan skenario dengan dua kolom. Kolom pertama diukur dengan min-content, dan yang kedua dengan max-content. Jika konten di kolom pertama adalah kata yang panjang, itu akan dipecah pada titik mana pun yang memungkinkan agar sesuai dengan ukuran konten minimum. Namun, kolom kedua akan membesar untuk mengakomodasi konten tanpa melipat.
.grid-container {
display: grid;
grid-template-columns: min-content max-content;
grid-gap: 10px;
}
.item1 {
grid-column: 1;
}
.item2 {
grid-column: 2;
}
<div class="grid-container">
<div class="item1">Supercalifragilisticexpialidocious</div>
<div class="item2">Short text</div>
</div>
Dalam contoh ini, kata "Supercalifragilisticexpialidocious" akan dipecah menjadi beberapa baris di kolom pertama, sementara "Short text" akan tetap dalam satu baris di kolom kedua. Ini menunjukkan bagaimana ukuran intrinsik beradaptasi dengan persyaratan ukuran inheren dari konten.
Contoh: Ukuran Intrinsik dengan fit-content()
Fungsi `fit-content()` berguna ketika Anda ingin sebuah trek berukuran sesuai konten, tetapi juga memiliki batas ukuran maksimum. Ini dapat digunakan untuk mencegah kolom atau baris menjadi terlalu besar, sambil tetap membiarkannya menyusut jika kontennya lebih kecil.
.grid-container {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
grid-gap: 10px;
}
Dalam contoh ini, kolom pertama akan membesar agar sesuai dengan kontennya, tetapi tidak akan melebihi lebar 200px. Kolom kedua akan mengambil sisa ruang yang ada. Ini berguna untuk membuat tata letak di mana Anda ingin sebuah kolom menjadi fleksibel, tetapi tidak memakan terlalu banyak ruang.
Ukuran Ekstrinsik: Didorong oleh Ruang
Ukuran ekstrinsik, di sisi lain, berarti bahwa ukuran trek grid ditentukan oleh faktor-faktor di luar konten, seperti ruang yang tersedia di wadah grid atau nilai ukuran yang tetap. Kata kunci ukuran ekstrinsik meliputi:
length: Nilai panjang tetap (misalnya,100px,2em,50vh). Trek akan berukuran tepat sebesar ini, terlepas dari kontennya.percentage: Persentase dari ukuran wadah grid (misalnya,50%). Trek akan mengambil persentase ini dari ruang yang tersedia.fr(unit fraksional): Mewakili sebagian kecil dari ruang yang tersedia di wadah grid setelah semua trek lain diukur. Ini adalah cara paling fleksibel untuk mendistribusikan ruang di antara trek.
Contoh: Ukuran Ekstrinsik dengan Unit fr
Unit fr sangat berharga untuk membuat tata letak responsif yang beradaptasi dengan ukuran layar yang berbeda. Dengan menetapkan unit fraksional ke trek, Anda memastikan bahwa mereka secara proporsional berbagi ruang yang tersedia.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
}
Dalam contoh ini, wadah grid memiliki dua kolom. Kolom pertama mengambil 1 fraksi dari ruang yang tersedia, sedangkan kolom kedua mengambil 2 fraksi. Jika wadah grid lebarnya 600px, kolom pertama akan selebar 200px, dan kolom kedua akan selebar 400px (dikurangi celah grid). Ini memastikan bahwa kolom selalu mempertahankan hubungan proporsionalnya, terlepas dari ukuran layar.
Contoh: Ukuran Ekstrinsik dengan persentase dan panjang tetap
.grid-container {
display: grid;
grid-template-columns: 200px 50% 1fr;
grid-gap: 10px;
}
Dalam contoh ini, kolom pertama diatur ke lebar tetap `200px`. Kolom kedua akan mengambil 50% dari lebar wadah grid. Terakhir, kolom ketiga menggunakan unit `1fr`, sehingga akan mengambil sisa ruang yang ada setelah dua kolom pertama diukur.
Menggabungkan Ukuran Intrinsik dan Ekstrinsik: minmax()
Fungsi minmax() memungkinkan Anda untuk menggabungkan ukuran intrinsik dan ekstrinsik, memberikan kontrol yang lebih besar atas ukuran trek. Ini mendefinisikan rentang ukuran yang dapat diterima untuk sebuah trek, menentukan nilai minimum dan maksimum.
minmax(min, max)
min: Ukuran minimum trek. Ini bisa berupa nilai ukuran trek yang valid, termasuk kata kunci intrinsik (auto,min-content,max-content) atau nilai ekstrinsik (length,percentage,fr).max: Ukuran maksimum trek. Ini juga bisa berupa nilai ukuran trek yang valid. Jika `max` lebih kecil dari `min`, maka `max` diabaikan, dan `min` yang digunakan.
Contoh: Menggunakan minmax() untuk Kolom Responsif
Kasus penggunaan umum untuk minmax() adalah membuat kolom responsif yang memiliki lebar minimum tetapi dapat membesar untuk mengisi ruang yang tersedia.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
Di sini, repeat(auto-fit, minmax(200px, 1fr)) membuat kolom sebanyak mungkin yang lebarnya setidaknya 200px tetapi dapat membesar untuk mengisi sisa ruang. Kata kunci auto-fit memastikan bahwa kolom kosong diciutkan, menciptakan tata letak yang fleksibel dan responsif.
Contoh: Menggabungkan minmax() dengan ukuran intrinsik
.grid-container {
display: grid;
grid-template-columns: minmax(min-content, 300px) 1fr;
grid-gap: 10px;
}
Dalam contoh ini, kolom pertama akan setidaknya selebar ukuran konten minimumnya, tetapi tidak akan melebihi `300px`. Kolom kedua akan mengambil sisa ruang yang ada.
Aplikasi Praktis dan Praktik Terbaik
Memahami ukuran intrinsik dan ekstrinsik sangat penting untuk menciptakan tata letak yang kuat dan dapat disesuaikan. Berikut adalah beberapa aplikasi praktis dan praktik terbaik yang perlu diingat:
- Navigasi Responsif: Gunakan
minmax()untuk membuat item navigasi yang memiliki lebar minimum tetapi dapat membesar untuk mengisi ruang yang tersedia di bilah navigasi. - Tata Letak Kartu yang Fleksibel: Gunakan
repeat(auto-fit, minmax())untuk membuat tata letak kartu yang secara otomatis menyesuaikan dengan ukuran layar yang berbeda, memastikan kartu melipat dengan baik di layar yang lebih kecil. - Bilah Sisi yang Sadar Konten: Gunakan
min-contentataumax-contentuntuk mengukur bilah sisi berdasarkan kontennya, memungkinkan mereka untuk membesar atau mengecil sesuai kebutuhan. - Hindari Lebar Tetap: Minimalkan penggunaan lebar tetap (
px) demi unit relatif (%,fr,em) untuk menciptakan tata letak yang beradaptasi dengan ukuran layar dan preferensi pengguna yang berbeda. - Uji Secara Menyeluruh: Selalu uji tata letak grid Anda di berbagai perangkat dan ukuran layar untuk memastikan bahwa mereka dirender dengan benar dan memberikan pengalaman pengguna yang konsisten.
Teknik Ukuran Grid Tingkat Lanjut
Selain kata kunci dan fungsi dasar, CSS Grid menawarkan teknik yang lebih canggih untuk menyempurnakan ukuran trek.
Fungsi repeat()
Fungsi repeat() menyederhanakan pembuatan beberapa trek dengan ukuran yang sama. Fungsi ini mengambil dua argumen: jumlah pengulangan dan ukuran trek.
repeat(number, track-size)
Sebagai contoh:
grid-template-columns: repeat(3, 1fr);
Ini setara dengan:
grid-template-columns: 1fr 1fr 1fr;
Fungsi repeat() juga dapat digunakan dengan kata kunci auto-fit dan auto-fill untuk membuat tata letak grid responsif yang secara otomatis menyesuaikan dengan ruang yang tersedia.
Kata Kunci auto-fit dan auto-fill
Kata kunci ini digunakan dengan fungsi repeat() untuk membuat grid responsif yang beradaptasi dengan jumlah item dalam grid dan ruang yang tersedia. Perbedaan utama di antara keduanya terletak pada bagaimana mereka menangani trek kosong.
auto-fit: Jika semua trek kosong, maka trek akan diciutkan menjadi lebar 0.auto-fill: Jika semua trek kosong, maka trek akan mempertahankan ukurannya.
Contoh: Menggunakan auto-fit untuk Kolom Responsif
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
Dalam contoh ini, grid akan membuat kolom sebanyak mungkin yang lebarnya setidaknya 200px tetapi dapat membesar untuk mengisi sisa ruang. Jika tidak ada cukup item untuk mengisi semua kolom, kolom yang kosong akan diciutkan menjadi lebar 0.
Pertimbangan untuk Internasionalisasi (i18n) dan Lokalisasi (l10n)
Saat merancang tata letak untuk audiens global, penting untuk mempertimbangkan dampak dari berbagai bahasa dan arah penulisan. Panjang teks dapat bervariasi secara signifikan antar bahasa, yang berpotensi memengaruhi tata letak jika ukuran trek tidak dikonfigurasi dengan benar. Berikut adalah beberapa tips untuk merancang tata letak yang diinternasionalkan:
- Gunakan Unit Relatif: Utamakan unit relatif seperti
em,rem, dan persentase daripada unit tetap seperti piksel untuk memungkinkan teks diskalakan sesuai dengan preferensi ukuran font pengguna. - Ukuran Intrinsik: Manfaatkan kata kunci ukuran intrinsik seperti
min-content,max-content, danfit-content()untuk memastikan bahwa trek beradaptasi dengan ukuran konten, terlepas dari bahasanya. - Properti Logis: Gunakan properti logis seperti
inline-startdaninline-endalih-alih properti fisik sepertileftdanrightuntuk mendukung bahasa dari kiri-ke-kanan (LTR) dan kanan-ke-kiri (RTL). - Pengujian: Uji tata letak Anda dengan berbagai bahasa dan arah penulisan untuk mengidentifikasi dan mengatasi masalah potensial. Simulasikan string yang lebih panjang, yang mungkin ditemukan dalam bahasa yang berbeda.
Kesimpulan
Ukuran trek CSS Grid adalah alat yang kuat dan serbaguna untuk membuat tata letak web yang responsif dan dapat disesuaikan. Dengan menguasai konsep ukuran intrinsik dan ekstrinsik, memahami fungsi minmax(), dan memanfaatkan fungsi repeat(), Anda dapat membangun tata letak yang beradaptasi dengan baik terhadap berbagai konten dan ukuran layar. Ingatlah untuk mempertimbangkan dampak internasionalisasi dan lokalisasi saat merancang untuk audiens global.
Bereksperimenlah dengan berbagai teknik ukuran trek dan jelajahi kemungkinan tak terbatas dari CSS Grid. Dengan latihan dan pemahaman yang kuat tentang konsep-konsep ini, Anda akan diperlengkapi dengan baik untuk membuat tata letak web yang canggih dan ramah pengguna untuk proyek apa pun.