Shekaru da yawa, CSS floats sun kasance wani finicky, duk da haka dole, bangaren a samar da shimfidu yanar gizo. Idan zanenka ya buƙaci ginshiƙai masu yawa, sai kun juya zuwa tudu . Matsalar ta wannan hanyar ita ce, duk da fahimta mai ban mamaki da masu zanen yanar gizo / masu ci gaba da yanar gizo suka nuna a cikin samar da shimfiɗar shafin yanar gizon, CSS ba'a nufin amfani da wannan hanya ba.
Yayinda lokuta na CSS da CSS sun kasance sun kasance a cikin zane na yanar gizo don shekaru masu zuwa, sababbin hanyoyin fasaha da suka hada da CSS Grid da Flexbox suna ba masu zanen yanar gizo sababbin hanyoyi don ƙirƙirar shimfida wuraren su. Wani sabon fasaha wanda ya nuna kuri'a mai yawa shine CSS Multiple Columns.
CSS ginshiƙai sun kasance a kusa da 'yan shekaru a yanzu, amma rashin goyon baya ga masu bincike na tsofaffi (yafi tsofaffi na Intanet Explorer) ya kiyaye yawancin kwararru na yanar gizo daga amfani da wadannan sifofi a aikin su.
Tare da ƙarshen goyon baya ga waɗannan tsofaffi na IE, wasu masu zanen yanar gizo yanzu suna gwaji tare da sabon zaɓuɓɓukan layi na CSS, CSS ginshiƙan da aka haɗa, da kuma gano cewa suna da iko sosai tare da waɗannan sababbin hanyoyin fiye da yadda suke yi tare da masu ruwa.
Manufofin CSS ginshiƙai
Kamar yadda sunansa ya nuna, CSS Multiple Columns (wanda aka sani da launi na CSS3 multi-shafi) yana ba ka damar raba abubuwan ciki zuwa ginshiƙai da dama. Mafi kyawun CSS kaddarorin da za ku yi amfani da su shine:
- Ƙididdiga-shafi
- ramin-shafi
Don ƙididdiga-shafi, kuna saka adadin ginshiƙai da kuke so. Rashin gadon zai zama gutters ko jeri tsakanin waɗannan ginshiƙai. Mai bincike zai dauki waɗannan dabi'un kuma ya raba abubuwan a ciki har zuwa yawan ginshiƙai da ka saka.
Misali na yau da kullum na CSS ginshiƙai a cikin aikin zai kasance don raba wani ɓangaren rubutu a cikin ginshiƙai masu yawa, kama da abin da za ku gani a cikin jarida. Ka ce kuna da samfurin HTML ɗin nan (lura cewa, misali dalilai, zan sa farkon farkon sakin layi, yayin da yake yin aiki za'a iya samun sassan layi na cikin wannan alamar):
Rubutun labarinku
Yi la'akari da yawancin sassan layi na rubutu a nan ...
Idan ka sa'an nan kuma rubuta wadannan CSS styles:
.content {-moz-column-count: 3; -didin-shafi-shafi-count: 3; Ƙididdiga-shafi: 3; -moz-shafi-rata: 30px; -dabin-shafi-rukuni: 30px; ramin-rata: 30px; }Wannan tsarin CSS zai raba ragowar "abun ciki" a cikin ginshiƙai guda uku tare da rata na 30 pixels tsakanin su. Idan kuna so ginshiƙai guda biyu maimakon 3, za ku sauya wannan darajar kuma mai bincike zai lissafa sababbin kusurwar waɗannan ginshiƙai don raba abubuwan ciki har ma. Lura cewa muna amfani da dukiyar da aka tanada kantin sayar da kayayyaki da farko, sannan bayan bayanan da ba a riga sun bayyana ba.
Kamar sauƙi kamar yadda wannan yake, amfani da shi ta wannan hanya yana da wuyar amfani don amfani da yanar gizon. Haka ne, za ka iya raba gungun abun ciki zuwa ginshiƙai masu yawa, amma wannan bazai zama mafi kyawun kwarewa na yanar gizon ba, musamman idan tsawo daga cikin wadannan ginshiƙai na ƙasa a ƙarƙashin "ninka" na allon.
Masu karatu za su kasance a gungurawa sama da kasa don karanta cikakken abun ciki. Duk da haka, babban mahimman CSS ginshiƙan yana da sauƙi kamar yadda kake gani a nan, kuma za'a iya amfani da shi don yin yawa fiye da rarraba abubuwan da wasu sassan keyi kawai - ana iya amfani dasu don shimfidawa.
Layout tare da CSS ginshiƙai
Ka ce kana da shafin yanar gizon tare da yanki wanda ke da 3 ginshiƙai na abun ciki. Wannan wata tashar yanar gizon da ta dace sosai, da kuma cimma wadannan ginshiƙan guda uku, za ku sauko da sauye-shiryen da suke ciki. Tare da CSS masu yawa-ginshiƙai, yana da sauki.
Ga wasu samfurin HTML: