Baru -baru ini saya cuba mengubah reka bentuk senarai blog. Idea ini adalah untuk menyediakan pembaca dengan jawatan terkini dari blog ini, dengan susun atur gaya majalah dan bukan hanya menyenaraikan blog kegemaran kami di bar sisi.

Bahagian yang mudah mendapat senarai artikel dengan ringkasan dari suapan RSS kegemaran kami. Untuk melakukan ini, kami menggunakan Lite Plugin WordPress Lite, yang mengagregatkan pelbagai suapan ke dalam senarai yang disusun mengikut masa - sesuai untuk menyampaikan kandungan terbaru mereka. Bahagian yang sukar menjadikannya kelihatan hebat.

Senarai lalai UI untuk plugin ini cukup hambar, jadi saya mahu gaya untuk menyerupai laman web akhbar atau majalah, mencampurkan panel "kandungan" yang lebih besar dan lebih besar.

Ini seolah -olah menjadi kes penggunaan yang ideal untuk grid CSS! Buat susun atur grid untuk susun atur yang berbeza, contohnya, susun atur lima lajur dan susun atur tiga lajur, dan kemudian gunakan pertanyaan media untuk menukar antara titik putus yang berbeza. Betul? Tetapi apabila kita boleh membuat grid responsif yang lancar untuk kita secara automatik menggunakan pilihan auto-adaptasi grid, adakah kita benar-benar memerlukan pertanyaan media ini-dan semua kerumitan mengenal pasti titik putus?

Pendekatan ini terdengar menarik, tetapi ketika saya mula memperkenalkan unsur-unsur lajur, saya menghadapi masalah dengan grid yang melimpah pada skrin sempit. Pertanyaan media seolah -olah menjadi satu -satunya penyelesaian. Iaitu, sehingga saya mencari penyelesaian!

Setelah melihat beberapa tutorial pada grid CSS, saya mendapati bahawa mereka dibahagikan kepada dua kategori:

1. Tutorial yang menunjukkan kepada anda cara membuat susun atur yang menarik menggunakan elemen SPAN, tetapi bilangan lajur ditetapkan.
2. Tutorial yang menerangkan cara membuat grid responsif yang secara automatik diubahsuai, tetapi semua item grid mempunyai lebar yang sama (iaitu, tiada lajur span).

Saya mahu grid melakukan kedua -duanya pada masa yang sama: Buat susun atur cecair yang responsif yang juga merangkumi pelbagai elemen lajur yang secara responnya saiz semula.

Keindahannya ialah apabila anda memahami batasan grid responsif dan mengapa dan apabila lajur merangkumi responsif grid, anda boleh menentukan susun atur gaya majalah/berita responsif dengan hanya selusin kod kod ditambah pertanyaan media mudah (atau jika anda sanggup mengehadkan pilihan SPAN, atau bahkan tanpa pertanyaan media).

Ini adalah visual yang menunjukkan plugin RSS di luar kotak dan bagaimana kita menjaga kita gaya.

Susun atur grid gaya majalah ini sepenuhnya responsif, dan panel ciri warna akan diselaraskan secara dinamik kerana bilangan lajur berubah. Halaman menunjukkan kira -kira 50 artikel, tetapi kod susun atur tidak ada kaitan dengan bilangan item yang dipaparkan. Tingkatkan plugin untuk memaparkan 100 projek, dan susun atur tetap menarik sepanjang masa.

Semua ini dilaksanakan menggunakan CSS sahaja, dan hanya ada satu pertanyaan media untuk mengendalikan paparan lajur tunggal pada skrin sempit (iaitu kurang daripada 460 piksel).

Hebatnya, susun atur ini hanya menggunakan 21 baris kod CSS (tidak termasuk gaya kandungan global). Tetapi untuk mencapai fleksibiliti ini dengan sedikit baris kod, saya terpaksa menggali jauh ke dalam beberapa bahagian yang lebih jelas dari grid CSS dan belajar bagaimana menyelesaikan beberapa batasan yang wujud.

Unsur -unsur asas kod yang menghasilkan susun atur ini sangat pendek, menunjukkan kuasa grid CSS:

 <code>.archive { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); grid-gap: 32px; grid-auto-flow: dense; } /* 特寬網(wǎng)格文章*/ .article:nth-child(31n 1) { grid-column: 1 / -1; } .article:nth-child(16n 2) { grid-column: -3 / -1; } .article:nth-child(16n 10) { grid-column: 1 / -2; } /* 手機單列顯示*/ @media (max-width: 459px) { .archive { display: flex; flex-direction: column; } }</code>

