Cara Menggunakan Fungsi Ulang Grid CSS ()

Dalam artikel ini, kami akan meneroka semua kemungkinan fungsi CSS Grid Repeat (), yang membolehkan kami membuat corak lajur dan baris grid dengan cekap, dan juga untuk membuat susun atur responsif tanpa pertanyaan media.

Takeaways Key

fungsi `ulangan ()` memudahkan penciptaan corak grid, yang membolehkan spesifikasi bilangan lajur atau baris dan saiznya secara ringkas, meningkatkan kebolehbacaan dan kecekapan kod.
ia menyokong pelbagai pilihan saiz seperti panjang tetap (`px`,` em`, `%`, `fr`), kata kunci berasaskan kandungan (` min-content`, `max-content`), dan fleksibel Kata kunci `auto`, memberikan fleksibiliti dalam reka bentuk responsif.
Fungsi ini boleh diintegrasikan dengan kata kunci `auto-fit` dan` auto-fill` untuk menyesuaikan bilangan trek grid secara automatik berdasarkan lebar kontena, yang penting untuk mewujudkan susun atur cecair, responsif tanpa pertanyaan media.
• menggunakan `minmax ()` dalam `mengulang ()` menawarkan cara yang kuat untuk menentukan julat untuk saiz trek, memastikan kandungan menyesuaikan dengan lancar merentasi saiz viewport yang berbeza.
Baris bernama boleh ditakrifkan dalam `mengulang ()`, membantu penempatan tepat item grid dan meningkatkan kebolehkerjaan struktur grid.
`ulang ()` tidak boleh bersarang dalam dirinya sendiri, tetapi ia boleh digunakan bersama nilai dan fungsi lain untuk mewujudkan susun atur grid yang kompleks dan responsif dengan cekap.
• Jangan ulangi () diri anda

Ciri-ciri grid-template-lajur dan grid-template-baris membolehkan kita secara jelas menetapkan bilangan baris dan lajur yang kita mahu dalam grid, dan untuk menentukan bagaimana ia harus bersaiz. Ini boleh menjadi berulang jika kita mahu berbilang baris dan/atau lajur untuk bersaiz dengan cara yang sama.

Fungsi ulangan () dapat menyelamatkan kita daripada harus mengulangi diri kita sendiri. Sebagai contoh, kita mungkin mendapati diri kita menulis ini:

Sebaliknya, kita boleh menulis ini:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

Dalam contoh di atas, fungsi ulangan () membolehkan kita menentukan berapa banyak lajur yang kita mahu (5), dan saiz apa yang sepatutnya (1FR - atau satu pecahan ruang yang ada).

<span>grid-template-columns: repeat(5, 1fr);
</span>

Ini menjadikan kod kami lebih cekap dan mudah dibaca. Dan ini hanya satu contoh mudah. Seperti yang akan kita lihat di bawah, ada banyak lagi yang boleh kita lakukan dengan fungsi ulang ().

Pen berikut menunjukkan demo mudah kod di atas. Satu artikel yang mengandungi sepuluh div dianjurkan ke dalam lima lajur.

Lihat pen CSS Grid Repeat (): 5 Lajur Mudah oleh SitePoint (@SitePoint) pada codepen.

Demo di atas menggunakan harta CSS GAP. Untuk mengetahui lebih lanjut mengenai susun atur grid, lihat panduan pemula kami ke grid CSS.

pilihan untuk fungsi ulang ()

kita sebenarnya boleh melakukan banyak perkara di dalam kurungan berulang (). Ia memerlukan dua hujah, dipisahkan oleh koma. Yang pertama mewakili "kiraan", dan yang kedua mewakili "trek": ulangi (, ). (Kata "trek" adalah nama generik untuk lajur atau baris.)

Argumen Count boleh menjadi salah satu daripada tiga perkara:

• nombor (seperti 1, 2, 3)
• Kata kunci auto-fit
• kata kunci auto-fill

Jelas, nilai nombor menetapkan bilangan trek tertentu. Tetapi auto-fit dan auto-fill membolehkan bilangan trek yang berbeza-beza bergantung kepada ruang yang ada. Ini menjadikan mereka sangat berguna untuk susun atur responsif tanpa pertanyaan media. Kami akan meneroka mereka secara terperinci di bawah.

