Usean sarakkeen asettelussa voit saada elementit laajenemaan sarakkeiden yli column-span.
h2 ( -webkit-column-span: all; column-span: all; )Määritä monisarakkeisen column-spanasettelun sisällä olevaan elementtiin, jotta siitä tulee ulottuva elementti. Usean sarakkeen asettelu jatkuu seuraavalla ei-kattavalla elementillä.
Arvo column-spanvoi olla joko alltai none.
Määritä elementti, column-span: alljotta se ulottuu sarakkeisiin.
noneOminaisuuden arvo on kattavan elementin tappokytkin. Voit käyttää tätä, kun käsittelet mediakyselyjä, jotta käsket ulottuvuuselementin lopettaa ulottuvuuden.
Katso CSS-Tricksin (@ css-tricks) Kynä-sarakevälin esimerkki CodePenistä.
Selaimen tuki
Firefox ei tue tätä column-span, mutta on olemassa mielenkiintoisia kiertotapoja.
Tässä on kuitenkin tuki monisarakkeiselle asettelulle yleensä:
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |
Älä unohda etuliitteitäsi!