Teknik dalam artikel ini juga boleh digunakan dengan baik untuk menyediakan sebarang kandungan yang dihasilkan secara dinamik, seperti output widget artikel terkini, halaman arkib, atau hasil carian.

Buat mesh responsif

Saya menubuhkan tujuh belas projek untuk memaparkan pelbagai kandungan, gambar, dan petikan kandungan olok -olok -semuanya termasuk dalam pembungkus

<code><div>
  </div></code>

Kod untuk menukar item ini menjadi grid responsif sangat padat:

 <code>.archive { /* 將元素定義為網(wǎng)格容器*/ display: grid; /* 自動適應(yīng)盡可能多的項目在一行上，而不會低于180像素*/ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 文章之間的一點間距*/ grid-gap: 1em; }</code>

Perhatikan bahawa ketinggian baris diselaraskan secara automatik untuk memenuhi kandungan tertinggi dalam baris. Jika anda menukar lebar pen, anda akan melihat item berkembang dan mengecil dengan lancar, dengan bilangan lajur yang berubah dari satu lajur ke lima lajur masing -masing.

Magic grid CSS yang digunakan di sini adalah kata kunci auto-fit , yang digunakan bersamaan dengan fungsi minmax() yang digunakan untuk grid-template-columns .

Bagaimana ia berfungsi

Kami boleh melaksanakan susun atur lima lajur menggunakan hanya kaedah berikut:

 <code>.archive { display: grid; grid-template-columns: repeat(5, 1fr); }</code>

Walau bagaimanapun, ini mewujudkan lima lajur yang tumbuh dan mengecut dengan lebar skrin yang berbeza, tetapi sentiasa menyimpan lima lajur, menyebabkan mereka menjadi sangat sempit di skrin kecil. Idea pertama mungkin adalah untuk membuat sekumpulan pertanyaan media dan mentakrifkan semula grid dengan bilangan lajur yang berlainan. Ini berfungsi dengan baik, tetapi dengan kata kunci auto-fit , semua ini dilakukan secara automatik.

Agar auto-fit berfungsi dengan cara yang kita mahu, kita perlu menggunakan fungsi minmax() . Ini memberitahu penyemak imbas betapa kecilnya lajur boleh dimampatkan, dan kemudian lebar maksimum yang dapat mereka berkembang. Lebih kecil, ia secara automatik akan mengurangkan bilangan lajur. Lebih besar, bilangan lajur meningkat.

 <code>.archive { grid-template-columns: repeat (auto-fit, minmax(180px, 1fr)); }</code>

Dalam contoh ini, penyemak imbas akan menampung sebanyak mungkin lajur 180 piksel. Sekiranya ruang ditinggalkan, lajur akan tumbuh secara purata dengan berkongsi ruang yang tinggal di antara mereka -ini adalah apa yang dikatakan nilai 1fr : Buat lajur yang sama pecahan lebar yang tersedia.

Seret tetingkap, dan apabila ruang yang tersedia meningkat, semua lajur tumbuh sama rata untuk menggunakan ruang tambahan. Lajur akan terus berkembang sehingga ruang yang ada membolehkan lajur tambahan 180 piksel, dan seluruh lajur akan muncul. Kurangkan lebar skrin dan prosesnya akan terbalik, menyesuaikan dengan sempurna grid ke susun atur lajur tunggal. Magic!

Dan anda boleh mendapatkan semua respons ini dengan hanya satu baris kod. Betapa sejuknya ini?

Buat rentang dengan "autoflow: ketumpatan"

Setakat ini kami mempunyai grid responsif, tetapi semua item mempunyai lebar yang sama. Untuk susun atur berita atau majalah, kami memerlukan beberapa kandungan untuk diserlahkan dengan merangkumi dua atau lebih lajur atau mungkin semua lajur.

Untuk membuat rentang pelbagai lajur, kami boleh menambah fungsi column-span ke projek grid yang kami mahu mengambil lebih banyak ruang. Sebagai contoh, jika kita mahu item ketiga dalam senarai menjadi dua lajur lebar, kita boleh menambah:

 <code>.article:nth-child(3) { grid-column: span 2; }</code>

