Любому верстальщику, перед которым встала очередная задача по вёрстке адаптивного макета, нужны сетки. В большинстве случаев берётся старый добрый bootstrap, и в html-ке начинают появляться div-ы с классами вида col-xs-6 col-sm-4 col-md-3. И вроде бы всё хорошо и быстро, но в данном подходе часто возникает множество подводных камней. В данной статье мы рассмотрим эти подводные камни, и закидаем тухлыми помидорами рассмотрим мою поделку для беспроблемных сеток.
Проблемы
Нестандартные сетки
Итак, у нашего верстальщика очень мало времени, макет горит, всё надо сделать вчера. Поэтому, он берёт для основы популярный css-фреймворк bootstrap, и начинает свою работу. И тут, в середине работы, он вдруг натыкается на блок баннеров "5 в ряд". Все, кто работал с bootstrap знает, что его сетка по умолчанию 12-кратная, поэтому 5 колонок в ряд стандартной бутстраповской сеткой ну никак не сделаешь. Да, конечно, в бутстрапе можно собрать произвольную сетку, но это время терять, качать зависимости, собирать less-ки (а мы, допустим, пишем на sass).
Может подключить какую-нибудь библиотеку для настраиваемых сеток? В целом это хороший выход, единственный минус данного подхода, что практически все из них рассчитаны либо на долгое и нудное написание @media(min-width:){}, либо генерируют свой набор классов, с кучей, наверняка не нужных col15-xs-offset-3, которые попадут в итоговую css-ку.
Поэтому, с большой вероятностью, верстальщик просто пропишет все стили вручную (там, в принципе, не так много писать).
Необходимость своего набора breakpoint-ов
Очень часто в стандартной бутстраповской сетке не хватает дополнительных брейкпоинтов, т. е. есть xs, sm, md, lg — все они до ширины 1200px. А как же большие мониторы? Какой-нибудь брейкпоинт xl на 1600px так и просится в стандартный набор. Но его опять же нет, и возникают те же варианты решения, что и в предыдущем пункте. А ведь контрольных точек может быть очень много — 320, 360, 640, 768, 992, 1200, 1600, 1900..
Избыточность и многословность
И тут мы плавно подходим к следующей проблеме. Представьте, что вам нужно прописать для каждой сетки свои размеры блока, тогда у вас получится что-то типа этого:
<div class="col-xxs-12 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>Не слишком ли много? Добавьте сюда возможные pull/push и visible/hidden и тогда можно смело начинать сходить с ума. А ведь все эти классы прописаны в css, представьте сколько нужно прописать классов в css для всех комбинаций 60-кратной сетки!
Отделение стилей от разметки
Любой верстальщик знает, что inline-стили — это плохо. Так зачем мы пишем в классы разметки то, что касается стилей? col-xs-6, visible-sm и не дай бог text-right — это всё стили, и, если надо будет вносить правки в уже натянутую на вёрстку, обязательно возникнет проблема, что верстальщику придётся просить backend-щика поменять col-sm-6 на col-sm-4.
Перекрытие ненужных стилей
Часто css-фреймворк подключают весь только ради сеток и пары мелких функций, что вытекает впоследствии в избыточном сбросе стилей и двойном размере итогового css. Например, подключается весь bootstrap.min.css, а потом весело и задорно убираются тенюшки и закруглённые уголки у .btn, .form-control и тому подобного, включая :hover, :focus, :first-child. В итоге, вместо помощи, фреймворк начинает мешать. Не говоря уже о часто не нужных фичах, по типу .glyphicon. Конечно, опять же можно собрать bootstrap из того, что нужно, но это опять время.
Чужие стандарты и code-style
Допустим, верстальщик изучил БЭМ и начал его применять. Но необходимость использовать bootstrap диктует свои исключения — в нём все классы пишутся через дефис, не следуя принципам БЭМ. И тут возникает проблема выбора — либо смириться с мешаниной в названиях классов (btn-block disabled component__btn component__btn_disabled), либо всё-таки выкинуть bootstrap.
Устаревшие методы
Как известно, сетки в bootstrap 3 основаны на float-ах. Что часто вызывает проблемы, одна из наиболее частых — различная высота блоков, в результате которой красивая сетка "ломается". Хватит использовать float-ы не по назначению, уже практически вымерли все браузеры, которые не умеют flexbox!
Susy! — это выход?
В поиске решения всех перечисленных выше проблем, я наткнулся на замечательный сеточный фреймворк Susy!, в целом очень хороший. Но мне не хватало скорости, т. к. susy! предлагал описывать колонки для каждого брейкпоинта отдельно:
.col {
@media (min-width: 768px) {
@include gallery(4 of 12);
}
@media (min-width: 1200px) {
@include gallery(3 of 12);
}
}То есть susy! предполагает, что брейкпоинтами вы будете заниматься самостоятельно. Кроме того, susy! сам не пишет за вас display: flex для, строк, вам нужно их не забывать прописывать самостоятельно. Отступы между колонками в нём задаются только относительные (сделать фиксированные в пикселях не получится). Также, он совсем недавно научился flex, а до этого он строил сетки на float и :nth-child(). В общем, susy! это хорошо, но хотелось бы скорости и лёгкости описания сеток для всех брейкпоинтов, как это было с bootstrap.
Поиск других сеточных систем также не давал особо результата — все либо идут по пути susy!, забывая про breakpoints, либо идут по пути bootstrap, предоставляя набор сгенерированных классов для руления сетками в html.
Велосипедостроение
Итак, решено было написать что-то своё, в результате родился fast-grid. Он также, как и susy, построен на sass. Какие же главные преимущества он предоставляет по сравнению с другими решениями, в частности, с susy!? В первую очередь скоростью за счёт меньшего количества кода, возьмем стандартный bootstrap пример:
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
</div>С помощью fast-grid такую сетку очень легко описать:
@import "~fast-grid/fast-grid";
.row {
@include grid-row();
}
.col {
@include grid-col(6 4 3 2);
}https://codepen.io/PaulZi/pen/EvPbWK
Давайте теперь пройдёмся по нашим недостаткам, и увидим как fast-grid решает все эти проблемы.
Нестандартные сетки
Легко:
@import "~fast-grid/fast-grid";
.cols {
$grid: (
gap: 5px
);
@include grid-row($grid);
&__item {
@include grid-col(12 6 null (1 of 5), $grid);
}
}https://codepen.io/PaulZi/pen/gxPXJq
Необходимость своего набора breakpoint-ов
@import "~fast-grid/fast-grid";
.cols {
$grid: (
breakpoints: (
xxs: 0px,
xs: 360px,
sm: 640px,
md: 960px,
lg: 1200px,
xl: 1600px
),
columns: 60
);
@include grid-row($grid);
&__item {
@include grid-col((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $grid);
}
}https://codepen.io/PaulZi/pen/XaXVmg
Избыточность и многословность / Отделение стилей от разметки
fast-grid это сеточный фреймворк для использования в css, а не в html на основе сгенериронных наборов классов. Благодаря этому разметка становится отделена от стилей, что благотворно отражается на дальнейшей поддержке. Также благодаря этому нет необходимости генерировать кучу вспомогательных классов (.col-xs-push-4 и т. п.), которые по большей части не используются.
Перекрытие ненужных стилей
Так как fast-grid — это набор mixin-ов, сам он не генерирует ни одного правила в css. Поэтому тут вы не столкнётесь с тем, что фреймворк стилизует элементы так как вам не надо. Да и вообще, это только сетки, и ничего больше.
Чужие стандарты и code-style
fast-grid — это mixin-ы, которые вы должны использовать внутри ваших классов, с такими наименованиями, которые вы сами предпочитаете. Любите БЭМ? Не вопрос!
Устаревшие методы
По умолчанию используется flexbox, что открывает множество возможностей и решает проблемы классических float. Например, можно легко менять порядок колонок.
В примере ниже, мы выводим сайдбар ниже основного содержимого для мобильной версии, и делаем его первым блоком на больших экранах.
Можно было бы конечно этого добиться с помощью pull/push для float, но это очень костыльно.
Заключение
В целом, поставленная для меня задача была выполнена — теперь сетки для меня больше не вызывают никаких проблем, и вёрстка идёт быстро и легко. Больше о возможностях fast-grid вы можете почитать в репозитарии и рассмотреть на примерах:
Вы всё ещё используете bootstrap? Тогда мы идём к вам!
Комментарии (117)
dpr
30.07.2017 14:39+2Все то же самое делаю на 4 версии бутстрапа (слегка модифицированной и неполной — только сетка). Так же просто добавляются брикпойнты, так же легко используются миксины сетки =) Надо было тоже статью запилить ))
А вообще интересно, надо будет глянуть ваш велик.
pvasili
30.07.2017 16:16Зачем изобретать велик в 17 году, когда везде уже Grid Layout?
PaulZi
30.07.2017 16:24+3Grid Layout, к сожалению, можно использовать только если пожертвовав аудиторией с отсталыми браузерами. В частности, iOS его совсем недавно начал поддерживать.
pvasili
30.07.2017 16:35Извращенцами с Опера мини думаю. что можно пренебречь...
PaulZi
30.07.2017 16:41+1Вы всё-таки игнорируете значительную долю iOS 10-10.2 с почти 2% global usage, а также стандартный браузер в Samsungах, старые Androidы.
Даже по данным caniuse поддержка — 65.64% + 5.11% = 70.75%, т. е. 30% аудитории за бортом. Конечно для некоторых сайтов это может быть и норма, но типичные интернет-магазинчики, чуть ли не хотят ie9, поэтому для них рановато.
AndrewMed
30.07.2017 17:08-6с удовольствием пожертвовал бы тобой, да к сожалению не в курсе какой какой ты занимаешься…
Alexufo
31.07.2017 01:45+1пока однажды не придет злой шеф, и не скажет что их самый крупный клиент сидит на IE6 и манал любые аргументы — у него не работает.
Бывает))
предсказуемость — крепкий сон.
franzose
01.08.2017 03:59Опера Мини ладно, а что прикажете делать с Internet Explorer? Там flexbox-то еле-еле работает в 10-11 версии.
PaulZi
01.08.2017 10:26Доля ie версии ниже 11 уже достаточно сильно упала (0.3% и ниже), поэтому, я думаю, от них уже точно можно избавляться. А в 11 версии флексы уже более-менее нормально работают.
RSalo
31.07.2017 06:22логический вопрос, зачем поддерживать тех, кто отсталый? если хотят на старье сидеть, то пускай получают что получают…
fogx
31.07.2017 12:59Потому что это больно бъет по лояльности пользователей.
Потому что у тех, кто до сих пор сидит на старых версиях, как правило есть на это причины — иначе б не сидели.
И в сотый раз тыкать их носом в эти причины — все равно как инвалиду прямо в лицо шутить про «нет ножек — нет варенья».
Это не заставит их обновиться (потому что причины никуда не исчезли), но очень сильно настроит против вас.
alvvi
30.07.2017 17:08+1Что мешает использовать @extend? Я сейчас его использую в связке Stylus + Bootstrap 4 Grid засунутый в отдельный .styl файл, и пока что не встречал кейсов, где бы оно не работало. По сути это решает 80% описанных вами проблем, а остальные 20 решаются путем кастомной сборки сетки, которую можно сделать просто подправив две-три переменные и скомпилировав sass.
anttoshka
30.07.2017 18:32Да наверное многие верстальщики пишут свои миксины для создания сетки. У меня например мой миксин вызывается
@include col(1, 2)
Обеспечивается любое количество колонок любой ширины. Если кому интересно, могу привести код миксина и примеры использования. Прекрасно работает и очень удобно использовать совместно с миксином для брекпоинтов (тут на хабре я его и взял).kuraga333
30.07.2017 19:46Интересно :-)
anttoshka
31.07.2017 12:21// Миксин для работы с брекпоинтами. @mixin respond-to($media) { @if $media == tablet-min { @media only screen and (max-width: $small) { @content; } } @else if $media == tablet { @media only screen and (max-width: $large) { @content; } } @else if $media == notebook { @media only screen and (max-width: $wide) { @content; } } @else if $media == phone { @media only screen and (max-width: $phone) { @content; } } } // Миксин для создания колонки. На вход принимает какое количество колонок занимает блок и сколько всего колонок в строке. Опционально - отступы. @mixin col($width, $cols, $padding: 15) { flex-basis: $width * 100% / $cols; max-width: $width * 100% / $cols; padding-left: $padding + px; padding-right: $padding + px; flex-shrink: 0; flex-grow: 0; } // Использование примерно такое: // Контейнер для блоков items { display: flex; } item { @include col(3, 12); @include respond-to(tablet-min) { @include col(6, 12); } @include respond-to(phone) { @include col(12, 12); } }
co6epuryceu
30.07.2017 22:00Там это, август 2017 года, немало кто уже на гридах лупит разметку. А тут сеточную библиотеку предлагают. Ну если я не ошибаюсь, то альфа 4-ого бутстапа в Sass и на флексах, легко кастомизируются брейк-поинты, и тащить можно только сетку, без элементов.
Наверное, у каждого верстака есть свои «заготовочки» на случаи авралов и заказов «на вчера», куча статеек и туториалов по созданию собственных.
Видать, мне повезло, но описанный велосипед вообще не решает никаких проблем для меня как для верстака.
youlose
31.07.2017 02:261. Для правильной поддержки flexbox надо подключать полифиллы (то есть у какой-то части аудитории сайт будет лишний раз перерендериваться и глючить) и/или поддерживать 3 стандарта, плюс есть нюансы при выводе флексбоксов при загрузке страниц. Если это противопоставить уже отлаженным float сеткам, мне кажется этот геморрой не нужен.
2. Использование фреймворков это использование их документации для привлечения новых членов команды в том числе, видимо автор только один работает.
3. Написание своей сетки у большинства верстальщиков выливается в адское месиво медиа-запросов, неоднообразных и порой очень нелогичных
4. Чтобы от вёрстки по сетке была максимальная отдача нужно чтобы дизайнер знал заранее что нужно верстать лайаут под сетку
5. Сетка даёт скорость и пониженные требования к верстальщику при вёрстке отзывчивых сайтов. Плюс если посмотреь п.2, это даёт возможность быстро подключить новых членов команды.
6. Я там выше читал про странных людей с сетками в 11 колонок, так вот их неспроста 12, это число делиться на максимальное количество делителей и имеет гибкость для того чтобы уменьшать и увеличивать размеры областей для лайаута. Если дизайнер про это не знает, горе такому проекту.
7. Да, сетка даёт некоторые дополнительные ограничения, но это забота ДИЗАЙНЕРА (см. п. 4), никак не верстальщика.
Насколько я в курсе, флексбокс придумали для отзывчивой замены таблицам и совать их куда попало — странное пожелание.
Aingis
31.07.2017 11:57+1- Flexbox — IE11+ (IE10 с автопрефиксером). Какие ещё полифиллы? Да ещё в CSS.
- Людей, знающих CSS, заведомо больше знающих фреймворк. Тем более что фреймворк в вёрстке — это из области фантастики.
- На флексбоксах и гридах можно сделать многое автоматически вообще без медиа-выражений. Нормальный дизайн проставляет чёткие контрольные точки.
- Скорее кодер, верстальщик может сверстать любую сетку. Это вообще пункт про взаимодействие, а не вёрстку.
- Опять же, это про взаимодействие.
- Оффтоп.
- Ну вот и славненько!
youlose
31.07.2017 13:021. Не знаю зачем вы хотите проигнорировать часть аудитории, но есть куча мобильных устройств (мы же для них делаем отзывчивую вёрстку?) где флексбокс поддерживается только старого образца или не поддерживается вовсе. Есть корпоративные клиенты у которых IE9 и изменить это никак они не могут. Поэтому и нужны полифиллы, а если их не использовать то надо будет на каждый чих делать фоллбеки, что не вяжется с простотой и удобством. И ради чего? Чтобы некоторые колонки могли автоматически тянуться/сжиматься? Сомнительное удовольствие, похоже на внедрение фичи только ради флексбокса, тем более таких элементов обычно немного их можно и сделав лайаут сеткой с флоатами, их уже реализовать флексами с фоллбеком.
2. Вы правда не видите разницу между:
«зайти и посмотреть документацию с примерами на сайте»
и
«ковыряться в чужом css и размётке в поисках примеров кусков которые вы будете использовать далее»
?
по моему опыту это разница в десятки часов. А по поводу «фреймворка в вёрстке» и «фантастики», если вы присмотритесь, больше трети сайтов в интернете используют bootstrap сетку.
3. Я не видел отзывчивых сайтов без медиа запросов, а если мы от них не избавляемся и существенно их не уменьшаем, то плюсов не особо от флексбокса и гридов есть. А минус — это дополнительные телодвижения для обеспечения совместимости, чтобы показывалось везде однообразно.
4. Не любую, выше же писали удивительные вещи про 11 колоночную вёрстку. Если дизайнеру сразу сказать какая будет сетка, то получиться макет который быстро и качественно верстается.Aingis
01.08.2017 13:35- Это где вы нашли такую кучу устройств, не поддерживающие флексбоксы? Подавляющее большинство iOS на последней или предпоследней версии, там всё хорошо. Андроиды с Хромом или даже хоть и устаревшими, но поддерживающими кастомными сборками Хрома.
Корпоративные клиенты с IE9? Они на Висте что-ли сидят? Так её даже Майкрософт не поддерживает. Заканчивайте с некрофилией, заломите ценник, в конце концов. Когда речь заходят о деньгах, часто оказывается что старые браузеры не так уж нужны. - Документацию на сайте? Это на каком? Я знаю только один такой сайт — со спецификациями W3C. Никогда не видел актуальной и полной документации по проекту, если она не автогенерируемая, но для CSS это фантастика.
- Я не видел — значит этого нет? Логика! Повышайте кругозор, ниже есть пример.
- А это разве не работа дизайнера, сказать какая будет сетка?
youlose
01.08.2017 14:371. Просто на ресурсах для которых вы верстаете, народа нет… Ничего если будете меньше хайповать и больше приносить пользу бизнесу такие появятся. И ещё, бизнесу флексбокс деньги не приносит их приносят пользователи, поэтому отказываться от пользователей ради… ради чего, собственно? Чтобы верстальщику было приятнее? Бу-га-га
2. для бутстраповской сетки
дока фаундейшна
И там и там есть исчерпывающая информация с примерами как пользоваться (а в чужом css файле и чужих шаблонах кровь и кишки).
3. Вместо пустых слов лучше привести пример. А предложение — «иди и ищи сам», говорит о том, что не знаете сами что показать.
4. Большинство дизайнеров не разу в жизни не верстали, и лепят макеты без волнений о том как быстро и удобно будет верстать их вазюканье, соответственно и про сетки не очень многие знают. Я уже писал выше, чтобы модульные сетки давали прирост надо чтобы и верстальщик и дизайнер работали сообща, тогда результат будет в разы быстрее и качественный.
Сетки дают:
— неудобство верстальщику (да, это ограничение)
— сильно упрощает и ускоряет скорость вёрстки отзывчивых сайтов верстальщику и даёт некоторые неудобства, если дизайнер ничего не знает про сетки и для чего они нужны. Плюс даёт упрощение поддержки чужой вёрстки в разы.
— удешевление в целом нового дизайна для заказчика и ускорение получения результата для него
Так что страдают в основном дизайнеры.Aingis
01.08.2017 18:001. По первой части сами поняли что написали? По второй: бизнесу нужна быстрая и надёжная разработка, флексбоксы тут вне конкуренции.
2. Вы это всерьёз? Там столько страниц, что пока будете читать и искать, я уже сверстаю.
3. Facepalm. Перечитайте внимательней.
4. Дизайнеров надо воспитывать, хватит ныть! (И брать за это деньги тоже.)
- Это где вы нашли такую кучу устройств, не поддерживающие флексбоксы? Подавляющее большинство iOS на последней или предпоследней версии, там всё хорошо. Андроиды с Хромом или даже хоть и устаревшими, но поддерживающими кастомными сборками Хрома.
Alexufo
31.07.2017 16:18+1IE11+ (IE10 с автопрефиксером) — это охренеть как много людей, причем если сайт предполагает аудиторию 50+ или связанное с государством и законами это будут честные <30% аудитории.
Пока не сталкиваешься с личной болью от проблем старшего поколения в иешниках, только тогда задумываешься что человек все таки не виноват.
rockon404
31.07.2017 10:02+1Сетка bootstrap давно не на float. Да и sass у них сейчас стандарт. Сетку под свои нужды на flex написать 2 минуты.
white_wolf_17
31.07.2017 10:02Почти все, что описано в статье — неактуально для bootstrap4
Все, кто работал с bootstrap знает, что его сетка по умолчанию 12-кратная, поэтому 5 колонок в ряд стандартной бутстраповской сеткой ну никак не сделаешь.
— в четвертой версии сетка основана на flex, соответственно есть класс ".col", который растягивается в зависимости от количества элементов
Очень часто в стандартной бутстраповской сетке не хватает дополнительных брейкпоинтов, т. е. есть xs, sm, md, lg — все они до ширины 1200px.
— четвертая версия использует scss, потому через переменные можно легко создать новые брекпоинты.
Часто css-фреймворк подключают весь только ради сеток и пары мелких функций
— Это вообще дурной тон подключать весь bootstrap.min.css. Лучше использовать bootstrap scss, и подключать только нужные компоненты, например: сетку и элементы форм
Как известно, сетки в bootstrap 3 основаны на float-ах.
— Bootstrap 4 на флексах
Cherous
31.07.2017 10:03Почему не вариант дописать в тот же bootstrap свой формат сетки? Например .col-lg-my5 {width: 100%/5;} который в том числе можно подмешать в существующую систему сетки!
white_wolf_17
31.07.2017 10:05Если писать такие стили, то тогда и смысл сетки отпадает. Тогда лучше писать все самостоятельно и правила задавать через медиа-выражения
Cherous
31.07.2017 10:33Автор статьи выделяет нестандартные сетки, как одну из проблем. В чем проблема расширить существующую сетку до нужного формата? Один класс, одно правило и решена одна типа глобальная проблема… можно двигаться дальше и удивляться полету творческой мысли со стороны дизайнеров.
.col-lg-my5 {width: 100%/5;}
Собственно маленький кусок кода, который и написан самостоятельно, а трогать медиа-выражения на данном этапе проблемы вообще не вижу необходимости т.к. добавив нужный класс из сетки bootstrap'a на иных разрешениях экрана просто скроет этот не стандартный вид сетки.
Или еще более глобальное и кардинальное решение: в переменных bootstrap можно задать шаг сетки (количество колонок) и препроцессор все необходимые вычисления уже сделает самостоятельно.
mityukov
31.07.2017 11:12А не имеет ли здесь место так называемый "overengineering"? Просто мне клиентский код этого fast grid кажется сложнее чем голый flex. Не исключаю, впрочем, что это с непривычки, флекс же тоже не сразу зашёл :)
PaulZi
31.07.2017 11:20В первую очередь это инструмент, чтобы не писать тучу
@media (min-width){}, возьмём типичный пример отображения каталога товаров:
.prd__row { display: flex; flex-flow: row wrap; margin: 0 -15px; /* карточки должны быть вровень с текстом выше */ } .prd__item { width: 100%; padding: 0 15px; /* отступы между карточками */ } @media (min-width: 768px) { .prd__item { width: 50%; } } @media (min-width: 992px) { .prd__item { width: 33.33333%; } } @media (min-width: 1200px) { .prd__item { width: 25%; } }
А теперь сравните это с этим:
.prd__row { @include grid-row(); } .prd__item { @include grid-col(12 6 4 3); }anttoshka
31.07.2017 12:29А почему вы сравниваете scss и css? В первом случае на scss будет конечно же больше строк написано, зато сразу понятно всем. А подключая миксин нужно уже разбираться что он делает, что там у него за аргументы. Кроме того на разных размерах экрана можно изменять не только саму колонку, но и что-то еще.
PaulZi
31.07.2017 12:39Не сильно меньше:
.prd__row { display: flex; flex-flow: row wrap; margin: 0 -15px; /* карточки должны быть вровень с текстом выше */ } .prd__item { width: 100%; padding: 0 15px; /* отступы между карточками */ @include breakpoint($tablet) { width: 50%; } @include breakpoint($desktop-s) { width: 33.33333%; } @include breakpoint($desktop-m) { width: 25%; } }
Естественно, кроме изменения сеток нужно ещё что-то менять, но статья о сетках, и как их быстро писать с вашими настройками отступов (а не только 15px по дефолту), и колонок (не только 12 по дефолту).
PS. Есть хелпер и для произвольных стилей:
.prd { @include grid-breakpoint(sm) { display: none; } }youlose
31.07.2017 13:09Вот вы рассуждаете про хайповый flex, а используете пикселы. Целую группу пожилых пользователей заставляете мучаться после вашей вёрстки (они не смогут изменить размер шрифта по умолчанию, им придётся зумить на каждой странице).
PaulZi
31.07.2017 13:40А что не так с пикселями в отступах? Их и bootstrap использует)
youlose
31.07.2017 13:52Зайдите на Яндекс маркет и lamoda. Измените в браузере размер шрифта по умолчанию на большой.
Вот для хрома где настройка:
Ну и туда-сюда поменяйте размер шрифта и посмотрите на разницу.PaulZi
31.07.2017 14:09Как изменение размера шрифта по вашему должен отражаться на отступе между колонками? По-вашему, он должен увеличиваться? Тогда ширину сайта тоже придётся менять, иначе с крупными шрифтами текст ещё меньше влезать будет.
youlose
31.07.2017 14:21Расстояния между колонками будут пропорционально увеличиваться. Смысл отзывчивости в том что сайт должен на любом разрешении выглядеть хорошо.
А про то что текст не будет влезать, у меня есть вот такая история из жизни:
«Однажды я верстал по фрилансу сайт и после того как я закончил, выложил последние изменения заказчику. Тот позвонил, открыл скайп и стал в браузере в инспекторе в каждую строчку где есть текст набирать тексты произвольной длины с длинными словами без пробелов. Ну и везде всё повылазило, местами развалилось… В общем я доделывал ещё несколько дней… И после этого в других проектах весь текст у меня стал помещаться или имел какие-то ограничения которые я сразу же обсуждал с дизайнером и он просто грамотно обрезался...»
Я это к тому что навык набивается болезненно, но с первого раза и наверняка ;-)PaulZi
31.07.2017 14:43Я всё-таки не понимаю, зачем увеличивать пропорционально расстояния между колонками, если ширина сайта у вас не меняется? С чего вдруг расстояния между колонками должны увеличиваться за счёт ширины этих колонок, при увеличении шрифта, а не от ширины сайта? Какая-то странная пропорциональность, если честно.
Alexufo
31.07.2017 15:11Бутстрап 4 использует пиксели только в брейкпоинтах.
PaulZi
31.07.2017 15:19Вы ошибаетесь.
Alexufo
31.07.2017 15:46Поправочка:
Switched from px to rem as our primary CSS unit, though pixels are still used for media queries and grid behavior as viewports are not affected by type size.
Aingis
31.07.2017 13:08Зачем так сложно? Делаете растяжение с
min-windth/flex-basis, и всё переносится само.
.prd__row { display: flex; flex-flow: row wrap; margin: 0 -15px; /* карточки должны быть вровень с текстом выше */ } .prd__item { flex: 1 0 330px; padding: 15px; /* отступы между карточками */ }
Пример на Codepen (стили немного отличаются для наглядности).
PaulZi
31.07.2017 13:39Вариант работает в очень "примерно", и не привязан к сетке. Кроме того, как минимум у вас не влезает блок в 320px, и появляется горизонтальный скролл.
Aingis
31.07.2017 14:10А вы флексбоксы вообще знаете? Изучите!
320pxлегко чинится черезflex-shrink: 1. Например, как-то так:
.prd__item { flex: auto; /* = 1 1 auto */ width: 330px; }
min-widthставите по желанию. Обновил пример на Codepen.PaulZi
31.07.2017 14:53Как вы ловко поменяли местами flex-basis <=> width и 330px <=> auto, как говорится «следите за руками»)) Вы бы прежде чем обвинять кого-то не в знании, проверяли бы свои примеры.
Вот ваша следующая ошибка — на 1024 у вас 2 колонки, а не 3 как должно быть (из-за скролла). А на 1280 3 вместо 4.
А вообще, ваш пример хорошо вписывается только потому, что:
330 * 1 < 360
330 * 2 < 768
330 * 3 < 992
330 * 4 > 1200Aingis
01.08.2017 12:19Говорю же вам: изучите флексбоксы! Ваш комментарий выдаёт незнание чему равен
flex-basisпо умолчанию, а это — внезапно! — именно ширина элемента.
Попиксельно я не ровнял, это ваша задача как верстальщика, я лишь показал возможность. То что пример слегка отличается, было сказано сразу.
Вписывается хорошо потому что так и должно быть с грамотной сеткой, не так ли?
PaulZi
01.08.2017 13:52«Я вам там что-то кинул, оно не работает как надо, но не знаете flexbox именно вы». До чего же люди нетактичные пошли, на справедливое указание ошибки, сразу обвинять в незнании. В чужом глазу соломину видеть, в своём — бревна не замечать. Удачи!
Вот вам ваш исправленный пример: CodePen
Пойдём дальше разбирать ошибки. В случае, если нижняя строка не полностью заполнена, блоки растягиваются на ширину до заполнения. Так не должно происходить в нормальной сетке. Все карточки должны быть одинаковой ширины между собой.Aingis
01.08.2017 15:47Ну, вот можете же, если заходите! Поменьше ныть и побольше делать — и всё получится!
Недозаполненность нижней строчки — баг дизайна прежде всего. Ну, будет там пустое место — хорошо смотрится что-ли? Можно, например, сделать ограничение на контейнер, чтобы предотвратить такую ситуацию. Или добить пустыми элементами-костылами той же ширины и нулевой высоты, чтобы выровнять по сетке. Кажется, были и более хитрые трюки, но с ходу не находятся.
Но, вообще говоря, с задачей сеток, как ни удивительно, лучше всего справляются сетки. Не то недоразумение с классами «col-md-3», а настоящие — CSS Grid Layout. Flexbox в данном случае тоже полухак, хотя и с лучшими результатами чем всё, что было до этого (меньше возни и костылей, независимость от медиа-выражений, можно танцевать от размеров контейнера и так далее).PaulZi
01.08.2017 16:19Такая ситуация скорее норма, чем исключение, и это не бага дизайна. Если в каталоге лежит 5 товаров, а у вас в строчке их по 4 выводится, то это нормально переносить один элемент на новую строчку.
Grid Layout — вещь хорошая, но доля неподдерживаемых браузеров слишком велика.
dom1n1k
04.08.2017 03:28Да, поведение последней строки — это безусловно баг дизайна.
Баг дизайна флексбокса.
Большое упущение разработчиков.
YemSalat
31.07.2017 14:49необходимость использовать bootstrap
Ерунда какая-то, всегда был против этого карго культа. Постоянно встречаю проекты «на бутстрапе» в которых примерно половина стилей — это борьба с этим «чудо-фреймворком»
bro-dev
Я не могу понять зачем кому то нужны сетки? Какие задачи с ними решаются проще чем без них? Сколько верстаю не разу не встречал разумного их использования, там где они есть это значит не разбирающийся заказчик настоял на этом и разрабу пришлось надевать трусы через голову.
pvasili
Сразу видно, что у вас не было проектов сложнее 3 колонок блога шапка+футер… :)
Ronnie_Gardocki
Хрень какую-то пишите. За 3.5 года бурной фронтенд разработки юзал сетки (бутстрап) всего 1 раз, до сих пор стыдно. 99.99% нормальных сайтов с кастомным дизайном (а не лендосов от васяна для вордпресса и битрикса) всегда проще пилить «как есть», вместо того чтобы втискивать туда сетку и затем мучаться с костылями под тонны нестандартных вещей (а кастомный сайт, то бишь ЛЮБОЙ нормальный проект, подразумевает что там будет вагон нестандартных вещей). Я даже не знаю насколько примитивным и убогим должен быть сайт, чтобы более чем 10-20% контента там было основано на сетках (и я уж молчу про 50%+).
pvasili
Всего 3.5 года и рассуждать о крупных проектах без сеток, да ещё только со стороны фронта…
Я бы не стал тут махать, чтобы не показывать свой низкий проф. уровень и слабые знания предмета :)
andreymal
Копаюсь и во фронте, и в бэке года с 2009-го (с ~14 лет, ага), клепал кучу всяких разных сайтов, прям щас делаю крупный проект, смысла сеток не понимаю тоже. Абсолютно все сайты, которые я пилил, или настолько примитивны, что сетки просто не нужны (типа сайт всего в одну колонку или контент+сайдбар), или настолько сложны по дизайну, что прогнуть под них бутстрап или что-нибудь ещё готовое не представляется возможным. Ещё больше добавляет непонимания смысла то, что любую сетку с любой адаптивностью можно запилить на чистом CSS3, наверно, минут за 10-20 — изучение готовых решений занимает, блин, больше времени, а потом ещё и костыли к ним прикручивать из-за нестандартного дизайна… !important, кстати, не юзал ни разу. Какие проблемы решают готовые сторонние сетки?
PaulZi
Типичный пример использования сеток — каталог товаров/галерея изображений, который на мобилке должен быть в одну колонку, на планшете в две, на десктопе в 3-4.
andreymal
(можно использовать flexbox или что-то ещё новое, будет примерно так же)
Что упростит бутстрап или что-то иное в данном случае?
PaulZi
Ну вот, у вас и получается куча медиа-запросов (вы упростили код, у вас должно быть 3 медиазапроса), и при этом "чтототам" надо всё время держать в переменной. Плюс вы забыли в вашем случае clearfix, который может понадобиться, а также сложности с написанием дробных значений (т. е. писать 33.33333%).
С помощью велосипеда это две строчки:
andreymal
Содержимое скобок вы проигнорировали, ясно :)
Это «чтототам» где-то держать придётся в любом случае, потому что пришёл дизайнер и сказал, что на вертикальном айфоне надо одну колонку, на горизонтальном две, а на айпаде три, причём на этом айпаде 2 и 4 колонки поменять местами, а не влезшую последнюю колонку растянуть на всю ширину (это не выдумка, я прям щас решаю очень близкую к этой задачу в том самом крупном проекте). Быть может, я слишком мало знаю о сетках, но по крайней мере сейчас мне неизвестны готовые решения, упрощающие решение подобных задач, зато на flexbox написать такое раз плюнуть.
Для дробных значений есть calc, если на IE8 и прочую некромантию плевать.
domix32
andreymal, PaulZi устроили бы код-баттл на JsFiddle каком-нибудь. А то все об полуабстрактных конях спорите
zinkinru
Всё, что вы написали с колонками делает бутстрап из коробки.
andreymal
Есть где-нибудь пример, близкий к тому, что я описал? На офсайте не видно.
zinkinru
Разная ширина колонок – http://getbootstrap.com/css/#grid-options
Перестановка колонок – http://getbootstrap.com/css/#grid-offsetting
andreymal
Вторая ссылка неправильная, но окей, на той странице есть то что я просил.
(но использовать бутстрап я всё равно не буду, но уже по личным причинам, от расписывания которых воздержусь)
Alexufo
Если сайт у вас состоит только из этой строчки то конечно же ничего.
Сетка позволит вам:
1) Разделить разметку положения блоков и оформление. Никто не дает гарантии что вы или кто-то решит дописать бордер или цвет к .kolonka
В конечном итоге все равно вы изобртаете свой некий подход для разделения лейаута и оформления.
2) Избавит от копипаста и изобретения стилей ради лейаута.
3) Предсказуемость при адаптиве
4) читаемость без обращения к css
andreymal
1) Во-первых, не вижу в этом смысла, во-вторых, это можно делать и без сторонних решений если будет надо. Если кому-то надо дописать border — пусть дописывает, какие проблемы?
2) Копипаста нет, стили в большинстве случаев уникальные у разных блоков (на сделанных мной сайтах по крайней мере)
3) Сетка здесь вообще ни при чём, нормально именуем классы (как именно — вкусовщина) и соблюдаем семантику и всё пучком
Alexufo
1. Я сторонник разделения лейаута и оформления. Мне так проще мыслить, проще предсказывать и задавать условия для адаптивщины. Проще взаимодействовать с другими людьми. Интегрировать, делать модульность.
завидую)2. Вытекает из первого. Для меня все что Float: left, width, clear и пр для блоков — это к лейаутам.
3.
andreymal
1. Ладно, ваше право. Только мне всё равно непонятна связь с готовыми сетками, я могу разделить всё и вручную за те же 10 минут в среднем, при этом я не ограничиваюсь возможностями готового решения и имею все возможности flexbox и прочих CSS-плюшек без всяких костылей
2. Вытекает из первого
3. ?\_(?)_/?
3 из отредактированного комментария: лично мне нужна не какая-то там предсказуемость, мне нужен наиполнейший контроль над адаптивностью с точностью до любого пикселя, потому что дизайн может отличаться в таких самых разных мелочах, что никакое готовое решение не сможет дать мне нужной гибкости и мне остаётся только городить media
Alexufo
Так одно другому совершенно не мешает.
К примеру, сетки на на флексе дают мышление представленное в этих категориях
http://flexboxgrid.com/
Надо выравнить блок по горизонтали
классы: Слева-, справа-, по центру-.
Надо выравнить блок по вертикали
классы: наверх-, по центру-, вниз-
Как распределить дочерние блоки
Какой порядок.
И так далее.
Одна сущность отвечает на 1 потребность. Вы остаетесь в категориях в которых мыслите при разметке страницы без обращения к css.
Не нужно придумывать ни классы, ни прописывать очевидные вещи.
В чем же здесь костыли или где тут готовое решение? Это отлично помогает не дублировать самого себя. А какие то мелочи, да, приходится добивать.
К тому же, заглядывая в код сайта сбера приятно видеть заимствованные с бутстрапа имена классов сеток к добавлению их неведомой лапши на media). Вместо имен классов в основе который лежит чья то детская травма полученная уроке английского языка)) Вобщем, унификацию имен — я одобряю)
andreymal
Идеальный HTML не должен содержать НИКАКОЙ информации о том, как он будет выглядеть — именно для этого изобретали CSS. В идеале должно быть возможно просто заменой CSS-файлов изменить до неузнаваемости внешний вид, включая количество и расположение колонок. Я в своём коде стремлюсь к этому, а всякие col-xs-12 это условие нарушают. В этом плане вариант сетки из обсуждаемого поста мне нравится больше, так как он не затрагивает HTML, но он всё ещё с трудом способен решить мои сложные задачи, так что лично я пока продолжу писать всё на чистом flexbox, благо мне это всё равно нетрудно.
Alexufo
Не совсем согласен.В идеале вы описываете ситуацию, когда CSS существует вообще отдельно без HTML. А пока этого нет, изменение до неузнаваемости через css доконца невозможно. Отсюда не вижу великой разницы между сочинением классов и использованием готовых.
overtest
andreymal
Писать в комментариях production-ready код, параллельно играя в Xonotic, как-то лень)
Ronnie_Gardocki
>Я бы не стал тут махать, чтобы не показывать свой низкий проф. уровень и слабые знания предмета :)
О, люблю эти песни. Вот только моя зарплата с моим «низким проф уровнем» скорее всего раза в 2+ выше вашей, товарищ опытный эксперт :) Причем платят мне явно не за просто так. +у меня имеются неиллюзорные пруфы того что я не верблюд, в то время как вы очереденой «сторожил с хабра» (что доказывает ровным счетом ничего)
Evgeny42
Суэц, хватит кичится уже. Каждый раз как вижу твои комментарии, все время пишешь про зарплату. Не надоело? :)
Ronnie_Gardocki
Мне её повысили на прошлой неделе, дай порадоваться то :(
Evgeny42
Хорошо, но больше, чтобы такого в интернете я от тебя не видел!
alvvi
А вы то сами уверены что не хрень написали? Сетка это не фреймворк. Сетка не создает никакого дизайна, она лишь помогает создавать лэйаут сайта. Вы как считаете, хабр подходит под ваше определение «лендос от васяна для вордпресса»? Так вот, на хабре используется сетка. Устаревшая, построенная на таблицах, но все же сетка, скорее всего самописная, но только вот сетка бутстрапа ничем не хуже, количество CSS говнокода там минимально. А вот как раз самодельные велосипеды на других сайтах зачастую пестрят всякими !important и длинными цепочками классов, которые только тормозят рендеринг и обычно нечитаемы, а если, не дай бог, вам захочется в ней что-то изменить — без кровавых слез обходится редко.
Не отрицаю, конечно, что, вероятно, только мне достаются в поддержку говносайты, а все остальные пишут сетки чисто, аккуратно и читабельно, только вот какой смысл велосипедить при наличии готовых решений?
Ronnie_Gardocki
Отличный пример с хабром, сайт с 2 колонками, у которого даже нет адаптива и надо переключаться между кастрированной мобильной версией и десктопом на телефоне.
Суть в том что сетка загоняет вас в определенные границы, сильно урезая возможности кастомизации. А кастомизация это основа основ для любого нетривиального сайта. Это примерно тоже самое и что тема с использованием готовых решений для UI элементов и всяких там плагинов. Вначале экономишь время, подрубая готовый компонент и радуешься тому, какой-то эффективный погромист, а пару недель спустя материшься, потому-что тебе надо припаять 5 модификаций, которые без дикий костылей вот вообще не хотят присобачиваться, потому-что изначально готовый компонент не должен был уметь делать что-либо подобное.
alvvi
В какие границы вас загоняет сетка? Что, допустим, в той же бутстраповской сетке невозможно кастомизировать? Какой-нибудь практическйи пример задачи связанной с лэйаутом, с которой вы часто сталкиваетесь и которую невозможно решить сеткой будет? Ну хоть сайт покажите, что ли.
Если вы хоть немного знакомы с дизайном, о котором сами говорили, то должны прекрасно знать, что сами дизайнеры как раз таки используют сетки для построения макетов, даже самых кастомных и необычных, у любого сайта, если это не глубоко художественная работа, есть некоторая общая структура, повторяющиеся блоки, система отступов: так же как и вертикальный ритм текста, подобное существует и у блоков. Сетка как раз и помогает сохранять эту структуру и обобщить одинаковые стили применяемые ко многим элементам с целью их расположения на странице.
Ronnie_Gardocki
Про сетки у дизайнеров я знаю, каждый макет в зеплине пестрит ими.
По поводу ограничений с сетками, вот вам простой пример:
у вас есть несколько контейнеров разной ширины. И в них нужно реализовать простые сетки, и что самое важное, они все должны быть с margin, причем margin'ы могут отличатся. Где-то контейнер 900px с 5 итемами и отступом в 14px, где-то например 790-6-10 (цифры наобум, но в реальности все это встречается). Своими силами (и весьма простыми миксинами) я смогу реализовать все идеально в каждом из случаев, и что самое важное, поменять это моментально, например увеличив margin с 10 до 12 пикселей (просто поменяв одну переменную в SCSS). + у меня будет полный контроль над адаптивом, без привязки к топорным глобальным брейкпоинтам (аля $phone, $tablet, $smallDesktop, $largeDesktop, словно на дворе 2013 все еще, где нет телефонов с 400px+ ширины и так далее), в с возможностью настраивать все на весьма гибких разрешениях и реализовывать любые хотелки, без борьбы с собственном кодом.
Как конкретно это будет выглядеть с заранее заготовленными сетками, мне вот очень интересно?
IT_Hound
Если Вам не нравятся сетки то это не повод их хэйтить глобально. Они в первую очередь призваны экономить Ваше время — если Вы считаете что они бесполезны то зря. В любом случае при необходимости что-то изменить во внешнем виде сайта Вам придется лезть в стили и что-то менять независимо от того на бутсрапе это сделано или нет.
Бутстрап в первую очередь инструмент для экономии времени, который также можно адаптировать под любые нужды, написанием дополнительных стилей.
Ronnie_Gardocki
Проблема в подходе «сделаем одно мегарешение которое решит все проблемы». Это утопия, которая работает только в простых случаях. В реальности лучше пилить все отдельно для каждого случая, запихивая повторяющиеся части в миксины. Но реализации с миксинами не совсем корректно называть сетками, ибо ты же не будешь говорить что у тебя в проекте «10 разных сеток»?
IT_Hound
В таком случае выбор зависит уже от пожеланий заказчика целиком. Если у него есть четкое понимание какие технологии в дальнейшем будут использоваться на его проекте. Если нету то bootstrap как раз поможет в очередном простом случае, когда верстка это не более чем внешний вид сайта.
Alexufo
На десктопе в разработке все контролы и гайдлайны заданы. Там никто не рисует без необходимости свой дизайн при разработке программы.
А в вебе этого просто нет. Браузеры все пляшут стандартами. Бутстрап позволил кодить вещи, не запариваясь на разработку дизайна как в визуалстудии накидывая компоненты. Представляете себе визуал студию без компонентов дизайна? Чтобы каждый проект люди заново сначала рисовали кнопки паддинги к чекбоксам? Это же катастрофа.
В визуалстудии компоненты GUI тоже одно мегарешение которое решит все проблемы? Конечно же нет. Никто тут из комментаторов так узко не мыслит.
Реальность у каждого своя. Атаки на личный способ работы взаимодействия с реальностью подрывают личные убеждения и вызывают тревогу. Отсюда эти прыжки в категориальность. Они скорее связаны чтобы снять личную тревогу, чем донести свою позицию.
alvvi
Это серьезно ваш мега-пример в котором невозможна кастомизация?
Никто не мешает сделать сетку с двумя, тремя, n типами контейнеров, другое дело, понятия не имею, зачем вам это, я с такими задачми встречаюсь крайне редко.
Вариант а) просто @extend-им нативный контейнер и кастомизируем width на брейкпоинтах, результат получается грязноватым, но вполне рабочим, если у вас скажем один такой выделяющийся контейнер, это переопределение ничего не затармозит.
Вариант б) пишем свой контейнер, самое вербозное что там будет — это наши брейкпоинты, заодно можно их вынести в отдельные переменные.
.row трогать не надо.
.col тоже, там где нужны margin-ы не такие как у нас по умолчанию, @extend-им .col и добавляем margin-ы. Если еще приправить БЭМ-ом, выглядеть будет так:
Опять таки, если вы не любите @extend, никто не мешает использовать сетки на миксинах, они работают точно так же, просто конечный CSS другой, даже велосипед автора вам здесь вполне зайдет, да как впрочем и любая сетка на миксинах. Если честно связи между сетками и
я вообще не вижу, переменные вы можете использовать и в классах с сеткой.
А как вы без брейкпоинтов делаете адаптивный дизайн, интересно? Если же вы имели в виду, что их недостаточно: вы можете сгенерировать их хоть на каждый пиксель, достаточно добавить в лист нужные цифры и буквы при генерации сетки.
franzose
Мне кажется, что если в макете везде разные отступы между элементами, то это повод обратиться к дизайнеру, либо вычислить среднее значение самостоятельно. Лично я сталкиваюсь с этим постоянно (а также с разными размерами шрифта тут и там). С этим надо бороться и немного усекать фантазию дизайнеров.
pvasili
Очень сложно спорить с человеком(практически невозможно), которого сетка загоняет в рамки :)
bro-dev
лендос на 5 экранов, в них по 2, 3, 5, 7, 11 колонок. расскажите какая будет сетка?
Alexufo
Нарисован лендинг с техническим условием в 5 экранов с 2, 3, 5, 7, 11 колонками?
А почему на этом технические условия заканчиваются?
Мы же говорим про то, чья мифология доминирует. Если доминирует мифология что дизайн это железно, то да, с сетками придется сложнее. Если доминирует мифология технаря — то будьте добры нарисовать технически корректный шедевр.
Сетку можно вкладывать друг в друга. Можно сделать 11 колоночной.
bro-dev
Блин от дизайнера пришел макет в псд, нечего не попишешь тут, у них есть статистика что именно столько колонок увеличивают конверсию, или еще чего, короче с точки зрения разраба менять задание не вариант.
Alexufo
Все. У вас доминирует мифология дизайнера. Он делает некий магический акт, (конечно же с маркетологами) призванный
задобрить некое языческое божествоподчинить реальность к своим ожиданиям. Куча ваших конкурентов использует невероятно разные решения, но именно молитвы к богу 11 колонок самые верные.В похожем деле я смог настоять на мобильной версии, чтобы не ломать мозги на адаптивщине с кое чьими магическими ритуалами.
dpr
В контексте того же бустрапа все довольно просто будет
dom1n1k
Наоборот, стандартные сетки аля бутстрап (12-16 одинаковых колонок) — удел именно простых проектиков со сжатыми сроками и бюджетами (лендинги, визитки, етц).
В сложной верстке сетки почти всегда свои, персонально спроектированные под задачу и контент.
franzose
Бутстрап, по крайней мере 4-й версии, легко расширяется в плане кастомных брейкпоинтов. Достаточно свой брейкпоинт добавить в карту, и он сгенерит соответствующие классы. Но иногда конечно проще сверстать по-своему.
dom1n1k
Брейкпойнты — это малая часть.
LbISS
Например, dashboard, с возможностью конфигурирования и изменения размера виджетов пользователем. Что-то типа http://dsmorse.github.io/gridster.js/
Alexufo
Сетки нужны, чтобы мыслить в дизайне адаптивно и изолировать голову от технической стороны создания лейаутов. Плохо представляю как без дополнительной абстракции прогнозировать поведение блоков адаптивного сайта.
alexfilus
Сетки нужны для ускорения работы и упрощения вёрстки. Действительно большинство дизайнов, либо слишком просты, либо слишком сложны чтобы подключать готовую сетку и втискиваться в её рамки.
Но средние по размеру студии часто дизайнеру ставят задачу рисовать всё строго по сетке (даже в фотошопе) и есть что-то не вписывается в стандартный бутстраповский грид, такой макет не принимается.
В результате ограничивается полёт фантазии дизайнера, зато верстается такой макет просто ультра-быстро, причём даже не профессиональным верстальщиком. И сразу всё получается аккуратно, адаптивно и кроссбраузерно.