CSS3 Layout

Written September 2012- specs and browser support will change!

Multi-column

Prefixed, except in IE 10.
MDN

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus eleifend tincidunt. Nam adipiscing nisl ut arcu congue consectetur. Vivamus tincidunt felis at risus luctus bibendum eget sed eros. Nam fermentum, nulla et dignissim tincidunt, massa elit dignissim massa, vel semper est purus vitae lorem. Integer nec varius libero. Donec sodales, ligula vel mattis convallis, diam orci vehicula diam, ac iaculis justo orci non tortor. Aliquam sit amet magna vel elit condimentum aliquam id eget magna. Aenean in rhoncus urna. Nullam porttitor viverra risus eu faucibus. In et sem massa. Aenean eget odio eleifend purus rhoncus ornare quis in mi. Donec urna nibh, posuere id dictum elementum, ultrices at orci. Nunc lorem dolor, scelerisque ut laoreet vitae, egestas non mi. Aliquam non scelerisque metus. Donec nec turpis eu quam condimentum cursus.

Columns

[-webkit-|-moz-]column-count: 2

column-width: 200px;
columns: width or count;
column-rule: 1px dashed green;
/* break-before: column | avoid-column */

Box sizing

The default box model (width + padding + border) is difficult so the old IE model, now called box-content, is preferred (width = box + padding + border). NB: FF is -moz-prefixed, IE 8+/Chrome are not prefixed.

width:50%;border:1px;padding:2px;

box-sizing:content-box box-sizing:border-box

Flexibox

IE 10 uses an old version (-ms-flexbox instead of flex, plus ms-flex:). Webkit is prefixed. FF is prefixed and behind a preference.
MDN
IE 10

/* set up flexibox */
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex; /* FF is behind a preference */
display: flex;

child 1

child 2

child 3

Default for sub-blocks (NB: uses writing direction, clipping of parent)

flex-direction: [row] | column | row-reverse ...
flex-align: [stretch] | start (=top) | end (=bottom) | center
flex-wrap: [none] (fills width) | wrap | wrap-reverse (=left to right, then up)
flex-flow: direction wrap (shortcut)
#flexItem1 { css for sub-items
- order: [initial] | {number} . IE10 is -ms-flex-order
- flex: 0 0 auto; = grow shrink preferred
  Flex item can grow/shrink by proportion (eg flex:2, it's twice as big, flex: 0 2 it's half as big), or uses preferred width/height.

Exclusions (Wrap-flow)

Free-floats. This is IE 10 only (end 2012), -ms-warp-flow. Auto means no exclusion (overlap), both means both sides.

Exclusion elements define exclusion areas that contribute to their containing block's wrapping context. As a consequence, exclusions impact the layout of their containing block's descendants. Elements layout their inline content in their content area and wrap around the areas in their associated wrapping context. If the element is itself an exclusion, it does not wrap around its own exclusion shape and the impact of other exclusions on other exclusions is controlled by the ‘z-index’ property as explained in the exclusions order section.

-ms-wrap-flow:auto -ms-wrap-flow:both -ms-wrap-flow:start

Grid layout

IE 10 only, -ms- prefixed. Spec may still change. MSDN

Assign the container

/* set up container with rows and columns */
#grid {
    display: -ms-grid;
    /* space delimited columns
    column 1 = auto, size of content
    column 2 = 200px, fixed width
    column 3 = 2fr, 2 fractions of remaining space (2fr+1fr = 3, so 2/3rds)
    column 4 = 1fr, 1 fraction of remaining space (2fr+1fr = 3, so 1/3rd)
     */
    -ms-grid-columns: auto 200px 2fr 1fr;
    /* space delimited rows
    max-content is maximum height of any elements. Also min-content, minmax(x,y)
     */
    -ms-grid-rows: auto max-content 10em;
}

The assign items to columns and rows.

#item {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-column-align: end; /* align to end of the column */
  -ms-grid-row-align: center; /* align to center of row */
}