Vain muutamalla CSS-säännöllä voit luoda tulostukseen perustuvan ulkoasun, jolla on verkon joustavuus. Se on kuin sanomalehden ottaminen, mutta kun paperi pienenee, sarakkeet säätyvät ja tasapainottuvat automaattisesti, jolloin sisältö kulkee luonnollisesti.
.intro ( columns: 300px 2; )columnsOmaisuuden hyväksyy column-count, column-widthtai molemmat ominaisuudet.
columns: || ;Käytä molempia column-countja column-widthon suositeltavaa luoda joustava monisarakkeinen asettelu. column-countToimii enimmäismäärä saraketta, kun taas column-widthsanelee pienin leveys kullekin sarakkeelle. Yhdistämällä nämä ominaisuudet yhteen monisarakkeinen asettelu hajoaa automaattisesti yhdeksi sarakkeeksi kapeilla selainleveyksillä ilman mediakyselyjä tai muita sääntöjä.
Usean sarakkeen asettelu toimii hyvin lohkoelementeillä, mukaan lukien luettelot, joustavan navigoinnin tekemiseksi.
Voit hienosäätää monisarakkeista asettelua edelleen käyttämällä break-insidetiettyjä elementtejä, jotta ne eivät juutu sarakkeiden väliin.
Lisää tietoa
- CSS-monisarakkeinen asettelumoduuli, taso 1 (työluonnos)
- MDN-dokumentaatio
Selaimen tuki
| IE | Reuna | Firefox | Kromi | Safari | Ooppera |
|---|---|---|---|---|---|
| 10+ | Kaikki | 9+ | 50+ | Kaikki | 11.5+ |
| Android Chrome | Android Firefox | Android-selain | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Kaikki | Kaikki | Kaikki | Kaikki | Kaikki |