Modul CSS Multi-column Layout moćan je alat koji vam omogućuje jednostavno stvaranje izgleda s više stupaca za vaše web stranice. Porast responzivnog dizajna znači da je važno razumjeti kako koristiti ovaj modul.
Svojstva stupaca možete koristiti za stvaranje fleksibilnih i dinamičnih izgleda koji se prilagođavaju različitim veličinama zaslona.
Određivanje broja stupca, širine i razmaka
Da biste stvorili odgovarajući raspored s više stupaca za sadržaj vaše stranice, trebali biste početi odlučivanjem o tome koliko stupaca želite da obuhvati. Jedno od najvažnijih svojstava u modulu s više stupaca je brojanje stupaca svojstvo, koje koristite za postavljanje broja stupaca na koje želite podijeliti sadržaj.
Na primjer:
.kontejner {
brojanje stupaca: 3;
}
Također možete odrediti širinu i razmak stupaca. Možete postaviti vrijednost širine stupca pomoću bilo koje od podržane CSS jedinice Kao px, em, ili %.
Ako širina stupca postavljeno je na auto, preglednik će izračunati širinu svakog stupca na temelju brojanje stupaca imovinu i raspoloživi prostor unutar vašeg rasporeda.
Na primjer, ovaj CSS izjavljuje 3 stupaca, svaki sa širinom od 200 piksela:
.kontejner {
brojanje stupaca: 3;
širina stupca: 200px;
}
The stupac-gap svojstvo specificira razmak ili razmak između stupaca u rasporedu s više stupaca. Postavit će veličinu praznih prostora između susjednih stupaca i može uzeti vrijednost duljine u pikselima, em ili bilo kojim drugim podržanim jedinicama.
Na primjer:
.kontejner {
brojanje stupaca: 3;
stupac-gap: 20px; /* postavlja razmak između stupaca na 20 piksela */
}
Prema zadanim postavkama, vrijednost stupac-gap postavljeno je na normalan. Vaš preglednik odabire ovu vrijednost kako bi postigao dosljedan razmak između stupaca u vašem izgledu, a da pritom ostane vizualno ugodan. Ova vrijednost također može varirati između preglednika i također može ovisiti o veličini fonta, visini retka, pozicija imovinei druga svojstva izgleda sadržaja stupaca.
Provjera ravnoteže stupaca
CSS stupci pokušavaju popuniti sav raspoloživi prostor unutar izgleda. To ponekad može rezultirati stupcima koji imaju znatno različite visine, zbog čega izgled izgleda neravnomjerno.
Da biste uravnotežili stupce, trebali biste osigurati da svaki stupac u vašem izgledu ima približno istu količinu sadržaja.
To možete postići postavljanjem CSS-a popuniti stupac vlasništvo na ravnoteža. Preglednik će zatim pokušati ravnomjerno rasporediti sadržaj po svim stupcima tako da budu otprilike iste visine.
The popuniti stupac svojstvo je postavljeno na ravnoteža prema zadanim postavkama, ali vrijednost od auto će promijeniti ovo ponašanje. Korištenje auto raspodjeljuje sadržaj po stupcima na temelju dostupnog prostora. To može rezultirati nejednakim razmakom između stupaca i nejednakom visinom stupaca. Može čak proizvesti izgled s praznim stupcima.
Evo primjera kako koristiti popuniti stupac svojstvo za uravnoteženje stupaca u rasporedu s više stupaca:
.izgled s više stupaca {
brojanje stupaca: 3;
stupac-gap: 20px;
popuniti stupac: ravnoteža;
}
U ovom primjeru imamo raspored s više stupaca s tri stupca i razmakom od 20 piksela između svakog stupca. Postavljanjem popuniti stupac vlasništvo na ravnoteža, osiguravamo da se sadržaj ravnomjerno raspoređuje po stupcima, što rezultira uravnoteženom visinom stupaca.
Važno je napomenuti da je popuniti stupac svojstvo možda neće dobro funkcionirati za sve izglede i može rezultirati nejednakim razmakom između stupaca. U takvim slučajevima, možda ćete morati koristiti JavaScript za ručno balansiranje stupaca. Ne zaboravite slijediti najbolje prakse i koristite progresivno poboljšanje tako da se ne oslanjate na JavaScript.
Sve zajedno
Možete spojiti sve što ste naučili o implementaciji izgleda s CSS stupcima i koristiti to za izradu izgleda u stilu časopisa.
Najprije stvorite osnovnu HTML strukturu. Upotrijebite element spremnika da omotate svoj sadržaj, a zatim stvorite nekoliko podređenih elemenata koje zatim možete postaviti u stupce.
html>
<html>
<glava>
<vezarel="list stilova"href="CSScolumns.css" />
glava>
<tijelo>
Element spremnika
<divrazreda="izgled časopisa">Elementi djeteta
<divrazreda="članak">
<h2>Naslov člankah2><str>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sjedi unutra
magna vel lorem pharetra bibendum.str>
div><divrazreda="članak">
<h2>Naslov člankah2><str>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sjedi unutra
magna vel lorem pharetra bibendum.str>
div><divrazreda="članak">
<h2>Naslov člankah2><str>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sjedi unutra
magna vel lorem pharetra bibendum.str>
div>
div>
tijelo>
html>
Da biste izradili izgled u stilu časopisa pomoću modula CSS Multi-column, kombinirajte brojanje stupaca, širina stupca, stupac-gap, i popuniti stupac Svojstva:
.časopis-prijelom {
brojanje stupaca: 3;
širina stupca: 300px;
stupac-gap: 20px;
popuniti stupac: ravnoteža;
}
.članak {
boja pozadine: #f8f8f8;
granični radijus: 4px;
kutija-sjena: 0 2px 4pxrgba(0, 0, 0, 0.1);
podstava: 10px;
provala unutra: izbjegavati-stupac;
}
Ovaj primjer također definira provala unutra vlasništvo na .članak razreda, s vrijednošću od izbjegavati-stupac. Svojstvo osigurava da svaki članak ostane unutar jednog stupca, umjesto da se dijeli na više stupaca. Evo kako bi izgled trebao izgledati:
Korištenje rezervnih opcija za nepodržane preglednike
Važno je napomenuti da je brojanje stupaca svojstvo nije podržano u svim preglednicima. Preglednici koji ne podržavaju brojanje stupaca, umjesto toga će prikazati sadržaj u jednom stupcu.
Za pružanje zamjenskih stilova za nepodržane preglednike, možete koristiti upite značajki kao što su @podržava otkriti podršku za brojanje stupaca svojstvo i pružiti alternativne stilove kada svojstvo nije podržano.
Na primjer:
.kontejner {
/* Zamjena za preglednike koji ne podržavaju brojanje stupaca */
širina: 100%;
}
/* Otkrij podršku za broj stupaca */
@podržava (broj stupaca:3) {
.kontejner {
brojanje stupaca: 3;
}
}
U ovom primjeru koristimo @podržava upit značajke za otkrivanje podrške za brojanje stupaca vlasništvo. Ako preglednik podržava brojanje stupaca, spremnik element će se prikazati u tri stupca. Ako preglednik ne podržava brojanje stupaca, prikazat će sadržaj u jednom stupcu pomoću širina vlasništvo.
Razbijanje sadržaja u stupce
Općenito, CSS stupci pružaju praktičan i moćan način za stvaranje fleksibilnih i responzivnih izgleda s više stupaca koji poboljšavaju upotrebljivost i korisničko iskustvo web sadržaja.
Koristeći CSS stupce i JavaScript zajedno, možete stvoriti još sofisticiranije i dinamičnije izglede koji se prilagođavaju različitim korisničkim postavkama i veličinama uređaja, čineći vaš web sadržaj pristupačnijim i privlačnijim za vaše korisnike.
