Penjana CSS Grid

fr bermaksud "fraction of the available free space" (pecahan ruang kosong yang tersedia). Selepas lajur bersaiz tetap (px, auto) menggunakan ruang masing-masing, lebar yang berbaki dibahagikan kepada pecahan. grid-template-columns: 1fr 2fr 1fr mencipta tiga lajur di mana lajur tengah mendapat ruang dua kali ganda berbanding lajur di sebelahnya. Menggunakan fr ialah cara terbaik untuk mencipta grid cecair yang menyesuaikan diri dengan lebar skrin yang berbeza tanpa media queries.

Pisahkan setiap saiz trek dengan ruang: grid-template-columns: 200px 1fr 1fr mencipta bar sisi tetap 200px dan dua lajur cecair yang sama saiz. Anda boleh mencampurkan unit: 1fr auto 1fr menjadikan lajur tengah mengecut mengikut lebar kandungannya. Singkatan repeat() memudahkan pengulangan: repeat(3, 1fr) adalah sama dengan 1fr 1fr 1fr. Alat ini menjana singkatan yang betul dalam output CSS.

gap (dahulunya grid-gap) menambah ruang di antara trek grid, bukan pada tepi luar grid. Ini hampir selalu apa yang anda mahukan: gutter yang konsisten antara sel tanpa padding tambahan di sekeliling bekas. margin pula menambah ruang di sekeliling item grid secara individu, yang menjadi tidak konsisten di tepi dan menambah saiz keseluruhan bekas. Gunakan gap untuk gutter dan padding pada bekas grid untuk ruang nafas di sekeliling keseluruhan susun atur.

Tetapkan grid-column-start dan grid-column-end pada item. Sebagai contoh, grid-column: 1 / 3 menjadikan item bermula pada baris 1 dan berakhir pada baris 3, merentangi 2 lajur. Anda juga boleh menggunakan kata kunci span: grid-column: span 2. Logik yang sama digunakan untuk baris dengan grid-row. Pilih item grid dalam alat ini dan tetapkan nilai start/end untuk menjana CSS yang betul secara automatik.

Kedua-duanya berfungsi dengan repeat() untuk mencipta sebanyak mungkin trek yang muat dalam bekas: repeat(auto-fill, minmax(200px, 1fr)). Perbezaannya ketara apabila item tidak memenuhi semua lajur yang tersedia. auto-fill mengekalkan lajur kosong dalam grid, mengekalkan struktur trek. auto-fit mengecilkan lajur kosong kepada sifar dan membenarkan item yang ada mengembang untuk menggunakan ruang tersebut. Untuk kebanyakan grid kad responsif, auto-fit memberikan tingkah laku yang lebih semula jadi.

grid-template-areas membolehkan anda menentukan susun atur dengan peta bergaya ASCII visual. Contoh: grid-template-areas: "header header" "sidebar content" "footer footer". Kemudian tetapkan item ke kawasan dengan grid-area: header, grid-area: sidebar, dan sebagainya. Ini menjadikan susun atur yang kompleks mudah dibaca dan senang disusun semula dengan media query — hanya tentukan semula grid-template-areas untuk titik putus baharu.

Tidak. Semuanya berjalan dalam pelayar anda. Konfigurasi grid anda tidak akan meninggalkan peranti anda.