Argumen trek menentukan trek yang akan diulang. Ini adalah pilihan untuk hujah ini:

• Nilai panjang, menggunakan unit seperti FR, PX, EM, % dan CH
• Kata kunci Min-Content
• Kata kunci Max-Content
• kata kunci auto
• fungsi minmax (), yang boleh mempunyai fungsi bersarang min () atau max ()
• Fungsi Fit-Content ()
• Dinamakan Lines

Seperti yang anda lihat, terdapat banyak pilihan yang mungkin untuk hujah ini, dan mereka boleh mula kelihatan sedikit mengelirukan, terutamanya apabila beberapa daripada mereka digabungkan. Kami akan cuba menyimpan perkara yang agak mudah di sini supaya kami tidak tersesat di rumpai. Dalam kebanyakan keadaan, hujah trek agak mudah dan intuitif.

menetapkan kumpulan lajur dengan ulangan ()

Sebelum kita meneroka pelbagai argumen yang boleh digunakan dengan berulang (), perlu diperhatikan bahawa ulang () boleh digunakan untuk membuat corak lajur.

Sebagai contoh, pertimbangkan kod "longhand" ini untuk grid enam lajur:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

kita boleh menulis semula ini seperti itu, menggunakan ulang ():

<span>grid-template-columns: repeat(5, 1fr);
</span>

Ini memberitahu penyemak imbas untuk mengulangi corak tiga kali - dari lajur 1FR lebar, diikuti dengan lajur 2FR lebar. Demo di bawah menunjukkan ini dalam tindakan.

Lihat pen CSS Grid Repeat (): Corak Lajur oleh SitePoint (@SitePoint) pada codepen.

menggunakan nilai panjang dengan ulang ()

Kami telah melihat nilai panjang 1FR yang digunakan dengan ulang (). Kelebihan unit FR adalah bahawa ia saiz trek mengikut ruang yang ada tanpa kita perlu bimbang tentang berapa banyak ruang yang ada. Tetapi kita juga boleh menggunakan unit panjang lain di mana kita memerlukannya.

Contohnya, mari kita tetapkan tiga trek lajur dan beri mereka lebar 120 piksel:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

demo codepen berikut menunjukkan hasilnya.

Lihat pen CSS Grid Repeat (): Nilai Panjang oleh SitePoint (@SitePoint) pada codepen.

Lajur kini mempunyai lebar tetap, yang tidak akan berubah walaupun bekas itu terlalu sempit. Cuba bermain -main dengan lebar penyemak imbas di pena di atas. Juga cuba menukar piksel untuk unit panjang lain, seperti 5em, 10ch, 15%, dan sebagainya, untuk melihat kesannya.

menggunakan kata kunci min-kandungan dengan ulangan ()

Kata kunci kandungan min menetapkan trek untuk menjadi luas atau tinggi sebagai kandungan minimumnya. Dalam demo di bawah, kita mempunyai tiga lajur, masing-masing ditetapkan kepada Kandungan min, jadi setiap lajur adalah selebar dengan perkataan terpanjang yang mengandungi:

<span>grid-template-columns: repeat(5, 1fr);
</span>

Lihat pen CSS Grid Repeat (): Min-Content oleh SitePoint (@SitePoint) pada codepen.

menggunakan kata kunci kandungan maksimum dengan ulangan ()

Kata kunci kandungan maksimum pada dasarnya tidak bertentangan dengan kandungan min: ia mendasarkan saiz trek pada jumlah kandungan terbesar dalam sel grid. Dalam demo di bawah, lebar lajur didasarkan pada sel dengan jumlah kandungan terbesar:

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

Lihat pen CSS Grid Repeat (): Max-Content oleh SitePoint (@SitePoint) pada codepen.

menggunakan kata kunci auto dengan ulangan ()

Apabila digunakan dengan ulangan (), kata kunci auto maxes keluar pada kandungan max dan min pada kandungan min.

Pertimbangkan corak lajur berikut:

