MENU


Multiple Columns

columns (shorthand)
: 5em 3: divides the text into 3 columns, each 5em wide.

...column-width
:auto: the browser determines the column width.
:200px: sets the column width to be 200px wide.

...column-count
:auto: sets the number of columns by other means such as column-width.
:3: sets the number of columns to be 3.

column-fill
:auto: content takes up only the room it needs.
:balance: content is equally divided.
:balance-all: like 'balance', balancing all fragments.

column-gap
:normal: normal gap width.
:100px: columns are 100px apart.

column-span
:all: the element spans across all columns.
:none: the element does not span multiple columns.

column-rule (shorthand)

...column-rule-color
:green: displays a green columns-dividing line.

...column-rule-style
:none: no dividing line.
:hidden: hidden dividing line.
:dotted: dotted dividing line.
:dashed: dashed dividing line.
:solid: solid dividing line.
:double: double dividing lines.
:groove: grooved dividing line.
:ridge: ridged dividing line.
:inset: inset dividing line.
:outset: outset dividing line.

...column-rule-width
:thin: thin dividing line.
:medium: medium dividing line.
:thick: thick dividing line.
:10px: a dividing line that is 10px thick.

RESETRUNFULL
<!DOCTYPE html><html><head>
   <title>Multi-columms</title>
   <style>
      div {
         background-color:yellow;
         width:400px;
         columns:3 auto;
         column-gap: 70px;
         column-rule: 4px dotted red;
      }
   </style>
</head><body>
   <div>
      When I was writing my column, I would almost always be recognized when I was in a restaurant, even if I was reviewing it and had booked under a fake name, so free stuff would start coming out of the kitchen on a conveyer belt, fantastic wines would be opened at my table. Now I can't even get a reservation on the pizza joint on the corner. -- Toby Young
   </div>
</body></html>