Când și cum să utilizați aspectul cu mai multe coloane CSS

În toată entuziasmul legat de CSS Grid Layout și Flexbox, o altă metodă de aspect este adesea trecută cu vederea. În acest articol, voi arunca o privire la Aspectul cu mai multe coloane - adesea denumit multicol sau uneori „Coloane CSS”. Veți afla pentru ce sarcini este potrivit și câteva dintre lucrurile la care trebuie să aveți grijă atunci când creați coloane.

Ce este Multicol?

Ideea de bază a multicol este că puteți lua o bucată de conținut și o puteți difuza în mai multe coloane, ca într-un ziar. Faceți acest lucru folosind una dintre cele două proprietăți. Proprietatea column-count specifică numărul de coloane în care ați dori să se spargă conținutul. Proprietatea column-width specifică lățimea ideală, lăsând browserul să descopere câte coloane se vor potrivi.

Nu contează ce elemente se află în interiorul conținutului pe care îl transformi într-un container multicol, totul rămâne în flux normal, dar spart în coloane. Acest lucru face ca multicol să fie diferit de alte metode de layout pe care le avem în browsere astăzi. Flexbox și Grid, de exemplu, iau elementele secundare ale containerului și acele elemente apoi participă la un aspect flexibil sau grid. Cu multicol, mai aveți flux normal, cu excepția unei coloane.

În exemplul de mai jos, folosesc column-width , pentru a afișa coloane de cel puțin 14em . Multicol atribuie câte 14em coloane se potrivesc și apoi împarte spațiul rămas între coloane. Coloanele vor avea cel puțin 14em , cu excepția cazului în care putem afișa doar o coloană, caz în care poate fi mai mică. Multicol a fost prima dată când am văzut acest tip de comportament în CSS, fiind create coloane care au fost în mod esențial receptive în mod implicit. Nu trebuie să adăugați interogări media și să modificați numărul de coloane pentru diferite puncte de întrerupere, în schimb specificăm o lățime optimă și browserul o va rezolva.

Coloane de stilare

Casetele de coloană create atunci când utilizați una dintre proprietățile coloanei nu pot fi vizate. Nu le puteți aborda cu JavaScript și nici nu puteți stila o casetă individuală pentru a-i da o culoare de fundal sau pentru a ajusta umplutura și marginile. Toate casetele de coloană vor avea aceeași dimensiune. Singurul lucru pe care îl puteți face este să adăugați o regulă între coloane, folosind proprietatea column-rule, care acționează ca o chenar. De asemenea, puteți controla distanța dintre coloane folosind proprietatea column-gap , care are o valoare implicită de 1em , totuși o puteți schimba la orice unitate de lungime validă.

Aceasta este funcționalitatea de bază a multicol. Puteți lua o bucată de conținut și o puteți împărți în coloane. Conținutul va umple coloanele pe rând, creând coloane în direcția inline. Puteți controla decalajele dintre coloane și puteți adăuga o regulă, cu aceleași valori posibile ca și chenar. Până acum, totul este bine și toate cele de mai sus sunt foarte bine acceptate în browsere și au fost de mult timp, ceea ce face ca această specificație să fie foarte sigură de utilizat în ceea ce privește compatibilitatea inversă.

Există câteva lucruri suplimentare pe care ați putea dori să le luați în considerare cu coloanele dvs. și unele probleme potențiale de care trebuie să fiți conștienți atunci când utilizați coloanele pe web.

Coloane care se întind

Uneori, s-ar putea să doriți să împărțiți conținutul în coloane, dar apoi să faceți ca un element să se extindă în casetele coloanei. Aplicarea proprietății column-span unui descendent al containerului multicol realizează acest lucru.

În exemplul de mai jos, am făcut ca un element <blockquote> să se extindă pe coloanele mele. Rețineți că atunci când faceți acest lucru, conținutul se împarte într-un set de casete deasupra intervalului, apoi începe un nou set de casete de coloane de mai jos. Conținutul nu sare peste elementul cuprins.

Proprietatea column-span este în prezent implementată în Firefox și se află în spatele unui semnalizator de caracteristică.