<span>article {
</span>  <span>grid-template-columns: repeat(3, 1fr 2fr);
</span><span>}
</span>

di sini, kami akan mempunyai enam lajur, masing-masing bernombor ganjil yang ditetapkan untuk lebar auto. Dalam demo Codepen di bawah, kita dapat melihat bahawa, di mana terdapat ruang yang cukup, div dengan teks "auto" max pada kandungan max, dan 1FR Divs berkongsi ruang yang tinggal. Apabila penyemak imbas sempit, lajur auto terus menjadi lebih sempit sehingga mereka mencapai ambang kandungan min.

Lihat pen CSS Grid Repeat (): Auto by SitePoint (@SitePoint) pada codepen.

Dalam demo di atas, div hanya mula melimpah bekas apabila setiap lajur telah mencapai ambang kandungan min. (Iaitu, teks tidak boleh membungkus lagi.)

Nota: Auto hanya seolah -olah berkelakuan seperti yang diterangkan di atas apabila dicampur dengan nilai lain. Dengan sendirinya - seperti Repeat (3, Auto) - ia berkelakuan sama seperti kita menetapkan ulang (3, 1fr).

menggunakan fungsi minmax () dengan ulangan ()

Fungsi Minmax () mengambil dua argumen sendiri - nilai minimum dan maksimum, dipisahkan oleh koma. Jadi dengan Minmax (), kita boleh menetapkan pelbagai saiz yang mungkin untuk trek dalam persekitaran yang fleksibel.

Contohnya, kita boleh menetapkan lajur ke Minmax (40px, 100px), yang bermaksud lebar minimum yang mungkin adalah 40px dan lebar maksimumnya adalah 100px.

Kedua-dua argumen Minmax () boleh mengambil nilai panjang seperti FR, Px, Em, % dan Ch, serta Min-Content, Max-Content dan Auto. Walau bagaimanapun, lebih baik menggunakan nilai panjang untuk sekurang-kurangnya satu hujah, kerana kata kunci tidak sepatutnya berfungsi sebagai kedua-dua argumen (walaupun saya mendapati ini kadang-kadang berfungsi-seperti Minmax (min-kandungan, kandungan maksimum)).

Kod berikut menetapkan lima lajur, masing -masing dengan lebar minimum 60px dan lebar maksimum 1FR:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

Lihat pen CSS Grid Repeat (): Minmax () oleh SitePoint (@SitePoint) pada codepen.

Ini berfungsi dengan baik sehingga lebar minimum 60px dicapai. Selepas itu, kandungan mula digantung dari bekasnya. Kami akan melihat bagaimana untuk mendapatkan hasil yang lebih baik tidak lama lagi.

menggunakan fungsi minmax () dengan min () atau max ()

Fungsi Minmax () juga boleh mempunyai fungsi min () atau max () sebagai hujah. Kedua -duanya mengambil dua nilai. Fungsi min () terpakai yang mana lebih kecil daripada dua nilai, dan fungsi maksimum () terpakai yang mana nilai yang lebih besar. Ini berguna dalam persekitaran yang responsif.

contohnya:

Lihat pen CSS Grid Repeat (): Minmax () Fungsi dengan Min () oleh SitePoint (@SitePoint) pada codepen.

<span>grid-template-columns: repeat(5, 1fr);
</span>

Kod di atas menetapkan lima lajur. Pada penyemak imbas yang luas, lima lajur akan sama -sama jaraknya pada 1FR. Pada peranti sempit, lajur akan menjadi lebih sempit dan sempit. Mereka akan berhenti menyusut apabila mereka memukul mana -mana yang lebih rendah daripada 60px dan 8VW. Oleh itu, kita masih dapat menemui diri kita dengan kandungan yang tergantung dari bekas di skrin sempit; masih ada lagi untuk menjadi responsif sepenuhnya.

Jika anda menemui gabungan Minmax (), min () dan max () sedikit underwhelming pada tahap ini, menggantung di sana, kerana kuasa sebenar mereka akan dilihat di bawah apabila kita bertemu dengan auto-fit dan auto- Isi.

menggunakan fungsi kandungan fit () dengan ulangan ()

