Moduł ten opisuje układ wielokolumnowy w CSS. Za pomocą funkcji opisanych w tym dokumencie, arkusze stylów mogą zadeklarować, rozmieszczenie zawartości elementu w wielu kolumnach.
| column-width: | |
|---|---|
| length (np. 100px) | auto |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. |
| column-count: | |
|---|---|
| integer (np. 2) | auto |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. |
| columns: |
|---|
| column-width || column-count (np. 80px auto) |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. |
Uwaga: W Tabeli 2. zastosowano automatyczne dzielenie wyrazów dla języka angielskiego (style="hyphens:auto;" lang="en"). W Przykładzie 1. encję ­ ze względów technicznych.
| column-gap: | |
|---|---|
| length (np. 30px) | normal |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. |
| column-rule-style: | |
|---|---|
| border style (np. double) | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. |
|
| column-rule-color: | |
|---|---|
| color (np. silver) | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. |
|
| column-rule-width: | |
|---|---|
| color (np. 2px) | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. |
|
| column-rule: |
|---|
| column-rule-width||column-rule-style||[column-rule-color|transparent] (np. column-rule: 3px groove silver; columns: 80px auto;) |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. |