Milloin käytät CSS-sarakkeita? PlatoBlockchain Data Intelligence. Pystysuuntainen haku. Ai.

Milloin käytät CSS-sarakkeita?

Se ei ole retorista: Olen todella kiinnostunut löytämään loistavia käyttötapoja CSS-monisarakeasetteluille.

Vastaus näyttää suoraviivaiselta. Käytä sarakkeita, kun haluat jakaa sisällön sarakkeisiin, eikö niin? Tässä on yleensä sellainen esimerkki, jonka löydät artikkeleista, jotka osoittavat, kuinka CSS-sarakeasettelut toimivat, mukaan lukien omamme Kalenteri:

Tismalleen. Mutta onko tämä todellinen käyttötapaus? Mmmm ehkä. Jos teksti on suhteellisen lyhyt, ehkä se on mukava kosketus. Näin myin sen itselleni, kun suunnittelin uudelleen verkkosivustoani a muutama vuosi sitten. Nykyään se ei ole niin, mutta tältä se näytti silloin:

Milloin käytät CSS-sarakkeita?

Mutta kokonainen pitkä artikkeli jaettu sarakkeisiin? Rakastan sitä sanomalehdissä, mutta en epäröi vierittää verkkosivua alaspäin lukeakseni yhden sarakkeen, mutta selatakseni takaisin ylös tehdäkseni sen uudelleen.

Voimme kai käyttää sitä kahden elementin sijoittamiseen vierekkäin, mutta flexbox sopii siihen paljon paremmin. Lisäksi rajoitus estää meitä valitsemasta sarakkeita niiden kokoa varten yksitellen. Sarakkeiden on oltava yhtä leveitä.

Yksi asia sarakkeilla on se, että ne ovat ainoa CSS-asettelumenetelmä fragmentit sisältö. (Toisin sanoen, ellemme laske CSS-alueet… mitä niille muuten tapahtui?!) Joten jos haluat jakaa kappaleen sarakkeisiin, se on jo mahdollista ilman lisäkääreitä.

Milloin muuten saatat joutua jakamaan jatkuvan sisältölohkon sarakkeisiin? Muistan, että minun piti tehdä se, kun minulla oli iso järjestämätön luettelo tavaroista. Pidän tavasta, jolla luettelot voivat tehdä sisällön skannaamisen helposti, mutta pitkät luettelot voivat saada sivun toisen puolen näyttämään erittäin raskaalta. Oletetaan esimerkiksi, että listasimme kaikki CSS-temppujen viestitunnisteet aakkosryhmissä. Monisarakkeinen asettelu toimii hyvin tähän:

Mene eteenpäin ja yritä muuttaa kuvaportin leveyttä. Kolme saraketta on määritetty, mutta lukumäärä muuttuu käytettävissä olevan tilan määrän mukaan. Täytyy rakastaa kaikkea sitä reagoivaa hyvyyttä ilman mediakyselyä!

Työskentelin demon parissa :left pseudoluokka ja tavoitettu columns koska se on loistava tapa pirstalla asioita demojen tulostamista varten. Luulen siis, että on olemassa toinen käyttötapa. Ja kun tein demoa, tajusin, että monisarakkeisen asettelun avulla voidaan luoda esineistä muurattu ruudukko, kuten kuvagalleria:

Mutta mitä muuta? Olemmeko rajoittuneet lyhyisiin kappaleisiin, pitkiin luetteloihin ja vapaasti virtaaviin ruudukkoihin?

Aikaleima:

Lisää aiheesta CSS-temppuja