Justify Grid — новое слово в разметке

[walkman7]

нет, потому что не pixel perfect

[KeepYourMind]

Pixel Perfect не модно :-)

[walkman7]

Для размеров использую точки или %, пока хватает.

[macgera]

В нашу эпоху, что бы верстать пикселями нужно либо 10километровый css с медиазапросами, либо с кучей виюпортов, которые еще потом глючить будут… ну-ну! Вперед!

[magic4x]

Если говорить об inline-block, то неудобства появляются из за того, что элементы с этим значением выравниваются по базовой линии, а не по верхнему краю. А если на странице несколько inline-block'ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки.

.container {
    font-size: 0; // «некоторые промежутки»

    .span {
        vertical-align: top; // «выравниваются по базовой линии»
        font-size: medium;
        display: inline-block;
    }
}

Очень хотелось бы увидеть подробности в комментариях

Вот сейчас буду нагло врать:
justify работает, если последний элемент сваливается на следующую строчку: забейте текст в блок, сделайте ему выключку по ширине — последняя строчка будет выровнена по левому краю. ::after — становится последним элементом, а width: 100% делает его всегда таковым. Это клевый фокус, он пишется за минуту (я его написал в пределах комментария) и отлично дружит со всеми фреймворками путем простого переопределения стилей. Это штука так редко нужна, что городить отдельный фреймворк бессмысленно.

& > * {
    text-align: left;
    font-size: medium;
  }

Фу-фу-фу!

[ilusha_sergeevich]

По мне так это идеальный инструмент для резиновой верстки на сегодняшний день

[winbackgo]

Сейчас резина актуальна как никогда.

[Aux]

Цитата:

You can think of Responsive as a series of Liquid layouts.

Резина никуда не пропадает.

[fatal]

Резина — резине рознь. В некоторых случаях и одной резинки хватит заглаза.

[hermit931]

font-size: 0; // «некоторые промежутки»

Этот способ желательно тестировать, есть в сафари бажок один (мотаем до Вариант 2)

[nazarpc]

Посмотрите в Opera, демка с сайта работает не корректно

[mkal]

Так не долго осталось уже этой опере.

[hell0w0rd]

Вы уверены что все будут обновляться? Я не пользователь оперы, но судя по отзывам на том же хабре — опере еще много чего предстоит сделать, чтобы удобства прежней оперы сохранились

[hermit931]

Давно искал что то подобное на инлайн-блоках. Все что встречалось было на флоате, а душа к нему не лежит :/

[Ganesh]

Лучше чем semantic.gs?

[Tbird]

Новое слово в сетках — это singularity.gs и susy-next. А это так, баловство с хаками…

[lolmaus]

Горячо поддерживаю. Привел ниже пару примеров на Singularity.

[vc54]

Проблема с inline-block надуманная: их легко выровнять, например, по верху, если надо, а также можно легко избавиться от межстрочного отступа.

[Aux]

Читаю и радуюсь, что больше вебом не занимаюсь! Хак на хаке, как было, так и осталось. Десять лет уже прошло с моего первого профессионального опыта, а воз и ныне там.

[lolmaus]

Не судите о современном положении дел в вэбе по таким вот постам.

Можете в моем комментарии ниже посмотреть, как решается эта задача современным способом.

[vc54]

Неее, стало все намного халявнее, на самом деле :)

[fatal]

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

[lolmaus]

Господа верстальщики, когда вы начнете пользоваться SASS и Compass?

Посмотрите, как легко реашется вопрос модульной сетки с его помощью:
sassbin.lolma.us/gist/5711980/

Обратите внимание, что сетки могут быть несимметричные и на странице может быть несколько сеток, в том числе вложенных.

А вот уже более сложный пример: responsive галерея (попробуйте поиграть с шириной окна).
sassbin.lolma.us/gist/5670191/

Посмотрите, как мало требуется кода для решения этой задачи.

[lolmaus]

> Мозгами надо пользоваться. При условии работающего мозга препроцессор может быть любой.

Только у SASS есть богатая экосистема расширений Compass. К примеру, расширение Compass Singularity позволяет реализовать любую модульную сетку: с произвольным количеством колонок, симметричную, несимметричную, вложенную, отзывчивую (с переменным количеством колонок), несколько разных сеток на одной странице… — и при этом весьма просто в использовании.

Какой бы светлый ни был у вас мозг, с любым другим препроцессором (и тем более без такового) вам придется изобретать велосипеды как в сабже. Разумеется, я говорю о сколько-нибудь сложной задаче.
 

> Сетка — это инструмент дизайнера, это скелет, по которому дизайн может быть построен лучше и, возможно, гармоничней, чем без него.

Не понял, к чему вы это. Все, что нарисует дизайнер, верстальщик должен воплотить в коде.

[lolmaus]

Я не совсем понимаю, что вы пытаетесь доказать или опровергнуть.

Мой первоначальный тезис был в том, что SASS+Compass для современного верстальщика незаменим. Эта связка настолько эффективна и практична для решения такого большого количества разнообразных задач, что говорить о ее ненужности — все равно что предлагать пользоваться вместо экселя тетрадкой и ручкой (а кто предпочитает эксель тетрадке — тот, по вашему, не умеет пользоваться мозгами).

Что вы заладили «сетка — это не цель, а инструмент», я тоже не понимаю. Я с этим и не спорил. Напоминаю, что топик — про сетку.

[lolmaus]

«Я не против компьютеров, я против электричества».

[Chesheer]

Первый пример — в Safari под Mac (6.0.4) блок футера уходит под main…

[EvgeniyLazarev]

Я просто оставлю это здесь: anygrid.net/