Walau bagaimanapun, apabila kita mula menambah rentang, banyak masalah timbul. Pertama, jurang mungkin muncul dalam grid, kerana item yang luas mungkin tidak sesuai dengan baris, jadi grid secara automatik menyesuaikan diri untuk menolaknya ke baris seterusnya, meninggalkan jurang di mana ia sepatutnya:

Penyelesaian yang mudah adalah untuk menambah grid-auto-flow: dense ke elemen grid, yang memberitahu penyemak imbas untuk mengisi sebarang jurang dengan item lain, dengan berkesan membuat aliran kandungan yang lebih sempit di sekitar item yang lebih luas, seperti yang ditunjukkan di bawah:

Perhatikan bahawa projek itu kini tidak teratur, dengan projek keempat muncul sebelum projek ketiga dengan lebar ganda. Setakat yang saya tahu, ini tidak mungkin untuk dielakkan, dan ia adalah salah satu batasan grid CSS yang perlu anda terima.

Semak "keupayaan aliran auto-aliran Geoff Graham untuk kata kunci intensif grid" untuk pengenalan grid-auto-flow: dense dan contoh bagaimana ia berfungsi.

Beberapa cara untuk menentukan rentang

Terdapat beberapa cara untuk menunjukkan berapa banyak lajur item yang harus dijangkau. Cara paling mudah adalah menggunakan grid-columns: span [n] ke salah satu item, di mana n adalah bilangan lajur elemen akan merangkumi. Item ketiga dalam susun atur kami mempunyai grid-column: span 2 , yang menjelaskan mengapa ia dua kali lebih luas seperti item lain yang merangkumi hanya satu lajur.

Kaedah lain memerlukan anda untuk menentukan garis grid secara eksplisit. Sistem penomboran garis grid adalah seperti berikut:

Anda boleh menentukan garis grid dari kiri ke kanan menggunakan nilai positif (mis. 1, 2, 3) atau nilai negatif (mis. -1, -2, -3) untuk melaksanakan hak ke kiri. Ini boleh digunakan untuk meletakkan item di grid menggunakan harta grid-column , seperti yang ditunjukkan di bawah:

 <code>.grid-item { grid-column: (起始軌道) / (結(jié)束軌道); }</code>

Jadi ini memberi kita cara lain untuk menentukan rentang projek. Ini terutamanya fleksibel, kerana kedua -dua nilai permulaan atau nilai akhir boleh digantikan dengan kata kunci span . Sebagai contoh, kotak biru tiga lajur dalam contoh di atas boleh dibuat dengan menambahkan mana-mana yang berikut ke item grid kelapan:

• grid-column: 3 / 6
• grid-column: -4 / -1
• grid-column: 3 / span 3
• grid-column: -4 / span 3
• grid-column: span 3 / -1
• dll.

Pada grid yang tidak responsif (iaitu lajur tetap), semua ini menghasilkan kesan yang sama (seperti dalam kotak biru dalam gambar di atas), tetapi jika grid responsif dan bilangan lajur berubah, perbezaannya mula muncul. Sesetengah rentang lajur boleh memusnahkan susun atur dengan grid aliran automatik, menjadikan kedua -dua teknologi kelihatan tidak serasi. Nasib baik, terdapat beberapa penyelesaian yang membolehkan kita berjaya menggabungkan kedua -duanya.

Tetapi pertama, kita perlu memahami masalahnya.

Masalah menatal sampingan melimpah

Berikut adalah beberapa bidang yang dicipta menggunakan simbol di atas:

Segala -galanya kelihatan baik pada lebar penuh (lima lajur), tetapi apabila diubah saiznya sehingga ia harus dua lajur, susun atur pecah seperti ini:

Seperti yang anda dapat lihat, grid kami tidak responsif dan walaupun bekas telah dikurangkan, grid cuba untuk menyimpan semua lima lajur. Untuk melakukan ini, ia meninggalkan cuba mengekalkan lajur lebar yang sama, dan grid melimpah dari sebelah kanan bekasnya, menyebabkan menatal mendatar.

