Краткий обзор новых технологиях верстки в своем блоге написал заметку Евгений Степанищев, руководитель группы разработчиков внутренних сервисов «Яндекс», CSS3: layout

CSS3: layout

body { columns:3; column-gap:0.5in; } 
img { float:page top right; width:3gr; }

    #div1 {
      display: box;
      box-lines: multiple;
      box-pack: center;
      width: 300px;
    }
    button {
      box-flex: 1.0;
      width: 90px;
      max-width: 90px;
    }

  body { display: "aaa"
                  "bcd" }
  #head { position: a }
  #nav { position: b }
  #adv { position: c }
  #body { position: d }

Три черновика, которые сейчас предлагаются:

1. Grid (от Microsoft) //www.w3.org/TR/css3-grid/.
2. Flexbox (Mozilla) //www.w3.org/TR/css3-flexbox/.
3. Template Layout (W3C) //www.w3.org/TR/css3-layout/.

Вкратце об этих проектах.

Спецификация Grid

Первая спецификация (Grid) задаёт на страницу абстрактную сетку, а контенту, при желании, указывается в какой ячейке сетки ему располагаться и сколько занимать. Например:

body { columns:3; column-gap:0.5in; }
img { float:page top right; width:3gr; }

Это настолько простая и очевидная идея, что у меня возникал вопрос «а почему не так», когда я ещё начинал верстать — в 1997-м году. Спецификация пока не дописана (вот уже три года как) и нигде не реализована.

Спецификация от Mozilla (Flexbox)

Спецификация от Mozilla (Flexbox) уже посложнее, это часть XUL, то есть эта сетка уже в браузерах, основанных на Gecko, а так же реализована в Chrome и Safari. Спецификация вводит кучу новых свойств, а сетка получается древовидная. Задаётся родительский контейнер, его потомки группируются и внутри групп задаётся расположение элементов относительно друг друга.

Хотя для понимания это всё сложнее, но, кажется, такая раскладка более подходит для вёрстки «резиновых» сайтов. Чем-то это похоже на старые знакомые таблицы, но круче.

#div1 {
display: box;
box-lines: multiple;
box-pack: center;
width: 300px;
}
button {
box-flex: 1.0;
width: 90px;
max-width: 90px;
}


Спецификация Template Layout (W3C)

Спецификация Template Layout (W3C) — это шаблоны, при помощи свойства display задаются «слоты», «position» задаёт в каком слоте у нас контент. Видимо, это ближе к тому, что предалагает Microsoft.

body { display: "aaa"
"bcd" }
#head { position: a }
#nav { position: b }
#adv { position: c }
#body { position: d }

Эта спецификация нигде пока не реализована, но есть плагин к jQuery (code.google.com/p/css-template-layout/), который позволяет начать пользоваться Template Layout уже сейчас (в IE тоже работает).

Это, конечно, только приблизительные описания технологий, краткий обзор. Сами стандарты чуть сложнее, особенно Flexbox.