Panduan kepada CSS Grid Layout Fr Unit
The Modul Layout Grid CSS telah dihantar dengan a unit CSS baru dipanggil fr unit. Sebagai mudah kerana boleh, fr adalah singkatan perkataan “pecahan”. Unit baru membolehkannya dengan cepat memotong grid ke dalam lajur atau baris yang proporsional. Akibatnya, penciptaan gred penuh responsif dan fleksibel menjadi hampir angin.
Oleh kerana unit pecahan diperkenalkan bersama dengan modul Grid Layout, anda boleh menggunakannya dalam mana-mana pelayar yang menyokong grid CSS. Sekiranya anda juga ingin menyokong penyemak imbas yang lebih lama, ini hebat Grid grid polyfill yang membolehkan anda menggunakan bukan sahaja fr unit tetapi ciri grid lain juga.
Penggunaan asas
Pertama, mari kita lihat a grid asas yang menggunakan unit pecahan. Susun atur di bawah membahagikan ruang ke tiga lajur lebar sama dan dua baris ketinggian yang sama.
HTML miliknya dibuat enam divs ditandakan dengan .kotak kelas, di dalam a .pembalut div.
1.2.3.4.5.6.
Untuk menggunakan modul Grid Layout, anda perlu menambah paparan: grid; Hartanah CSS untuk pembalut. The grid-template-columns harta benda menggunakan fr unit sebagai nilai; yang nisbah tiga lajur ialah 1: 1: 1.
Untuk baris grid (grid-template-baris harta), saya tidak menggunakannya fr unit, kerana ia hanya masuk akal jika pembungkus itu mempunyai ketinggian tetap. Jika tidak, ia boleh menghasilkan hasil yang pelik pada sesetengah peranti, walau bagaimanapun, itu fr unit tidak mengekalkan nisbah (dan ini sangat besar).
The grid-jurang harta menambah grid 10px di antara kotak. Jika anda tidak mahu apa-apa jurang hanya mengeluarkan harta ini.
.pembungkus paparan: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-row: 200px 200px; grid-jurang: 10px; .box color: white; teks-align: center; saiz fon: 30px; padding: 25px;
Perhatikan CSS di atas tidak mengandungi beberapa gaya asas seperti warna latar belakang. Awak boleh cari kod penuh dalam demo pada akhir artikel.
Naik nisbah
Sudah tentu, anda bukan sahaja boleh menggunakan 1: 1: 1 tetapi apa nisbah yang anda mahu. Di bawah, saya gunakan Pecahan 1: 2: 1 yang juga membahagikan ruang ke tiga lajur tetapi lajur tengah akan menjadi dua kali lebih luas sebagai dua yang lain.
Saya juga meningkatkan nilai grid-jurang supaya anda dapat melihat bagaimana ia mengubah susun atur. Pada asasnya, penyemak imbas memotong jurang grid dari lebar paparan (dalam contoh ini, jurang grid menambah sehingga 80px), dan irisan selebihnya mengikut pecahan yang diberikan.
.pembungkus paparan: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-row: 200px 200px; grid-jurang: 40px;
Gabung fr dengan unit CSS lain
Awak boleh Gabung yang fr unit dengan mana-mana unit CSS lain juga. Sebagai contoh, dalam contoh di bawah, saya menggunakan 60% 1fr 2fr nisbah untuk grid saya.
Jadi, bagaimanakah kerja ini? The pelayar menyerahkan 60% lebar paparan ke ruang pertama. Kemudian, ia membahagikan seluruh ruang ke dalam pecahan 1: 2.
Perkara yang sama juga boleh ditulis sebagai 60% 13.33333% 26.66667%. Tapi terus terang, mengapa sesiapa mahu menggunakan format itu? Kelebihan unit pecahan yang besar ialah ia meningkatkan kebolehbacaan kod. Tambahan pula, ia benar-benar tepat, kerana format peratusan masih menambah hanya 99.9999%.
.pembungkus paparan: grid; grid-template-columns: 60% 1fr 2fr; grid-template-row: 200px 200px; grid-jurang: 10px;
Selain peratusan, anda juga boleh menggunakan unit CSS lain bersama-sama dengan unit fraksinya, misalnya pt, px, em, dan rem.
Tambah ruang kosong dengan fr
Bagaimana jika anda tidak mahu reka bentuk anda menjadi berantakan dan tambah beberapa ruang kosong ke grid anda? Unit pecahan juga mempunyai penyelesaian mudah untuk itu.
Seperti yang dapat anda lihat, grid ini mempunyai ruang kosong sementara ia masih mengekalkan kesemua enam kotak itu. Untuk susun atur ini, kita perlu memotong ruang ke empat tiang bukannya tiga. Oleh itu, kami menggunakan 1fr 1fr 1fr 1fr nilai untuk grid-template-columns harta.
Kami menambah lajur kosong di dalamnya grid-template-areas harta, menggunakan nota dot. Pada dasarnya, harta ini membolehkan anda rujukan kawasan grid. Dan, anda boleh menamakan kawasan grid dengan grid-area harta yang perlu anda gunakan secara berasingan untuk setiap kawasan.
.pembungkus paparan: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-row: 200px 200px; grid-jurang: 10px; grid-template-areas: "box-1 box-2 box-3" "box-4 box-5 box-6"; .box-1 grid-area: box-1; .box-2 grid-area: box-2; .box-3 grid-area: box-3; .box-4 grid-area: box-4; .box-5 grid-area: box-5; .box-6 grid-area: box-6;
Kawasan ruang kosong tidak perlu membentuk lajur, mereka boleh di mana sahaja dalam grid.
The ulang () fungsi
Anda juga boleh menggunakan fr unit bersama dengan ulang () fungsi Untuk sintaks lebih mudah. , ini tidak perlu jika anda hanya mempunyai grid yang mudah tetapi boleh berguna jika anda mahu melaksanakan susun atur rumit, contohnya a grid bersarang.
.pembungkus paparan: grid; grid-template-columns: repeat (3, 1fr); / * grid-template-columns: 1fr 1fr 1fr; * / grid-template-row: 200px; grid-jurang: 10px;
The ulang (3, 1fr) sintaks menghasilkan susun atur yang sama sebagai 1fr 1fr 1fr. Susun atur di bawah adalah sama dengan contoh pertama.
Jika awak menambah pengganda di dalam ulang () fungsi anda akan mempunyai lebih banyak lajur. Contohnya, ulang (6, 1fr) keputusan dalam enam lajur yang sama. Dalam kes ini, semua kotak kami akan berada di baris yang sama, yang bermaksud cukup untuk menggunakan hanya satu nilai (200px) untuk grid-template-baris harta.
.pembungkus paparan: grid; grid-template-columns: repeat (6, 1fr); grid-template-row: 200px; grid-jurang: 10px;
Anda boleh gunakan ulang () lebih dari sekali. Sebagai contoh, contoh berikut menghasilkan dalam grid di mana tiga lajur terakhir adalah dua kali lebih luas sebagai tiga yang pertama.
.pembungkus paparan: grid; grid-template-column: repeat (3, 1fr) repeat (3, 2fr); grid-template-row: 200px; grid-jurang: 10px;
Anda juga boleh Gabung ulang () dengan unit CSS lain. Sebagai contoh, anda boleh menggunakannya 200px repeat (4, 1fr) 200px sebagai kod yang sah.
Sekiranya anda tertarik dengan cara membuat susun atur yang kompleks dengan modul CSS Grid, yang ulang () fungsi dan fr unit Andrew Andrew mempunyai postingan blog yang menarik mengenai bagaimana anda boleh melakukannya.
Demo untuk bereksperimen
Akhirnya, inilah demo yang saya janjikan. Ia menggunakan kod yang sama sebagai contoh pertama dalam artikel ini. Fork itu, dan lihat apa yang boleh anda capai dengan fr unit.