Mengapa itu? Masalahnya ialah penyemak imbas cuba mematuhi garis grid eksplisit yang kami namakan. Pada lebar ini, grid penyesuaian automatik harus secara tersirat menunjukkan dua lajur, tetapi sistem penomboran garis grid kami bercanggah dengan dengan jelas merujuk garis grid kelima. Percanggahan ini membawa kepada kekacauan. Untuk memaparkan grid dua lajur tersirat dengan betul, satu -satunya nombor baris yang dibenarkan ialah 1, 2 dan 3 dan -3, -2, -1 seperti yang ditunjukkan di bawah:

Walau bagaimanapun, jika mana -mana item grid kami mengandungi rujukan grid-column yang berada di luar julat ini, seperti nombor garis grid 4, 5, atau 6 (atau -4, -5, atau -6), penyemak imbas menerima mesej campuran. Di satu pihak, kami memerlukannya untuk membuat lajur yang fleksibel secara automatik (ini secara tersirat memberi kami dua lajur di bawah lebar skrin ini), tetapi kami juga secara eksplisit merujuk garis grid yang tidak terdapat dalam grid dua lajur. Apabila terdapat konflik antara lajur yang tersirat (automatik) dan bilangan lajur yang jelas, grid sentiasa cenderung ke arah grid yang jelas ; Oleh itu, lajur yang tidak diingini dan limpahan mendatar berlaku (yang juga disebut sebagai kehilangan data CSS). Sama seperti menggunakan nombor garis grid, rentang juga boleh membuat lajur yang jelas. Oleh itu, grid-column: span 3 (item grid kelapan dalam demo) memaksa grid secara eksplisit mengadopsi sekurang-kurangnya tiga lajur, sementara kami mahu ia secara tersirat menunjukkan dua lajur.

Pada ketika ini, nampaknya satu -satunya cara ke hadapan adalah menggunakan pertanyaan media untuk menukar nilai grid-column pada lebar susun atur kami - tetapi tidak terlalu cepat! Inilah yang saya anggap pada mulanya. Walau bagaimanapun, selepas berfikir dengan lebih berhati -hati dan mencuba pelbagai pilihan, saya mendapati bahawa terdapat beberapa penyelesaian terhad yang berfungsi sepanjang jalan ke dua lajur, meninggalkan hanya satu pertanyaan media untuk mengendalikan susun atur lajur tunggal pada skrin sempit.

Penyelesaian

Saya menyedari bahawa silap mata adalah untuk menentukan rentang menggunakan hanya garisan grid yang muncul di grid sempit yang anda ingin paparkan. Dalam kes ini, ia adalah grid dua lajur. .

Pada mulanya saya fikir ini bermakna mengehadkan diri saya untuk menjangkau sehingga dua lajur, menggunakan gabungan berikut:

• grid column: span 2
• grid-column: 1 /3
• grid-column: -3 / -1

Ini tetap responsif sepanjang julat sehingga kedua -dua lajur:

Walaupun ini berfungsi, ia agak terhad dari sudut reka bentuk dan tidak begitu menarik. Saya mahu dapat membuat rentang yang tiga, empat, atau bahkan lima lajur lebar pada skrin besar. Tetapi apa? Pemikiran pertama saya adalah bahawa saya terpaksa beralih kepada pertanyaan media (tabiat lama yang baik, sukar untuk berubah!), Tetapi saya cuba menyingkirkan pendekatan ini dan berfikir tentang reka bentuk responsif dengan cara yang berbeza.

Melihat lagi apa yang boleh kita lakukan dengan hanya 1 hingga 3 dan -3 hingga -1, saya secara beransur -ansur menyedari bahawa saya boleh mencampurkan nombor positif dan negatif nilai permulaan dan akhir lajur grid, seperti 1/-3 dan 2/-2. Pada pandangan pertama, ini tidak kelihatan sangat menarik. Perkara berubah apabila anda menyedari kedudukan garis -garis ini apabila mengubah saiz grid: unsur -unsur yang merangkumi ini berubah lebar apabila saiz skrin berubah. Ini membuka satu set kemungkinan baru untuk lajur responsif: apabila skrin melebar, item lajur yang berlainan akan dibentangkan tanpa pertanyaan media.

Contoh pertama yang saya dapati ialah grid-column: 1/-1 . Ini menjadikan item rentang dari lajur pertama ke lajur terakhir di bawah semua kiraan lajur seperti spanduk lebar penuh. Ia juga berfungsi untuk lebar lajur!

