Panduan untuk Unit Tata Letak Kotak CSS
Itu Modul Tata Letak Kotak CSS dikirim bersama unit CSS baru disebut fr satuan. Sesederhana mungkin, fr adalah singkatan kata “pecahan”. Unit baru memungkinkan untuk dengan cepat mengiris grid menjadi kolom atau baris proporsional. Akibatnya, penciptaan grid sepenuhnya responsif dan fleksibel menjadi sangat mudah.
Ketika unit pecahan diperkenalkan bersama-sama dengan modul Layout Grid, Anda dapat menggunakannya di browser apa pun itu mendukung kisi-kisi CSS. Jika Anda juga ingin mendukung browser yang lebih lama, inilah yang bagus CSS grid polyfill yang memungkinkan Anda untuk menggunakan tidak hanya fr unit tetapi fitur grid lainnya juga.
Penggunaan dasar
Pertama, mari kita lihat a grid dasar yang menggunakan unit pecahan. Tata letak di bawah ini membagi ruang menjadi tiga kolom dengan lebar sama dan dua baris yang sama tingginya.
HTML milik terbuat dari enam divs ditandai dengan .kotak kelas, di dalam a .pembungkus div.
1.2.3.4.5.6.
Untuk menggunakan modul Tata Letak Kotak, Anda perlu menambahkan tampilan: kotak; Properti CSS ke pembungkus. Itu grid-template-kolom properti menggunakan fr unit sebagai nilai; itu Rasio dari tiga kolom adalah 1: 1: 1.
Untuk baris kisi (grid-template-rows properti), saya tidak menggunakan fr Unit, karena hanya masuk akal jika pembungkus memiliki ketinggian tetap. Jika tidak, ini dapat memiliki hasil yang aneh pada beberapa perangkat, namun, meskipun demikian, fr satuan mempertahankan rasio (dan ini sangat besar).
Itu celah jaringan milik menambahkan kisi 10px di antara kotak. Jika Anda tidak ingin ada celah, hapus saja properti ini.
.wrapper display: grid; grid-template-kolom: 1fr 1fr 1fr; grid-template-rows: 200px 200px; celah jaringan: 10px; .box color: white; perataan teks: tengah; ukuran font: 30px; padding: 25px;
Perhatikan CSS di atas tidak mengandung beberapa gaya dasar seperti warna latar belakang. Kamu bisa temukan kode lengkap di demo di akhir artikel.
Ubah rasio
Tentu saja, Anda tidak bisa hanya menggunakan 1: 1: 1 tetapi rasio apa pun yang Anda inginkan. Di bawah, saya menggunakan 1: 2: 1 pecahan yang juga membagi ruang menjadi tiga kolom tetapi kolom tengah adalah selebar dua kali seperti dua lainnya.
Saya juga meningkatkan nilai celah jaringan sehingga Anda dapat melihat cara mengubah tata letak. Pada dasarnya, browser mengurangi celah kisi dari lebar viewport (dalam contoh ini, kesenjangan grid bertambah hingga 80px), dan mengiris sisanya sesuai dengan fraksi yang diberikan.
.wrapper display: grid; grid-template-kolom: 1fr 2fr 1fr; grid-template-rows: 200px 200px; celah jaringan: 40px;
Menggabungkan fr dengan unit CSS lainnya
Kamu bisa menggabungkan itu fr unit dengan unit CSS lainnya demikian juga. Misalnya, dalam contoh di bawah ini, saya menggunakan 60% 1fr 2fr rasio untuk jaringan saya.
Jadi, bagaimana cara kerjanya? Itu browser menetapkan 60% dari lebar viewport ke kolom pertama. Kemudian, ia membagi sisa ruang menjadi fraksi 1: 2.
Hal yang sama juga bisa ditulis sebagai 60% 13.33333% 26.66667%. Tapi terus terang, mengapa ada orang yang mau menggunakan format itu? Keuntungan besar dari unit pecahan adalah itu meningkatkan keterbacaan kode. Apalagi itu sepenuhnya akurat, karena format persentase masih bertambah hanya hingga 99,9999%.
.wrapper display: grid; grid-template-kolom: 60% 1fr 2fr; grid-template-rows: 200px 200px; celah jaringan: 10px;
Terlepas dari persentase, Anda juga dapat menggunakan unit CSS lainnya bersama dengan unit pecahan, misalnya pt, px, em, dan rem.
Tambahkan spasi dengan fr
Bagaimana jika Anda tidak ingin desain Anda berantakan dan tambahkan spasi ke kotak Anda? Unit fraksi juga memiliki solusi mudah untuk itu.
Seperti yang Anda lihat, kotak ini memiliki kolom kosong sementara itu masih mempertahankan keenam kotak. Untuk tata letak ini, kita perlu mengiris ruang menjadi empat kolom bukannya tiga. Jadi, kami menggunakan 1fr 1fr 1fr 1fr nilai untuk grid-template-kolom milik.
Kami menambahkan kolom kosong di dalam kotak-templat-bidang properti, menggunakan notasi titik. Pada dasarnya, properti ini memungkinkan Anda untuk referensi bernama bidang kisi. Dan, Anda dapat memberi nama area kisi dengan area grid properti yang perlu Anda gunakan secara terpisah untuk setiap area.
.wrapper display: grid; grid-template-kolom: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; celah jaringan: 10px; kotak-templat-area: "kotak-1 kotak-2. kotak-3" "kotak-4 kotak-5. kotak-6"; .box-1 kotak-area: box-1; .box-2 kotak-area: box-2; .box-3 kotak-area: box-3; .box-4 kotak-area: box-4; .box-5 kotak-area: kotak-5; .box-6 grid-area: box-6;
Area spasi putih tidak harus membentuk kolom, mereka bisa dimana saja di grid.
Itu ulangi() fungsi
Anda juga dapat menggunakan fr satuan bersama dengan ulangi() fungsi untuk sebuah sintaksis yang lebih sederhana. , ini tidak perlu jika Anda hanya memiliki kotak sederhana tetapi dapat berguna saat Anda mau mengimplementasikan tata letak yang rumit, misalnya a grid bersarang.
.wrapper display: grid; grid-template-kolom: repeat (3, 1fr); / * grid-template-kolom: 1fr 1fr 1fr; * / grid-template-rows: 200px; celah jaringan: 10px;
Itu ulangi (3, 1fr) sintaksis menghasilkan tata letak yang sama sebagai 1fr 1fr 1fr. Tata letak di bawah ini sama dengan contoh pertama.
Jika kamu tingkatkan pengganda di dalam ulangi() berfungsi Anda akan memiliki lebih banyak kolom. Contohnya, ulangi (6, 1fr) hasil dalam enam kolom yang sama. Dalam hal ini, semua kotak kami akan berada di baris yang sama, yang berarti cukup menggunakan hanya satu nilai (200px) untuk grid-template-rows milik.
.wrapper display: grid; grid-template-kolom: repeat (6, 1fr); grid-template-rows: 200px; celah jaringan: 10px;
Kamu bisa memakai ulangi() lebih dari sekali. Sebagai contoh, contoh berikut menghasilkan kotak di mana tiga kolom terakhir berada selebar dua kali sebagai tiga yang pertama.
.wrapper display: grid; grid-template-kolom: repeat (3, 1fr) repeat (3, 2fr); grid-template-rows: 200px; celah jaringan: 10px;
Anda juga bisa menggabungkan ulangi() dengan unit CSS lainnya. Misalnya, Anda bisa menggunakan Pengulangan 200px (4, 1fr) 200px sebagai kode yang valid.
Jika Anda tertarik dengan caranya buat tata letak yang rumit dengan modul CSS Grid, the ulangi() fungsi dan fr unit Rachel Andrew memiliki posting blog yang menarik tentang bagaimana Anda bisa melakukan itu.
Demo untuk bereksperimen
Akhirnya, inilah demo yang saya janjikan. Ini menggunakan kode yang sama dengan contoh pertama dalam artikel ini. Garpu, dan lihat apa yang bisa Anda capai dengan fr satuan.