Fungsi Fit-Content () mengambil satu hujah, yang mewakili saiz maksimum trek boleh tumbuh. Jadi trek boleh fleksibel sehingga titik itu . Fit-Content () boleh mengambil nilai panjang, seperti FR, PX, EM, % dan Ch.

Contohnya, jika kita menetapkan tiga lajur dan kandungan yang sesuai (120px), lebar lajur akan responsif sehingga lebar 120px:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

Lihat pen CSS Grid Repeat (): Fit-Content () oleh SitePoint (@SitePoint) pada codepen.

menggunakan baris bernama dengan ulangan ()

Dalam susun atur grid, garisan menegak dan mendatar di sekitar trek adalah bernombor secara lalai. Apabila menetapkan grid-template-lajur dan grid-template-baris, kita boleh memberikan nama kepada baris tersebut. Ini menjadikannya lebih mudah untuk menargetkan garisan tersebut apabila meletakkan kandungan pada grid (kerana kita tidak perlu masuk dan mengira garis grid).

Berikut adalah contoh mudah. Garis yang dinamakan adalah bit dalam kurungan persegi ([]):

<span>grid-template-columns: repeat(5, 1fr);
</span>

Kod di atas memberi kita dua lajur. Garis grid menegak paling kiri (nombor 1) dipanggil "bar sisi", garis grid tengah (nombor 2) dipanggil "permulaan kandungan", dan garis grid akhir (nombor 3) dipanggil "kandungan-end".

kita juga boleh menggunakan garis yang dinamakan dalam fungsi kami ():

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

Ini bermakna setiap lajur kami kini mempunyai garis ke kiri yang dipanggil Yin dan garis ke kanan yang dipanggil Yang.

Ia mungkin kelihatan lebih sukar jika setiap baris mempunyai nama yang sama, tetapi kita masih boleh menargetkannya secara individu. Contohnya:

kita boleh menyasarkan garis yin pertama dengan grid-kolumn: yin

kita boleh menyasarkan garis yin kedua dengan grid-lajur: yin 2
kita boleh menetapkan lajur untuk merangkumi tiga baris dari garis yin kedua: grid-lajur: yin 2 / span 3
kita boleh menetapkan lajur untuk merangkumi dari yin kedua hingga akhir dengan grid -kolumn: yin 2 / yang -1
• penamaan garis dalam ulang () mungkin paling berguna di mana ulang () dicampur dengan nilai -nilai lain, seperti SO:

<span>article {
</span>  <span>grid-template-columns: repeat(3, 1fr 2fr);
</span><span>}
</span>

Saya tidak akan menyelidiki lebih jauh ke dalam baris bernama dan cara menggunakannya di sini, kerana ia adalah topik yang berasingan, tetapi anda boleh membaca lebih lanjut mengenai garis grid yang dinamakan pada MDN.

menggunakan ulang () dengan auto-fit dan auto-fill

Kata kunci auto-fit dan auto-fill adalah alternatif untuk menetapkan bilangan trek tetap. Mereka memberitahu penyemak imbas agar sesuai dengan banyak trek ke dalam ruang tertentu yang mungkin. Contohnya:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

Lihat pen CSS Grid Repeat (): Auto-Fit dan Auto-Fill oleh SitePoint (@SitePoint) pada codepen.

Dalam demo di atas, div ditetapkan pada lebar 150px, dan mereka yang tidak dapat disesuaikan dengan satu baris jatuh ke seterusnya. Jika kita menukar auto-fit ke auto-fill, kita tidak akan melihat perbezaan, kerana di bawah syarat-syarat ini, mereka berdua melakukan perkara yang sama. Perbezaan di antara mereka hanya menjadi jelas di bawah keadaan khas.

Pada ketika ini, auto-fit to auto-fill adalah

okay , tetapi tidak ada flash. Ketika itu mereka digabungkan dengan Minmax () dan min () bahawa sihir sebenar mula berlaku, jadi mari kita lihat yang seterusnya.

menggunakan ulang () dengan auto-fit/auto-fill, minmax () dan min ()