Dengan menggunakan grid-column: 1/-2 , anda boleh membuat rentang hampir sejajar dengan selaras, yang selalu meninggalkan lajur item ke kanannya. Apabila menyempitkan ke dua lajur, ia secara respons menyusut ke satu lajur. Yang menghairankan, ia juga berfungsi apabila menyempit ke susun atur lajur tunggal. grid-column: 1/1 grid-column: 2/-1

Seterusnya saya cuba 1/-3 dan ia berfungsi dengan baik pada skrin yang lebih luas, menunjukkan sekurang-kurangnya tiga lajur dan satu lajur pada skrin yang lebih kecil. Saya fikir ia akan melakukan sesuatu yang pelik pada dua grid lajur, kerana garis grid pertama adalah sama dengan garis grid -3. Saya terkejut, ia masih memaparkan biasanya sebagai satu item lajur.

Selepas banyak percubaan, saya dapati sebelas nilai lajur grid yang mungkin, menggunakan nombor garis grid dari dua grid. Anehnya, tiga daripadanya berfungsi dengan baik sehingga susun atur lajur tunggal. Tujuh yang lain boleh berfungsi sepanjang jalan ke dua lajur, hanya satu pertanyaan media yang diperlukan untuk mengendalikan paparan lajur tunggal.

Inilah senarai penuh:

Seperti yang anda lihat, sementara ini adalah subset terhingga dari semua kemungkinan responsif, sebenarnya terdapat banyak kemungkinan.

• 2/-2 adalah menyeronokkan kerana ia mewujudkan rentang berpusat yang berfungsi dengan baik sehingga lajur!
• 3/-1 adalah yang paling tidak berguna kerana ia boleh menyebabkan limpahan walaupun dalam dua lajur.
• 3/-3 adalah kejutan.

Dengan menggunakan pelbagai nilai grid-column dalam senarai ini, anda boleh membuat susun atur yang menarik dan penuh responsif. Untuk paparan lajur tunggal yang paling sempit, menggunakan pertanyaan media tunggal, kami boleh menggunakan sepuluh corak span lajur grid yang berbeza.

Pertanyaan media tunggal lajur biasanya mudah juga. Satu di demo akhir ini mengembalikan Flexbox pada skrin yang lebih kecil:

 <code>@media (max-width: 680px) { .archive { display: flex; flex-direction: column; } .article { margin-bottom: 2em; } }</code>

Ini adalah grid terakhir, yang, seperti yang anda lihat, benar -benar responsif dari satu lajur hingga lima lajur:

Ulangi Panjang Panjang Variabel dengan: Nth-Child ()

Trik terakhir yang saya gunakan untuk mengurangkan kod kepada lebih daripada dua puluh baris adalah :nth-child(n) , yang saya gunakan untuk gaya pelbagai item dalam grid. Saya mahu gaya span saya digunakan untuk pelbagai item dalam suapan saya supaya kotak pos yang dipaparkan muncul secara teratur di halaman. Pertama, saya menggunakan senarai pemilih yang dipisahkan koma seperti berikut:

 <code>.article:nth-child(2), .article:nth-child(18), .article:nth-child(34), .article:nth-child(50) { background-color: rgba(128,0,64,0.8); grid-column: -3 / -1; }</code>

Tetapi saya dengan cepat mendapati ini menjadi masalah, terutamanya apabila saya perlu mengulangi senarai ini untuk setiap elemen kanak -kanak yang saya mahu gaya dalam setiap tajuk seperti jawatan, pautan, dan lain -lain. Semasa prototaip, jika saya mahu bermain -main dengan kedudukan yang merangkumi unsur -unsur, saya perlu mengubah nombor secara manual dalam senarai ini, yang kedua -duanya adalah susah payah dan kesilapan.

Pada masa itu saya menyedari bahawa saya boleh menggunakan ciri yang kuat :nth-child dan bukannya integer mudah seperti yang saya gunakan dalam senarai di atas. :nth-child(n) juga boleh mengambil persamaan, seperti :nth-child(2n 2) , yang akan mencari setiap elemen anak kedua.

Berikut adalah cara membuat panel lebar penuh biru di grid saya menggunakan :nth-child([公式]) yang muncul di bahagian atas halaman dan ulangi di bawah halaman:

 <code>.article:nth-child(31n 1) { grid-column: 1 / -1; background: rgba(11, 111, 222, 0.5); }</code>

