Layouts in CSS

Who am I?

Web Opener
Core Contributor
Member, CSS WG
Most recently, the arsonist of semantic web
nimbupani.com and @divya

What

Current state of layout
What you can expect in the near future
What to do in the meanwhile

Current State of Layout

Floats
Positioning
display: inline-block
Negative margins
display: table-cell

But most of them have drawbacks

Not content agnostic.
Floats require clearing.
Vertical Centering impossible
Breaks presentation on smaller screens.

New Layout Proposals

- Generated Content for Paged Media
- Multiple Columns
- Regions
- Exclusions
- Grid
- Flexbox

GCPM

dev.w3.org/csswg/css3-gcpm

@media paged {
  html {
    height: 100%;
    overflow-style: paged-x;
    padding: 5%;
    height: 100%;
    box-sizing: border-box;
  }
}

```
@media paged
```
Indicate what needs to be split over pages.
```
overflow-style: paged-x | paged-x-controls
```
Indicates paging of content with or without paging controls.
break-before, break-after and break-inside for controlling page breaks.
h1, h2 { break-after: avoid; }
API
- onpagechange - Page change event
- currentPage - current page you are on. Updating this triggers onpagechange.
- pageCount - total number of pages
Browser Support

Labs Build

More info: people.opera.com/howcome/2011/reader/

Multiple Columns

dev.w3.org/csswg/css3-multicol/
```
body { column-width: 12em; }
```
break-before, break-after, break-inside for controlling breaks within columns.
column-span: all to span columns.
```
column-fill: auto | balance
```
defaults to balance to balance all columns.
```
column-fill: balance
```
```
column-fill: auto
```
Browser Support

11.1+2+4+3.1+10+

Regions

dev.w3.org/csswg/css3-regions/

article.news {
  flow-into: article_flow;
}

#main, #sub-topic, #news {
  flow-from: article_flow;
}

article_flow is a named flow.
Selectors using flow-from need to be block containers.

They also establish new block formatting contexts and stacking contexts.

@region #main {
    #article { color: #0C3D5F; }
}

Only limited properties can be set with this.

API
- getNamedFlow
- regionLayoutUpdate
getNamedFlow
- overflow: read-only boolean indicating if all content fitted into available regions.
- contentNodes: NodeList of nodes that are part of flow.
- getRegionsByContentNode(node): return all regions that node is part of flow.
regionLayoutUpdate

Event triggered when there is an update to the named flow.
Browser Support

15+6+10+

Exclusions

dev.w3.org/csswg/css3-exclusions/
Exclusion element
which has wrap-flow declared on it not set to auto.
Exclusion Area
Defines wrapping for inline content around an exclusion element.

wrap-flow: left | right | maximum | both | clear | auto

```
wrap-flow: auto
```
```
wrap-flow: right
```
```
wrap-flow: both
```
```
wrap-flow: maximum
```
```
wrap-flow: clear
```
wrap-margin: offset inline-content outside of the exclusion element.
wrap-padding: offset inline content inside of the exclusion element.
wrap-margin / wrap-padding
Custom Shapes for wrapping
```
shape-outside: circle(50%, 50%, 50%);
```
shape-outside determines wrapping for inline content outside of the exclusion element.
Shape Inside
```
shape-inside: url(#path-shape); 
```
Determines wrapping for inline content inside of the exclusion element
Shapes at work

Grid

dev.w3.org/csswg/css3-grid-align/

#grid { 
   display: grid;
   grid-columns: auto minmax(min-content, 1fr);
   grid-rows: auto minmax(min-content, 1fr) auto
}

  #title { grid-column: 1; grid-row: 1 }
  #score { grid-column: 1; grid-row: 3 }

Grid Template

  grid-template: "ta"
                 "sa"
                 "bb"
                 "cc";

Each new string is a row and each character in the string is a column.

Grid Templates

#title { grid-cell: "t" }
#score { grid-cell: "s" }

Spanning Rows and Columns
```
grid-row-span: 2;
grid-column-span: 2;
```
Browser Support

10+

Flexbox

The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space. - hacks.mozilla.org

dev.w3.org/csswg/css3-flexbox/

body {
  display: flexbox;
  flex-pack: center;
  flex-align: center;
  width: 100%;height : 100%;
}

Flexbox item is one that is a block level child of the body*.

Triggers for various layout modes

Generated Content for paged media
overflow-style: paged-x | paged-x-controls
Multiple Columns
column-width:<value> or
column-count:<value> on block/inline-block/table-cell elements
Regions
flow-from:<namedflow> on block elements
Exclusions
wrap-flow:<not auto> on block elements
Flexbox
display: flexbox | inline-flexbox

Mix 'n' Match

A region can be an exclusion and have multiple columns.
A box can either be a region or a grid or a flexbox.
A flexbox or a grid cannot be an exclusion nor have multiple columns.

	GCPM	Multicol	Regions	Exclusions	Grid	Flexbox
GCPM	✔
Multicol	✔	✔	✔	✔
Regions		✔	✔	✔
Exclusions		✔	✔	✔
Grid					✔
Flexbox						✔

Beware

Specs are always changing
So are the syntaxes
Not ready for production, probably not for a year or two.
When using, detect features with modernizr and readable content when layout features are absent.

For Now

Continue present styling mechanisms (also see Stubbornella's post on media blocks).
Use isotope.metafizzy.co

Help us!

Provide feedback on www-style
Create and submit usecases these layout proposals do not help solve.
Experiment and submit bug reports.

Thanks

- Ask @divya / @odevrel

Layouts in CSS

Who am I?

What

Current State of Layout

But most of them have drawbacks

New Layout Proposals

GCPM

API

Browser Support

Multiple Columns

Browser Support

Regions

API

`getNamedFlow`

`regionLayoutUpdate`

Browser Support

Exclusions

Exclusion element

Exclusion Area

`wrap-margin / wrap-padding`

Custom Shapes for wrapping

Shape Inside

Shapes at work

Grid

Grid Template

Grid Templates

Spanning Rows and Columns

Browser Support

Flexbox

Triggers for various layout modes

Generated Content for paged media

Multiple Columns

Regions

Exclusions

Flexbox

Mix 'n' Match

Beware

For Now

Help us!

Thanks