Jika anda tidak suka dengan ulangan () lagi, gabungan ulangan () dengan auto-fit, minmax () dan min () pasti akan melihat anak panah Cupid menembusi hati anda yang degil. Gabungan mereka membolehkan kita membuat susun atur yang benar -benar responsif tanpa menggunakan pertanyaan media.

menggunakan auto-fit dan minmax () dengan ulang ()

Pertimbangkan CSS berikut:

<span>grid-template-columns: repeat(5, 1fr);
</span>

Dalam contoh ini, Minmax () menetapkan lebar lajur minimum 200px dan maksimum 1fr. Demo di bawah menunjukkan ini dalam tindakan.

Lihat pen CSS Grid Repeat (): Auto-Fit dan Minmax () oleh SitePoint (@SitePoint) pada codepen.

setiap div mestilah sekurang -kurangnya 200px lebar. Sekiranya terdapat ruang tambahan di sebelah kanan (kurang 200 piksel), div berkembang untuk mengisi ruang. Jika kita meluaskan penyemak imbas, Div lain ditambah ke baris sekali lagi 200 piksel ruang tersedia. Perkara yang sama berlaku secara terbalik: ketika kita menyempitkan penyemak imbas, Div terakhir dalam baris akan jatuh sebaik sahaja tidak sekurang -kurangnya 200px ruang untuk dimasukkan ke dalamnya. Dan apabila ia telah jatuh, baki div berkembang untuk mengisi baris.

Sekali lagi, jika kita menukar auto-fit untuk auto-fill, kita akan melihat tingkah laku yang sama.

Terdapat satu batasan dengan contoh ini, walaupun. Jika kita membuat tetingkap penyemak imbas cukup sempit, kita akan berakhir dengan satu lajur. Oleh kerana lajur itu semakin sempit daripada 200px, Divs akan mula melimpah bekas mereka.

kita boleh menghalang limpahan ini daripada berlaku dengan membawa min () ke dalam campuran, jadi mari kita lihat yang seterusnya.

menggunakan auto-fit, minmax () dan min () dengan ulangan ()

kita dapat mengawal apa yang berlaku pada lebar kecil dengan memperkenalkan min (). Mari kita kemas kini kod kami untuk kelihatan seperti ini:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

Sekarang terdapat dua pilihan untuk lebar lajur minimum. Penyemak imbas akan memilih mana yang terkecil . Sebaik sahaja lajur lebih sempit daripada 200px, 100% adalah nilai yang lebih kecil, jadi ia berlaku. Dan ini bermakna bahawa lajur tunggal yang tersisa kini ditetapkan kepada lebar: 100%, jadi ia akan terus sesuai dengan baik ke dalam bekasnya pada lebar yang semakin berkurangan. (Sapu tetingkap penyemak imbas sejauh yang anda dapat untuk melihat ini dalam amalan.)

Lihat pen CSS Grid Repeat (): Minmax () dan Min () oleh SitePoint (@SitePoint) pada codepen.

Untuk demo dunia yang lebih nyata menggunakan Repeat () dengan auto-fit, Minmax () dan min (), lihat demo codepen berikut galeri imej responsif. Demo ini juga menggunakan harta aspek nisbah, yang kami dilindungi dalam cara menggunakan nisbah aspek CSS.

Lihat pen Galeri imej responsif menggunakan nisbah aspek oleh SitePoint (@SitePoint) pada codepen.

Memahami perbezaan antara auto-fit dan auto-fill

Dalam contoh-contoh yang telah kita lihat setakat ini, nampaknya tidak ada perbezaan antara auto-fit dan auto-fill. Perbezaannya hanya muncul dalam situasi tertentu, yang akan kita sampaikan sekarang.

kami akan melepaskan demo kami HTML ke bawah supaya hanya terdapat empat div, dan menetapkan CSS berikut:

<span>grid-template-columns: repeat(5, 1fr);
</span>

Imej di bawah menunjukkan apa yang kita dapat dengan auto-fill.

Penyemak imbas mengira berapa banyak divs

boleh sesuai di dalam bekas dan meninggalkan ruang untuk mereka. Setiap div yang sedia ada adalah 110px lebar, seperti ruang yang tersisa di sebelah kanan.

mari kita beralih ke auto-fit:

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

