Si të përdorni CSS Columns për Multi-Column Website Layouts

Për shumë vite, CSS floats kanë qenë një komponent finicky, por e nevojshme, në krijimin e faqeve të internetit. Nëse dizajni juaj thirri kolona të shumëfishta, ju u kthyet në gjithandej . Problemi me këtë metodë është se, pavarësisht nga zgjuarsija e pabesueshme që web designers / developers kanë treguar në krijimin e faqeve komplekse të site-it, CSS floats kurrë nuk ishin menduar me të vërtetë për t'u përdorur në këtë mënyrë.

Ndërsa floats dhe CSS pozicionimi janë të sigurtë se do të kenë një vend në web design për shumë vite që do të vijnë, teknikat më të reja të paraqitjes, duke përfshirë CSS Grid dhe Flexbox tani po u japin web designers mënyra të reja për të krijuar Layouts e tyre të faqes. Një tjetër teknikë e paraqitjes së re që tregon shumë potencial është Kolona të shumëfishtë CSS.

CSS Columns kanë qenë rreth e rrotull për disa vite tani, por mungesa e mbështetjes në shfletuesit më të vjetër (kryesisht versionet më të vjetra të Internet Explorer) ka mbajtur shumë profesionistë të internetit duke përdorur këto stile në punën e tyre të prodhimit.

Me fundin e mbështetjes për ato versione më të vjetra të IE, disa dizajnerë të web-it tani po eksperimentojnë me opsione të reja të paraqitjes së CSS, përfshirë Kolonat e CSS dhe gjetjen se ata kanë kaq shumë kontroll më të madh me këto qasje të reja sesa ato me gjithandej.

Bazat e CSS Columns

Siç sugjeron emri i saj, kolona të shumëfishta CSS (e njohur edhe si faqosja me shumë kolona CSS3) ju lejon të ndani përmbajtjen në një numër të caktuar të kolonave. Pronat më themelore CSS që do të përdorni janë:

Për numërimin e kolonës, specifikoni numrin e kolonave që dëshironi. Hendeku i kolonës do të ishte ulluqet ose hapësira ndërmjet atyre kolonave. Shfletuesi do të marrë këto vlera dhe do të ndajë përmbajtjen në mënyrë të barabartë në numrin e kolonave që ju specifikoni.

Një shembull i zakonshëm i kolonave të shumta të CSS në praktikë do të ishte ndarja e një blloku të përmbajtjes së tekstit në kolona të shumta, të ngjashme me ato që do të shihnit në një artikull të gazetës. Thuaj që keni kodin e mëposhtëm HTML (vini re se për shembull, unë po vendos vetëm një paragraf, ndërsa në praktikë ka gjasa të ketë paragrafë të shumëfishta të përmbajtjes në këtë shenjë):

Imagjinoni shumë paragrafë të tekstit këtu ...

Nëse pastaj shkruani këto stile CSS:

.content {-moz-column-count: 3; -webkit-kolona-numërim: 3; numri i kolonës: 3; -moz-kolona-hendeku: 30px; -webkit-column-gap: 30px; hendeku i kolonës: 30px; }

Ky rregull CSS do të ndante ndarjen "përmbajtje" në 3 kolona të barabarta me një hendek prej 30 pikseli mes tyre. Nëse dëshironi dy kolona në vend të 3, thjesht do të ndryshoni atë vlerë dhe shfletuesi do të llogarisë gjerësitë e reja të këtyre kolonave për të ndarë materialin në mënyrë të barabartë. Vini re se ne përdorim fillimisht pronat e shitësit-prefixed, të ndjekur nga deklaratat e paregjistruara.

Sa e lehtë sa kjo është, përdorimi i saj në këtë mënyrë është i diskutueshëm për përdorimin e faqes. Po, mund të ndash një grumbull të përmbajtjes në kolona të shumta, por kjo nuk mund të jetë përvoja më e mirë e leximit për Uebin, veçanërisht nëse lartësia e këtyre kolonave bie nën "dele" të ekranit.

Atëherë lexuesit do të duhet të lëviznin lart e poshtë për të lexuar përmbajtjen e plotë. Prapëseprapë, principi i kolonave CSS është aq e lehtë sa e shihni këtu dhe mund të përdoret për të bërë shumë më tepër sesa thjesht ndarjen e përmbajtjes së disa paragrafëve - mund të përdoret me të vërtetë për paraqitjen.

Layout Me CSS Columns

Thuaj që ke një faqe interneti me një zonë përmbajtjeje që ka 3 kolona të përmbajtjes. Ky është një paraqitje shumë tipike e faqeve të internetit, dhe për të arritur ato 3 kolona, ​​normalisht do të notonit ndarjet që janë në. Me shumë kolona të CSS, është shumë më e lehtë.

Këtu është një shembull HTML:

Përmbajtja do të shkonte këtu ...

Përmbajtja do të shkonte këtu ...

Përmbajtja do të shkonte këtu ...

p>