Bit (31N 1) dalam kurungan memastikan bahawa subitem pertama, ke -32, ke -63 dan lain -lain dipilih. Penyemak imbas menjalankan gelung, bermula dengan n = 0 (dalam kes ini, 31 0 1 = 1), kemudian n = 1 (31 1 1 = 32), maka n = 2 (31 * 2 1 = 63). Dalam kes terakhir, penyemak imbas menyedari bahawa tidak ada anak ke -63, jadi ia mengabaikannya, menghentikan gelung, dan menggunakan CSS untuk anak pertama dan ke -32.

Saya melakukan sesuatu yang serupa dengan kotak ungu yang muncul secara bergantian dari kanan ke kiri:

 <code>.article:nth-child(16n 2) { grid-column: -3 / -1; background: rgba(128, 0, 64, 0.8); } .article:nth-child(16n 10) { grid-column: 1 / -2; background: rgba(128, 0, 64, 0.8); }</code>

Pemilih pertama digunakan untuk kotak ungu di sebelah kanan. 16n 2 Pastikan gaya digunakan untuk setiap projek grid ke -16, bermula dengan projek kedua.

Pemilih kedua mengesan kotak di sebelah kanan. Ia menggunakan jarak yang sama (16n), tetapi offset adalah berbeza (10). Akibatnya, kotak -kotak ini akan muncul secara teratur di sebelah kanan item grid seperti 10, 26, dan 42.

Apabila ia datang kepada gaya visual barang -barang mesh dan kandungan mereka, saya menggunakan helah lain untuk mengurangkan pertindihan. Untuk gaya yang dikongsi oleh kedua-dua kotak (contohnya, background-color ), anda boleh menggunakan pemilih tunggal untuk mencari kedua-dua:

 <code>.article:nth-child(8n 2) { background: rgba(128, 0, 64, 0.8); /* 其他共享樣式*/ }</code>

Ini akan mencari item 2, 10, 18, 26, 34, 42, 50, dan sebagainya. Dengan kata lain, ia memilih dua kotak ciri di sebelah kiri dan kanan.

Ia berfungsi kerana 8N adalah separuh daripada 16N dan kerana offset yang digunakan dalam dua pemilih berasingan berbeza dengan 8 (iaitu perbezaan antara 10 dan 2 adalah 8)

Pemikiran terakhir

Pada masa ini, grid CSS boleh digunakan untuk membuat grid responsif yang fleksibel dengan kod minimum, tetapi ini mempunyai beberapa batasan penting untuk mencari unsur -unsur tanpa menggunakan langkah -langkah mundur pertanyaan media.

Ia akan menjadi baik untuk dapat menentukan rentang yang tidak memaksa limpahan pada skrin yang lebih kecil. Pada masa ini, kami sebenarnya memberitahu penyemak imbas, "Sila buat grid responsif", yang sangat indah dilakukan. Tetapi apabila kita meneruskan, "Oh, dan buat item grid ini merangkumi empat lajur", ia mendapat tantrums pada skrin sempit, mengutamakan empat permintaan rentang lajur ke atas grid responsif. Adalah baik untuk dapat memberitahu grid untuk mengutamakan respons terhadap permintaan span kami. Sama dengan ini:

 <code>.article { grid-column: span 3, autofit; }</code>

Satu lagi masalah dengan grid responsif adalah baris terakhir. Apabila lebar skrin berubah, baris terakhir sering tidak diisi. Saya telah menghabiskan masa yang lama mencari cara untuk membuat rentang item grid terakhir (dan dengan itu mengisi) lajur yang tinggal, tetapi nampaknya anda tidak boleh melakukannya dalam grid pada masa ini. Ia akan menjadi lebih baik jika kita boleh menggunakan kata kunci seperti auto untuk menentukan kedudukan permulaan projek, yang bermaksud "sila letakkan kelebihan kiri di mana sahaja ia jatuh". Sama dengan ini:

 <code>.article { grid-column: auto, -1; }</code>

... Ini akan menyebabkan kelebihan kiri ke hujung garisan.

Atas ialah kandungan terperinci Susun atur majalah grid responsif hanya dalam 20 baris CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!