Rețineți că, în specificațiile curente, valorile pentru column-span sunt fie all , fie none . Nu puteți acoperi doar câteva dintre coloane, dar puteți obține genul de aspect pe care l-ați putea vedea într-un ziar combinând multicol cu ​​alte metode de aspect. În acest exemplu următor, am un container grilă cu două piste coloane. Piesa din stânga este de 2fr , iar cea din dreapta 1fr . Articolul din piesa din stânga l-am transformat într-un container multicol cu ​​două șine, are și un element spanning.

În dreapta, avem o parte care intră în a doua coloană Grid. Jucându-ne cu diferitele metode de aranjare disponibile, ne putem da seama exact care metodă de aranjare se potrivește jobului în cauză - nu vă fie teamă să amestecați și să potriviți!

Controlul pauzelor de conținut

Dacă aveți conținut care conține titluri, atunci probabil că doriți să evitați situația în care un titlu ajunge ca ultimul lucru dintr-o coloană, iar conținutul trece în coloana următoare. Dacă aveți imagini cu legendă, atunci situația ideală ar fi ca imaginea și legendă să rămână ca o singură unitate, fără a fi împărțite pe coloane. Pentru a face față acestor probleme, CSS are proprietăți pentru a controla unde se întrerupe conținutul.

Când împărțiți conținutul în coloane, efectuați ceea ce este cunoscut sub numele de fragmentare. Același lucru este valabil dacă vă împărțiți conținutul între pagini, cum ar fi atunci când creați o foaie de stil pentru un context de imprimare. Prin urmare, multicol este cel mai apropiat de Paged Media decât de alte metode de layout de pe web. Din această cauză, timp de câțiva ani, modalitatea de a controla întreruperile în conținut a fost utilizarea proprietăților page-break- care făceau parte din CSS2.1.

• page-break-before
• page-break-after
• page-break-inside

Mai recent, specificația CSS Fragmentation a definit proprietăți pentru fragmentare care sunt concepute pentru orice context fragmentat, specificația include detalii pentru Paged Media, multicol și specificația Regiunilor blocate; Regions fragmentează, de asemenea, o bucată continuă de conținut. Făcând aceste proprietăți generice, se pot aplica oricărui context fragmentat viitor, în același mod în care proprietățile de aliniere din Flexbox au fost mutate în specificația de aliniere a casetei pentru a putea fi utilizate în aspectul Grid și Block.

• break-before
• break-after
• break-inside

Ca exemplu, am folosit break-inside avoid pe elementul <figure> , pentru a preveni desprinderea legendei din imagine. Un browser compatibil ar trebui să păstreze cifra împreună, chiar dacă acest lucru face ca coloanele să pară dezechilibrate.

Din păcate, suportul pentru aceste proprietăți în multicol este destul de neregulat. Chiar și acolo unde sunt acceptate, ele ar trebui să fie văzute ca o sugestie datorită faptului că ar fi posibil să se facă atât de multe solicitări în timp ce încercați să controlați întreruperea, încât, în esență, browserul nu se poate rupe nicăieri. Specificațiile definesc prioritățile în acest caz, cu toate acestea, probabil că este mai util pentru dvs. să controlați doar cazurile cele mai importante.

Problema coloanelor de pe web

Unul dintre motivele pentru care nu vedem multicol foarte folosit pe web este faptul că ar fi foarte ușor să ajungem la o experiență de lectură care să facă cititorul să defileze în dimensiunea blocului. Asta ar însemna derularea în sus și în jos pe verticală pentru cei dintre noi care folosesc limba engleză sau un alt mod de scriere verticală. Aceasta nu este o experiență bună de lectură!

Dacă fixați înălțimea containerului, de exemplu utilizând unitatea de vizualizare vh , și există prea mult conținut, atunci depășirea se va întâmpla în direcția inline și astfel veți obține o bară de defilare orizontală.

Niciunul dintre aceste lucruri nu este ideal, iar folosirea multicolului pe web este ceva la care trebuie să ne gândim cu mare atenție în ceea ce privește cantitatea de conținut pe care am putea dori să o curgă în coloanele noastre.

Blocați coloanele de depășire

Pentru Nivelul 2 al specificației, luăm în considerare cum să activăm o metodă prin care coloanele de overflow, cele care în prezent ajung să provoace bara de defilare orizontală, să poată fi create în schimb în direcția blocului. Acest lucru ar însemna că ați putea avea un container multicol cu ​​o înălțime și, odată ce conținutul a creat coloane care umplu acel container, un nou set de coloane va fi creat mai jos. Acest lucru ar arăta puțin ca exemplul nostru de mai sus, cu toate acestea, în loc să aibă o cheie care provoacă pornirea noilor casete de coloană, ar fi depășirea cauzată de un container cu o restricție în dimensiunea blocului.