CSS për të bërë këto kolona të shumta fillon me atë që patë më parë:

.content {-moz-column-count: 3; -webkit-kolona-numërim: 3; numri i kolonës: 3; -moz-kolona-hendeku: 30px; -webkit-column-gap: 30px; hendeku i kolonës: 30px; }

Tani, sfida këtu është se, meqë shfletuesi dëshiron ta ndajë këtë përmbajtje në mënyrë të barabartë, kështu që nëse përmbajtja e këtyre divizioneve është e ndryshme, ai shfletues do të ndajë përmbajtjen e një divizioni individual, duke shtuar fillimin e tij në një kolonë dhe pastaj vazhdoni në një tjetër (ju mund ta shihni këtë duke përdorur këtë kod për të drejtuar një eksperiment dhe për të shtuar gjatësi të ndryshme të përmbajtjes brenda secilës ndarje)!

Kjo nuk është ajo që ju dëshironi. Ju dëshironi që secila prej këtyre ndarjeve të krijojë një kolonë të dallueshme dhe, pavarësisht se sa e madhe apo e vogël mund të jetë përmbajtja e një divizioni individual, nuk do ta dëshironi kurrë të ndahet. Këtë mund ta arrini duke shtuar këtë vijë shtesë të CSS:

.content div {display: inline-block; }

Kjo do t'i detyrojë ato ndarje që janë brenda "përmbajtjes" të mbeten të paprekura edhe pse shfletuesi e ndan këtë në kolona të shumta. Edhe më mirë, meqë nuk kemi dhënë ndonjë gjë këtu, një gjerësi fikse, këto kolona do të ndryshojnë automatikisht kur shfletuesi të ndryshohet, duke i bërë ata një aplikim ideal për faqet e internetit të përgjegjshme . Me atë stil "inline-block" në vend, secila prej 3 divizioneve tuaja do të jetë një kolonë e dallueshme e përmbajtjes.

Përdorimi i kolonës-Gjerësia

Ekziston edhe një tjetër pronë përveç "numërimit të kolonës" që mund të përdorni, dhe varësisht nga nevojat tuaja të paraqitjes, mund të jetë një zgjedhje më e mirë për faqen tuaj. Kjo është "gjerësia e kolonës". Duke përdorur të njëjtën shenjë HTML si më parë, ne mund ta bëjmë këtë me CSS-në tonë:

.content {-moz-column-width: 500px; -webkit-kolona width: 500px; gjerësia e kolonës: 500px; -moz-kolona-hendeku: 30px; -webkit-column-gap: 30px; hendeku i kolonës: 30px; }. përmbajtja div {display: inline-block; }

Mënyra që funksionon është se shfletuesi përdor këtë "gjerësi kolone" si vlerën maksimale të asaj kolone. Pra, nëse dritarja e shfletuesit është më e vogël se 500 piksele, këto 3 ndarje do të shfaqen në një kolonë të vetme, një nga majat e një tjetri. Ky është një paraqitje tipike që përdoret për paraqitjen e celularit / ekranit të vogël.

Ndërsa gjerësia e shfletuesit rritet për të qenë mjaft e madhe për t'u përshtatur me 2 kolona së bashku me boshllëqet e specifikuara të kolonës, shfletuesi do të shkojë automatikisht nga një shtrirje e vetme e kolonës në dy kolona. Mbani rritjen e gjerësisë së ekranit dhe përfundimisht, do të merrni një dizajn me 3 kolona, ​​me secilën nga ndarjet tona 3 të shfaqura në kolonën e tyre. Përsëri, kjo është një mënyrë e shkëlqyeshme për të marrë disa struktura të përgjegjshme dhe shumë miqësore , dhe as nuk duhet të përdorësh pyetje mediale për të ndryshuar stilet e paraqitjes!

Prona të Tjera Column

Përveç pronave të mbuluara këtu, ka edhe prona për "rregulli i kolonës", duke përfshirë vlerat e ngjyrave, stilit dhe gjerësisë që ju lejon të krijoni rregulla midis kolonave tuaja. Këto do të përdoren në vend të kufijve nëse doni të keni disa linja që ndajnë kolonat tuaja.

Koha për të eksperimentuar

Aktualisht, Layout Multiple Column CSS është mbështetur shumë mirë. Me prefikset, mbi 94% e përdoruesve të internetit do të ishin në gjendje të shohin këto stile dhe ky grup i pambështetur do të ishte me të vërtetë vetëm versione shumë më të vjetra të Internet Explorer, të cilat ju nuk mund të mbështeteni më.

Me këtë nivel të mbështetjes që është tani, nuk ka asnjë arsye të mos fillosh të eksperimentosh me CSS Columns dhe t'i vendosësh këto stile në faqet e internetit të gatshme për prodhim. Mund të filloni eksperimentet duke përdorur HTML dhe CSS të paraqitur në këtë artikull dhe të luani rreth me vlera të ndryshme për të parë se çfarë do të funksionojë më së miri për nevojat e faqeve të faqes tuaj.