Imej di bawah menunjukkan apa yang kita dapat dengan auto-fit.

Dengan auto-fit, penyemak imbas juga mengira ruang untuk lebih banyak div, tetapi kemudian runtuh ruang ke lebar sifar dan membolehkan div yang sedia ada berkembang untuk mengambil semua ruang. Dalam imej di atas, anda dapat melihat bahawa garisan lajur akhir masih bernombor 8. 8 disusun di atas garisan grid 7, 6 dan 5.

Jadi apa yang kita buat dari semua ini? Secara realistik, paling banyak jika tidak semua keadaan kita mahu menggunakan auto-fit, kerana kita tidak akan sering mahu ruang kekal kosong apabila kita boleh menggunakannya untuk kandungan kita.

Anda boleh bermain-main dengan auto-fit dan auto-fill dalam demo codepen ini. Cuba tukar auto-fit ke auto-fill, dan melebarkan dan kontrak penyemak imbas untuk melihat bagaimana mereka berdua berkelakuan.

perkara yang berguna untuk mengetahui tentang ulang ()

Seperti yang dinyatakan di atas, fungsi ulangan () boleh digunakan sebagai sebahagian daripada perisytiharan yang lebih lama dengan grid-templat-lajur dan grid template-baris. Kebanyakan rakan-rakan yang kami temui di sini-unit panjang, kandungan min, kandungan maksimum, auto, minmax (), kandungan yang sesuai (), dan dinamakan garis-bekerja bersama ulang () serta di dalamnya. (Anda dapat melihat contoh-contoh mereka yang bekerja dengan grid-templat-lajur dan grid-template-baris pada MDN.)

Beberapa kombinasi tidak dibenarkan untuk hujah trek. Sebagai contoh, kita tidak boleh menggunakan sesuatu seperti Repeat (Auto-Fill, 1FR). Unit auto-fit dan fleksibel tidak dapat bermain bersama, kerana kita memerlukan langkah tetap di sana di suatu tempat, seperti Minmax (100px, 1FR).

Seperti yang kita lihat, fungsi Minmax () boleh mempunyai fungsi bersarang min () atau max (). Ia juga boleh mengandungi satu daripada auto, min-kandungan, kandungan max, tetapi tidak dua. Sebagai contoh, kita boleh menggunakan Minmax (50px, Max-Content), tetapi bukan Minmax (min-kandungan, kandungan max) (walaupun, jujur, saya dapati bahawa beberapa kombinasi ini nampaknya berfungsi).

Notasi ulangan () tidak boleh bersarang. Jadi kita tidak boleh berulang () dalam ulangan (). Tetapi kita pasti boleh mengulangi () fungsi bersebelahan - seperti berulang (5, 1fr) 100px ulang (2, 50px).

membungkus

Fungsi ulangan () adalah alat yang sangat berguna untuk mengulangi corak berulang lajur dan baris grid. Ia boleh digunakan untuk membuat susun atur responsif sepenuhnya tanpa pertanyaan media hanya dalam satu baris kod.

Dalam kebanyakan kes, anda tidak perlu terlalu jauh di rumpai dengan ulangan (). Ciri yang paling mengagumkan disimpulkan dalam contoh asas seperti ini:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

pastikan untuk menyimpan baris kod di poket belakang anda, kerana ia akan sangat berguna.

anda boleh mengetahui lebih lanjut mengenai fungsi ulangan () di sini:

halaman ulangan () pada mdn
Bahagian Ulang () dari Spesifikasi Modul Susun atur W3C

Untuk pengenalan yang lebih umum kepada susun atur grid CSS, lihat pengenalan kepada susun atur grid CSS.

Soalan Lazim (Soalan Lazim) Mengenai Fungsi Ulang Grid CSS

Apakah perbezaan antara menggunakan fungsi berulang dan secara manual menentukan trek grid dalam grid CSS?