Această caracteristică ar face multicol mult mai util pentru web. Deși suntem puțin departe acum, puteți fi cu ochii pe această problemă în repo-ul Grupului de lucru CSS. Dacă aveți cazuri de utilizare suplimentare pentru această funcție, postați-le, vă poate ajuta cu adevărat la proiectarea noii caracteristici.

Pentru ce este util Multicol astăzi?

Cu specificația actuală, împărțirea întregului conținut în coloane fără a ține cont de problemele de defilare nu este recomandată. Cu toate acestea, există unele cazuri în care multicol este ideal pe web. Există suficiente cazuri de utilizare pentru a face ceva de care ar trebui să iei în considerare atunci când te uiți la modelele de design.

Restrângerea elementelor UI sau text mici

Multicol poate fi util în orice loc în care aveți o listă mică de articole pe care doriți să ocupe mai puțin spațiu. De exemplu, o simplă listă de casete de selectare sau o listă de nume. Adesea, în aceste scenarii, vizitatorul nu citește în jos o coloană și apoi se întoarce în partea de sus a următoarei, ci scanează conținutul pentru a găsi o casetă de selectare pe care să dea clic sau un element de selectat. Chiar dacă creați o experiență derulată, este posibil să nu fie o problemă.

Puteți vedea un exemplu de multicol folosit în acest fel de Sander de Jong pe site-ul DonarMuseum.

Cantități mici cunoscute de conținut

Există momente în care proiectăm un site în care știm că o parte de conținut este relativ mică și se va potrivi pe majoritatea ecranelor fără a provoca derulare nedorită. Am folosit multicol pe paginile de prezentare Notist, pentru introducerea unei discuții.

Andy Clarke a creat un exemplu minunat pentru site-ul web Equfund.

Pentru a evita posibilitatea ca ecranele foarte mici să provoace derulare, amintiți-vă că puteți utiliza interogări media pentru a verifica înălțimea, precum și lățimea (sau într-o lume logică, bloc și inline). Dacă activați doar coloanele la un punct de întrerupere care are o min-height suficient de mare pentru conținutul lor, acest lucru poate salva utilizatorii de dispozitive foarte mici care au o experiență slabă de defilare.

Afișare de conținut asemănătoare zidăriei

Un alt loc în care Aspectul cu mai multe coloane funcționează frumos este dacă doriți să creați un tip Masonry de afișare a conținutului. Multicol este singura metodă de aspect care va crea în prezent acest tip de aspect cu elemente de înălțime inegale. Grila fie ar lăsa un gol, fie ar întinde elementele pentru a face o grilă strictă bidimensională.

Veerle Pieters are un exemplu frumos de utilizare a multicolului în acest fel pe pagina ei de inspirație.

Funcții de rezervă pentru Grid și Flexbox

Proprietățile column- pot fi, de asemenea, utilizate ca o rezervă pentru aspectul Grid și Flex. Dacă specificați una dintre proprietățile unui container, atunci transformați acel container într-un aspect Flex sau Grid utilizând display: flex sau display: grid orice comportament al coloanei va fi eliminat. Dacă aveți, de exemplu, un aspect de carduri care utilizează Aspect grilă, iar aspectul ar fi lizibil dacă ar fi rulat în coloane, mai degrabă decât pe pagină, puteți utiliza multicol ca o simplă alternativă. Browserele care nu acceptă Grid vor primi afișajul multicol, cele care acceptă Grid vor primi Grid Layout.

Nu uitați de Multicol!

Destul de frecvent răspund la întrebările Grid și Flexbox unde răspunsul este să nu folosesc Grid sau Flexbox, ci să mă uit la Multicol. Probabil că nu îl veți folosi pe fiecare site, dar atunci când întâlniți un caz de utilizare poate fi de mare ajutor. La MDN există resurse utile pentru multicol și proprietățile de fragmentare aferente.

Dacă ați folosit multicol într-un proiect, poate lăsați o notă în comentarii, pentru a împărtăși alte moduri în care putem folosi funcția.