Kanggo pirang-pirang taun, CSS ngambang wis dadi komponen sing apik, nanging perlu kanggo nggawe tata letak situs web. Yen rancangan sampeyan disebut kanggo macem-macem kolom, sampeyan nguripake kanggo ngambang . Masalah karo metode iki yaiku, sanajan ing kecerdasan sing luar biasa, para perancang / developer web wis nampilake nggawe tata letak situs rumit, CSS ngambang ora bener digunakake kanggo cara iki.
Nalika ngambang lan posisi CSS mesthi duwe panggonan ing desain web sajrone bertahun-tahun teka, teknik tata letak sing luwih anyar, kayata CSS Grid lan Flexbox saiki menehi para desainer web cara anyar kanggo nggawe tata letak situs. Teknik tata letak sing anyar sing nuduhake potensial akeh yaiku CSS Multiple Columns.
CSS Columns wis pirang-pirang taun kepungkur, nanging ora nduweni dukungan ing browser lawas (utamane versi Internet Explorer paling lawas) wis nyimpen akeh profesional web saka nggunakake gaya iki ing karya produksi.
Kanthi mburi dhukungan kanggo versi IE sing lawas, sawetara perancang web saiki nyoba nganggo opsi tata letak CSS sing anyar, CSS Columns klebu, lan nemokake yen dheweke duwe kontrol luwih akeh karo pendekatan anyar iki tinimbang karo ngambang.
Dasar CSS Columns
Minangka jeneng menehi saran, CSS Multiple Columns (uga dikenal minangka layout CSS3 multi-kolom) ngijini sampeyan kanggo nyebar isi menyang nomer set kolom. Sifat CSS paling dhasar sing bakal digunakake yaiku:
- column-count
- kolom-gap
Kanggo kolom-count, sampeyan nemtokake nomer kolom sampeyan pengin. Kesenjangan kolom adalah selokan atau jarak antara kolom-kolom tersebut. Browser bakal njupuk nilai kasebut lan pamisah isi kanthi rutin menyang nomer kolom sing sampeyan nemtokake.
Conto umum CSS sawetara kolom ing laku bakal kanggo pamisah blok isi teks menyang macem-macem kolom, padha karo apa sing bakal katon ing artikel koran. Ngomong duwe markup HTML ing ngisor iki (delengen, umpamane tujuan, aku mung sijine wiwitan siji paragraf, nalika ing prakteke ana kemungkinan sawetara paragraf isi ing markup iki):
Judhul artikelmu
Mbayangno akeh paragraf teks kene ...
Yen sampeyan nulis gaya CSS kasebut:
.content {-moz-column-count: 3; -webkit-column-count: 3; kolom-count: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; kolom-gap: 30px; }Aturan CSS iki bakal pamisah divisi "isi" dadi 3 kolom sing padha karo jarak antarane 30 piksel. Yen sampeyan pengin loro kolom tinimbang 3, sampeyan mung bakal ngganti nilai kasebut lan browser bakal ngetung lebar anyar saka kolom-kolom sing dipisahake kanthi rutin. Wara-wara yen kita nggunakake fitur prefixed vendor dhisik, diiringi deklarasi sing ora di-prefixed.
Kaya gampang, iki dienggo nganggo cara sing bisa ditrapake kanggo panggunaan situs web. Ya, sampeyan bisa pamisah soko isi menyang macem-macem kolom, nanging iki ora bisa dadi pengalaman maca sing paling apik kanggo Web, luwih-luwih yen dhuwur kolom kasebut mudhun ing "layar" layar.
Pembaca bakal banjur nggulung munggah lan mudhun kanggo maca isi lengkap. Nanging, pokok CSS Columns gampang kaya sing katon ing kene, lan bisa digunakake kanggo nglakoni luwih akeh tinimbang mung nggragi isi sawetara paragraf - bisa, senadyan digunakake kanggo tata letak.
Layout Kanthi CSS Columns
Ngomongake sampeyan duwe kaca web kanthi area isi sing nduweni 3 kolom isi. Iki minangka tata letak situs web sing khas, lan kanggo entuk 3 kolom kasebut, sampeyan biasane bisa ngapusi bagean-bagian sing ana. Kanthi CSS multi-column, dadi luwih gampang.
Punika sawetara conto HTML:
Latest News
Saka Blog Kita
Konten bakal pindhah nang kene ...
Upcoming Events
p>
CSS kanggo nggawe kolom macem-macem iki diwiwiti karo sing katon sadurunge:
.content {-moz-column-count: 3; -webkit-column-count: 3; kolom-count: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; kolom-gap: 30px; }Saiki, tantangan ing kene yaiku, amarga browser kepengin mbagi isi kasebut sacara merata, saupama manawa bagean saka bagean iki beda, browser kasebut bakal nyilikake isi saka divisi individu, nambahake wiwitan kasebut dadi siji kolom lan banjur terus menyang liyane (sampeyan bisa ndeleng iki kanthi nggunakake kode iki kanggo mbukak eksperimen lan nambah tingkatane isi sing beda ing saben divisi)!
Iku ora apa sampeyan pengin. Sampeyan pengin saben divisi iki kanggo nggawe kolom sing béda lan, ora kira ukuran gedhe utawa cilik sing divisi ana, sampeyan ora pengin pamisah. Sampeyan bisa entuk iki kanthi nambahake baris tambahan iki saka CSS:
.content div {display: inline-block; }Iki bakal meksa supaya bagean-bagian sing ana ing "isi" tetep utuh sanajan browser dibagi dadi sawetara kolom. Luwih apik, amarga kita ora menehi apa-apa ing kene kanthi cepet, kolom kasebut kanthi otomatis bakal ganti ukuran kanthi otomatis, nggawe aplikasi becik kanggo situs web sing responsif . Kanthi gaya "inline-block" ing panggonan, saben 3 bagean sampeyan bakal dadi isi sing béda.
Nggunakake Column-Width
Ana properti liyane kajaba "kolom-count" sing bisa digunakake, lan gumantung saka kabutuhan tata letak, mestine bisa dadi pilihan sing luwih apik kanggo situs sampeyan. Iki "jembar kolom". Nggunakake markup HTML sing padha kaya sing dituduhake sadurunge, kita bisa nindakake iki karo CSS kita:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; width-width: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; kolom-gap: 30px; } .content div {display: inline-block; }Cara sing dianggo iki yaiku menawa browser nganggo "kolom-width" minangka nilai maksimum kolom kasebut. Dadi yen jendhela browser kurang saka 500 piksel, 3 bagean kasebut bakal katon ing kolom siji, salah sijine puncak liyane. Iki minangka tata letak khas sing digunakake kanggo tata letak layar seluler / cilik.
Minangka sudhut browser mundhak dadi cukup gedhe supaya pas karo 2 kolom bebarengan karo kesenjangan kolom sing ditemtokake, browser bakal kanthi otomatis pindhah saka tata letak kolom siji menyang rong kolom. Tansah nambah lebar layar lan pungkasanipun, sampeyan bakal entuk desain 3 kolom, kanthi saben 3 bagean kita ditampilake ing kolom dhewe. Maneh, iki cara sing apik kanggo entuk sawetara tontonan sing ramah , multi-piranti , lan sampeyan malah ora perlu nggunakake pitakon media kanggo ngganti gaya tata letak!
Properties Column Liyane
Saliyane sifat sing ditrapake ing kene, ana uga situs kanggo "kolom-aturan", kalebu werna, gaya, lan ukuran jembar sing ngidini sampeyan nggawe aturan antarane kolom sampeyan. Iki bakal digunakake tinimbang wates yen sampeyan pengin duwe sawetara baris pamisahan kolom sampeyan.
Wektu kanggo eksperimen
Saiki, CSS Multiple Column Layout uga didukung banget. Kanthi prefiks, luwih saka 94% pangguna web bakal bisa ndeleng gaya iki, lan klompok sing ora didukung bakal dadi versi sing luwih lawas saka Internet Explorer sing mbokmenawa ora ndhukung maneh.
Kanthi tingkat dhukungan iki saiki, ora ana alesan ora kanggo miwiti nganggo CSS Columns lan nggayuh gaya kasebut ing situs web siap produksi. Sampeyan bisa miwiti eksperimen kanthi nggunakake HTML lan CSS sing diwenehi ing artikel iki lan muter-muter karo nilai-nilai sing beda kanggo ndeleng apa sing paling apik kanggo kabutuhan situs.