Fungsi ulangan dalam grid CSS adalah kaedah singkat untuk menentukan pelbagai trek grid dengan saiz yang sama. Daripada secara manual menentukan setiap trek, anda boleh menggunakan fungsi ulangan untuk menentukan bilangan trek dan saiznya dalam satu perjalanan. Ini menjadikan kod anda lebih bersih dan mudah dibaca. Sebagai contoh, bukannya menulis "grid-templat-lajur: 100px 100px 100px 100px;", anda hanya boleh menulis "grid-template-lajur: ulangi (4, 100px);". Kedua -dua kod akan membuat grid dengan empat lajur setiap lebar 100px. Fungsi ulangan menerima dua argumen: bilangan pengulangan dan saiz trek. Jika anda ingin membuat grid dengan trek saiz yang berbeza, anda boleh menggunakan fungsi ulangi beberapa kali dalam harta yang sama. Sebagai contoh, "grid-templat-lajur: ulangi (2, 100px) ulang (3, 200px);" akan membuat grid dengan dua lajur 100px dan tiga lajur 200px. Fungsi untuk mengisi bekas grid secara automatik dengan banyak trek yang boleh dimuatkan. Saiz trek ditentukan sebagai hujah kedua fungsi berulang. Jika saiz bekas melebihi jumlah saiz trek, ruang yang tinggal akan diedarkan sama rata di antara trek. Sebagai contoh, "grid-templat-lajur: ulangi (auto-fill, 100px);" akan membuat lajur 100px sebanyak yang boleh dimuatkan dalam bekas. fr). Unit FR mewakili sebahagian kecil daripada ruang yang ada dalam bekas grid. Sebagai contoh, "grid-templat-lajur: ulangi (3, 1fr);" akan membuat grid dengan tiga lajur yang masing-masing mengambil satu pertiga daripada lebar kontena. dengan fungsi berulang untuk membuat susun atur grid responsif. Ia berfungsi sama seperti auto-fill, tetapi ia runtuh mana-mana trek kosong. Ini bermakna jika tidak ada kandungan yang cukup untuk mengisi semua trek, trek yang tinggal akan berkembang untuk mengambil ruang yang ada. Sebagai contoh, "grid-templat-lajur: ulangi (auto-fit, minmax (100px, 1fr));" akan membuat lajur 100px sebanyak yang boleh dimuatkan di dalam bekas, dan mana -mana ruang yang tinggal akan diedarkan di antara lajur.

Bolehkah saya menggunakan fungsi ulangi dengan fungsi Minmax? Fungsi Minmax mentakrifkan julat saiz yang lebih besar daripada atau sama dengan minimum dan kurang daripada atau sama dengan maksimum. Sebagai contoh, "Grid-template-lajur: Ulang (3, Minmax (100px, 1FR));" Akan membuat grid dengan tiga lajur yang masing -masing mempunyai lebar minimum 100px dan lebar maksimum 1fr. Fungsi ulangan dengan nombor negatif, penyemak imbas akan mengabaikan peraturan dan grid tidak akan dibuat. Fungsi ulangan hanya menerima integer positif sebagai bilangan pengulangan.

Bolehkah saya menggunakan fungsi ulangi dengan nilai peratusan? Peratusan dikira berkenaan dengan saiz bekas grid. Sebagai contoh, "grid-templat-lajur: ulangi (2, 50%);" akan membuat grid dengan dua lajur yang masing-masing mengambil separuh lebar kontena. digunakan dengan sifat grid-template untuk menentukan saiz baris grid. Sintaks adalah sama dengan grid-template-lajur. Sebagai contoh, "grid-template-baris: ulangi (3, 100px);" Akan membuat grid dengan tiga baris setiap ketinggian 100px.

Bolehkah saya menggunakan fungsi ulangan dengan pertanyaan media? . Anda boleh menentukan susun atur grid yang berbeza untuk saiz skrin yang berbeza menggunakan fungsi ulangan di dalam pertanyaan media. Sebagai contoh, anda mungkin mahu memaparkan dua lajur pada skrin kecil dan empat lajur pada skrin besar. Ini boleh dicapai dengan kod berikut:

@media (max-width: 600px) { .Grid { grid-template-columns: ulangan (2, 1fr); >}

@media (min-lebar: 601px) {

.Grid { grid-template-columns: ulangan (4, 1fr);

Atas ialah kandungan terperinci Cara Menggunakan Fungsi Ulang Grid CSS (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!