Panduan untuk algoritma penempatan automatik dalam grid CSS

Tutorial ini memperincikan algoritma penempatan automatik modul susun atur CSS, yang meletakkan unsur-unsur berdasarkan harta grid-auto-flow. Artikel sebelumnya meliputi asas -asas grid CSS, tetapi ini memberi tumpuan kepada algoritma itu sendiri, menjelaskan bagaimana unsur -unsur berakhir dalam kedudukan akhir mereka.

Konsep Utama:

• algoritma penempatan automatik, yang ditadbir oleh grid-auto-flow (ingkar ke row), item grid kedudukan.
• ia mengendalikan item grid tanpa nama (teks yang tidak disengaja secara langsung dalam bekas grid).
• unsur -unsur yang diposisikan secara eksplisit (menggunakan grid-area) diletakkan terlebih dahulu.
• unsur -unsur dengan kedudukan baris yang ditakrifkan tetapi kedudukan lajur yang tidak ditentukan diletakkan seterusnya, menggunakan sama ada jarang (lalai) atau pembungkusan padat.
• Algoritma menentukan kiraan lajur grid tersirat, berkembang seperti yang diperlukan untuk menampung item dengan kedudukan lajur tertentu atau rentang besar.
• Akhirnya, barang-barang yang tinggal diposisikan mengikut grid-auto-flow, menggunakan kursor penempatan automatik yang bermula pada bahagian atas grid tersirat.

Memahami algoritma:

sebelum menyelam, memahami konsep teras ini:

• Item Grid Anonymous: Teks dalam bekas grid, tidak dibalut dengan tag, menjadi item grid tanpa nama. Ia tidak boleh digayakan secara langsung tetapi mewarisi gaya induk. Whitespace tidak membuat barang tanpa nama.
• grid rentang: kecuali dinyatakan, grid merangkumi lalai kepada 1 (satu sel).
• grid tersirat: grid yang ditakrifkan oleh grid-template-rows, grid-template-columns, dan grid-template-areas adalah grid eksplisit. Grid tersirat berkembang di luar ini untuk menampung item yang diletakkan di luar batasnya.

Penjelasan berikut menganggap grid-auto-flow: row. Untuk grid-auto-flow: column, swap "baris" dan "lajur" dalam deskripsi.

Langkah 1: Generasi Item Grid Anonymous:

Algoritma bermula dengan membuat item grid tanpa nama dari mana -mana teks secara langsung dalam bekas grid. Ini tidak teratur tetapi mewarisi gaya induk.

Langkah 2: Meletakkan unsur -unsur yang diposisikan secara eksplisit:

unsur -unsur dengan kedudukan yang jelas ditakrifkan menggunakan grid-area diletakkan terlebih dahulu. Algoritma menggunakan nilai grid-area (baris permulaan, lajur mula, lajur akhir, lajur akhir) untuk menentukan lokasi mereka.

Langkah 3: Meletakkan elemen dengan baris set, kedudukan lajur yang tidak diset:

Seterusnya, unsur -unsur dengan ditentukan grid-row-start dan grid-row-end (tetapi bukan kedudukan lajur) diletakkan. Algoritma menggunakan pembungkusan yang jarang atau padat:

• Pembungkusan jarang (lalai): Elemen diletakkan di lajur yang paling awal yang tersedia tanpa bertindih item sedia ada. Ia hanya menganggap item yang diletakkan dalam langkah ini , bukan langkah awal.

• Pembungkusan padat (): grid-auto-flow: row dense

(jarang)

(padat)

Langkah 4: Menentukan kiraan lajur grid tersirat:

Algoritma menentukan kiraan lajur grid tersirat:

bermula dengan kiraan lajur grid eksplisit.

1. menambah lajur untuk menampung item dengan kedudukan lajur yang ditetapkan.
2. menambah lajur jika rentang lajur terbesar di antara item yang tinggal melebihi lebar grid tersirat semasa.

Langkah 5: Meletakkan item yang tinggal:

kursor penempatan automatik (pada mulanya di kiri atas) digunakan untuk meletakkan item yang tinggal. Mod pembungkusan (jarang atau padat) mempengaruhi penempatan:

• Pembungkusan jarang:

  kursor bergerak merentasi lajur sehingga kedudukan yang tidak bertindih ditemui. Jika tiada ruang yang terdapat dalam baris semasa, ia bergerak ke baris seterusnya.

• Pembungkusan padat:

  Kursor menetapkan semula ke bahagian atas grid yang tersirat untuk setiap item, mencari kedudukan yang tidak dapat dipertikaikan yang paling awal.

(jarang)

(padat)

Kesimpulan:

Pelancaran terperinci ini menjelaskan algoritma automatik grid CSS. Eksperimen dengan susun atur yang berbeza untuk menguatkan pemahaman anda. Seksyen Soalan Lazim dari teks asal telah ditinggalkan untuk keringkasan, kerana penjelasan algoritma teras sudah cukup komprehensif.

Atas ialah kandungan terperinci Panduan untuk algoritma penempatan automatik dalam grid CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!