Быстрые сетки для верстальщиков

    Любому верстальщику, перед которым встала очередная задача по вёрстке адаптивного макета, нужны сетки. В большинстве случаев берётся старый добрый 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 вы можете почитать в репозитарии и рассмотреть на примерах:


    GitHub
    Примеры


    Вы всё ещё используете bootstrap? Тогда мы идём к вам!

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 118

      +5
      Я не могу понять зачем кому то нужны сетки? Какие задачи с ними решаются проще чем без них? Сколько верстаю не разу не встречал разумного их использования, там где они есть это значит не разбирающийся заказчик настоял на этом и разрабу пришлось надевать трусы через голову.
        –8

        Сразу видно, что у вас не было проектов сложнее 3 колонок блога шапка+футер… :)

          +3
          Хрень какую-то пишите. За 3.5 года бурной фронтенд разработки юзал сетки (бутстрап) всего 1 раз, до сих пор стыдно. 99.99% нормальных сайтов с кастомным дизайном (а не лендосов от васяна для вордпресса и битрикса) всегда проще пилить «как есть», вместо того чтобы втискивать туда сетку и затем мучаться с костылями под тонны нестандартных вещей (а кастомный сайт, то бишь ЛЮБОЙ нормальный проект, подразумевает что там будет вагон нестандартных вещей). Я даже не знаю насколько примитивным и убогим должен быть сайт, чтобы более чем 10-20% контента там было основано на сетках (и я уж молчу про 50%+).
            –6

            Всего 3.5 года и рассуждать о крупных проектах без сеток, да ещё только со стороны фронта…
            Я бы не стал тут махать, чтобы не показывать свой низкий проф. уровень и слабые знания предмета :)

              +4

              Копаюсь и во фронте, и в бэке года с 2009-го (с ~14 лет, ага), клепал кучу всяких разных сайтов, прям щас делаю крупный проект, смысла сеток не понимаю тоже. Абсолютно все сайты, которые я пилил, или настолько примитивны, что сетки просто не нужны (типа сайт всего в одну колонку или контент+сайдбар), или настолько сложны по дизайну, что прогнуть под них бутстрап или что-нибудь ещё готовое не представляется возможным. Ещё больше добавляет непонимания смысла то, что любую сетку с любой адаптивностью можно запилить на чистом CSS3, наверно, минут за 10-20 — изучение готовых решений занимает, блин, больше времени, а потом ещё и костыли к ним прикручивать из-за нестандартного дизайна… !important, кстати, не юзал ни разу. Какие проблемы решают готовые сторонние сетки?

                –5
                Типичный пример использования сеток — каталог товаров/галерея изображений, который на мобилке должен быть в одну колонку, на планшете в две, на десктопе в 3-4.
                  +2
                  .kolonka {float: left; width: 25%;}
                  
                  @media (max-width чтототам) { .kolonka {float: none; width: 100%;} }

                  (можно использовать flexbox или что-то ещё новое, будет примерно так же)


                  Что упростит бутстрап или что-то иное в данном случае?

                    +5

                    Ну вот, у вас и получается куча медиа-запросов (вы упростили код, у вас должно быть 3 медиазапроса), и при этом "чтототам" надо всё время держать в переменной. Плюс вы забыли в вашем случае clearfix, который может понадобиться, а также сложности с написанием дробных значений (т. е. писать 33.33333%).
                    С помощью велосипеда это две строчки:


                    @include grid-row();
                    @include grid-col(12 6 4 3);
                      +1

                      Содержимое скобок вы проигнорировали, ясно :)


                      Это «чтототам» где-то держать придётся в любом случае, потому что пришёл дизайнер и сказал, что на вертикальном айфоне надо одну колонку, на горизонтальном две, а на айпаде три, причём на этом айпаде 2 и 4 колонки поменять местами, а не влезшую последнюю колонку растянуть на всю ширину (это не выдумка, я прям щас решаю очень близкую к этой задачу в том самом крупном проекте). Быть может, я слишком мало знаю о сетках, но по крайней мере сейчас мне неизвестны готовые решения, упрощающие решение подобных задач, зато на flexbox написать такое раз плюнуть.


                      Для дробных значений есть calc, если на IE8 и прочую некромантию плевать.

                        0

                        andreymal, PaulZi устроили бы код-баттл на JsFiddle каком-нибудь. А то все об полуабстрактных конях спорите

                          0
                          Всё, что вы написали с колонками делает бутстрап из коробки.
                            0
                            Есть где-нибудь пример, близкий к тому, что я описал? На офсайте не видно.
                              0
                              Разная ширина колонок – http://getbootstrap.com/css/#grid-options
                              Перестановка колонок – http://getbootstrap.com/css/#grid-offsetting
                                0

                                Вторая ссылка неправильная, но окей, на той странице есть то что я просил.


                                (но использовать бутстрап я всё равно не буду, но уже по личным причинам, от расписывания которых воздержусь)

                        +2
                        Что упростит бутстрап или что-то иное в данном случае?


                        Если сайт у вас состоит только из этой строчки то конечно же ничего.

                        Сетка позволит вам:

                        1) Разделить разметку положения блоков и оформление. Никто не дает гарантии что вы или кто-то решит дописать бордер или цвет к .kolonka
                        В конечном итоге все равно вы изобртаете свой некий подход для разделения лейаута и оформления.
                        2) Избавит от копипаста и изобретения стилей ради лейаута.
                        3) Предсказуемость при адаптиве
                        4) читаемость без обращения к css
                          0

                          1) Во-первых, не вижу в этом смысла, во-вторых, это можно делать и без сторонних решений если будет надо. Если кому-то надо дописать border — пусть дописывает, какие проблемы?
                          2) Копипаста нет, стили в большинстве случаев уникальные у разных блоков (на сделанных мной сайтах по крайней мере)
                          3) Сетка здесь вообще ни при чём, нормально именуем классы (как именно — вкусовщина) и соблюдаем семантику и всё пучком

                            0
                            1. Я сторонник разделения лейаута и оформления. Мне так проще мыслить, проще предсказывать и задавать условия для адаптивщины. Проще взаимодействовать с другими людьми. Интегрировать, делать модульность.

                            2. Вытекает из первого. Для меня все что Float: left, width, clear и пр для блоков — это к лейаутам.

                            3.
                            всё пучком
                            завидую)
                              0
                              1. Ладно, ваше право. Только мне всё равно непонятна связь с готовыми сетками, я могу разделить всё и вручную за те же 10 минут в среднем, при этом я не ограничиваюсь возможностями готового решения и имею все возможности flexbox и прочих CSS-плюшек без всяких костылей
                              2. Вытекает из первого
                              3. ¯\_(ツ)_/¯
                              3 из отредактированного комментария: лично мне нужна не какая-то там предсказуемость, мне нужен наиполнейший контроль над адаптивностью с точностью до любого пикселя, потому что дизайн может отличаться в таких самых разных мелочах, что никакое готовое решение не сможет дать мне нужной гибкости и мне остаётся только городить media
                                0
                                Так одно другому совершенно не мешает.

                                К примеру, сетки на на флексе дают мышление представленное в этих категориях
                                http://flexboxgrid.com/

                                Надо выравнить блок по горизонтали
                                классы: Слева-, справа-, по центру-.

                                Надо выравнить блок по вертикали
                                классы: наверх-, по центру-, вниз-
                                Как распределить дочерние блоки
                                Какой порядок.
                                И так далее.

                                Одна сущность отвечает на 1 потребность. Вы остаетесь в категориях в которых мыслите при разметке страницы без обращения к css.
                                Не нужно придумывать ни классы, ни прописывать очевидные вещи.
                                В чем же здесь костыли или где тут готовое решение? Это отлично помогает не дублировать самого себя. А какие то мелочи, да, приходится добивать.

                                К тому же, заглядывая в код сайта сбера приятно видеть заимствованные с бутстрапа имена классов сеток к добавлению их неведомой лапши на media). Вместо имен классов в основе который лежит чья то детская травма полученная уроке английского языка)) Вобщем, унификацию имен — я одобряю)

                                  0
                                  Идеальный HTML не должен содержать НИКАКОЙ информации о том, как он будет выглядеть — именно для этого изобретали CSS. В идеале должно быть возможно просто заменой CSS-файлов изменить до неузнаваемости внешний вид, включая количество и расположение колонок. Я в своём коде стремлюсь к этому, а всякие col-xs-12 это условие нарушают. В этом плане вариант сетки из обсуждаемого поста мне нравится больше, так как он не затрагивает HTML, но он всё ещё с трудом способен решить мои сложные задачи, так что лично я пока продолжу писать всё на чистом flexbox, благо мне это всё равно нетрудно.
                                    0
                                    Не совсем согласен.В идеале вы описываете ситуацию, когда CSS существует вообще отдельно без HTML. А пока этого нет, изменение до неузнаваемости через css доконца невозможно. Отсюда не вижу великой разницы между сочинением классов и использованием готовых.
                          0
                          .kolonka
                          — как-то коробит
                            0
                            Писать в комментариях production-ready код, параллельно играя в Xonotic, как-то лень)
                      +2
                      >Я бы не стал тут махать, чтобы не показывать свой низкий проф. уровень и слабые знания предмета :)
                      О, люблю эти песни. Вот только моя зарплата с моим «низким проф уровнем» скорее всего раза в 2+ выше вашей, товарищ опытный эксперт :) Причем платят мне явно не за просто так. +у меня имеются неиллюзорные пруфы того что я не верблюд, в то время как вы очереденой «сторожил с хабра» (что доказывает ровным счетом ничего)
                        +1
                        Суэц, хватит кичится уже. Каждый раз как вижу твои комментарии, все время пишешь про зарплату. Не надоело? :)
                          0
                          Мне её повысили на прошлой неделе, дай порадоваться то :(
                            0
                            Хорошо, но больше, чтобы такого в интернете я от тебя не видел!
                      +2
                      А вы то сами уверены что не хрень написали? Сетка это не фреймворк. Сетка не создает никакого дизайна, она лишь помогает создавать лэйаут сайта. Вы как считаете, хабр подходит под ваше определение «лендос от васяна для вордпресса»? Так вот, на хабре используется сетка. Устаревшая, построенная на таблицах, но все же сетка, скорее всего самописная, но только вот сетка бутстрапа ничем не хуже, количество CSS говнокода там минимально. А вот как раз самодельные велосипеды на других сайтах зачастую пестрят всякими !important и длинными цепочками классов, которые только тормозят рендеринг и обычно нечитаемы, а если, не дай бог, вам захочется в ней что-то изменить — без кровавых слез обходится редко.

                      Не отрицаю, конечно, что, вероятно, только мне достаются в поддержку говносайты, а все остальные пишут сетки чисто, аккуратно и читабельно, только вот какой смысл велосипедить при наличии готовых решений?
                        +6
                        Отличный пример с хабром, сайт с 2 колонками, у которого даже нет адаптива и надо переключаться между кастрированной мобильной версией и десктопом на телефоне.

                        Суть в том что сетка загоняет вас в определенные границы, сильно урезая возможности кастомизации. А кастомизация это основа основ для любого нетривиального сайта. Это примерно тоже самое и что тема с использованием готовых решений для UI элементов и всяких там плагинов. Вначале экономишь время, подрубая готовый компонент и радуешься тому, какой-то эффективный погромист, а пару недель спустя материшься, потому-что тебе надо припаять 5 модификаций, которые без дикий костылей вот вообще не хотят присобачиваться, потому-что изначально готовый компонент не должен был уметь делать что-либо подобное.
                          –2
                          В какие границы вас загоняет сетка? Что, допустим, в той же бутстраповской сетке невозможно кастомизировать? Какой-нибудь практическйи пример задачи связанной с лэйаутом, с которой вы часто сталкиваетесь и которую невозможно решить сеткой будет? Ну хоть сайт покажите, что ли.

                          Если вы хоть немного знакомы с дизайном, о котором сами говорили, то должны прекрасно знать, что сами дизайнеры как раз таки используют сетки для построения макетов, даже самых кастомных и необычных, у любого сайта, если это не глубоко художественная работа, есть некоторая общая структура, повторяющиеся блоки, система отступов: так же как и вертикальный ритм текста, подобное существует и у блоков. Сетка как раз и помогает сохранять эту структуру и обобщить одинаковые стили применяемые ко многим элементам с целью их расположения на странице.
                            0
                            Про сетки у дизайнеров я знаю, каждый макет в зеплине пестрит ими.
                            По поводу ограничений с сетками, вот вам простой пример:
                            у вас есть несколько контейнеров разной ширины. И в них нужно реализовать простые сетки, и что самое важное, они все должны быть с margin, причем margin'ы могут отличатся. Где-то контейнер 900px с 5 итемами и отступом в 14px, где-то например 790-6-10 (цифры наобум, но в реальности все это встречается). Своими силами (и весьма простыми миксинами) я смогу реализовать все идеально в каждом из случаев, и что самое важное, поменять это моментально, например увеличив margin с 10 до 12 пикселей (просто поменяв одну переменную в SCSS). + у меня будет полный контроль над адаптивом, без привязки к топорным глобальным брейкпоинтам (аля $phone, $tablet, $smallDesktop, $largeDesktop, словно на дворе 2013 все еще, где нет телефонов с 400px+ ширины и так далее), в с возможностью настраивать все на весьма гибких разрешениях и реализовывать любые хотелки, без борьбы с собственном кодом.

                            Как конкретно это будет выглядеть с заранее заготовленными сетками, мне вот очень интересно?
                              +1
                              Если Вам не нравятся сетки то это не повод их хэйтить глобально. Они в первую очередь призваны экономить Ваше время — если Вы считаете что они бесполезны то зря. В любом случае при необходимости что-то изменить во внешнем виде сайта Вам придется лезть в стили и что-то менять независимо от того на бутсрапе это сделано или нет.

                              Бутстрап в первую очередь инструмент для экономии времени, который также можно адаптировать под любые нужды, написанием дополнительных стилей.
                                +1
                                Проблема в подходе «сделаем одно мегарешение которое решит все проблемы». Это утопия, которая работает только в простых случаях. В реальности лучше пилить все отдельно для каждого случая, запихивая повторяющиеся части в миксины. Но реализации с миксинами не совсем корректно называть сетками, ибо ты же не будешь говорить что у тебя в проекте «10 разных сеток»?
                                  0
                                  В таком случае выбор зависит уже от пожеланий заказчика целиком. Если у него есть четкое понимание какие технологии в дальнейшем будут использоваться на его проекте. Если нету то bootstrap как раз поможет в очередном простом случае, когда верстка это не более чем внешний вид сайта.
                                    0
                                    На десктопе в разработке все контролы и гайдлайны заданы. Там никто не рисует без необходимости свой дизайн при разработке программы.

                                    А в вебе этого просто нет. Браузеры все пляшут стандартами. Бутстрап позволил кодить вещи, не запариваясь на разработку дизайна как в визуалстудии накидывая компоненты. Представляете себе визуал студию без компонентов дизайна? Чтобы каждый проект люди заново сначала рисовали кнопки паддинги к чекбоксам? Это же катастрофа.

                                    В визуалстудии компоненты GUI тоже одно мегарешение которое решит все проблемы? Конечно же нет. Никто тут из комментаторов так узко не мыслит.

                                    В реальности лучше пилить все отдельно


                                    Реальность у каждого своя. Атаки на личный способ работы взаимодействия с реальностью подрывают личные убеждения и вызывают тревогу. Отсюда эти прыжки в категориальность. Они скорее связаны чтобы снять личную тревогу, чем донести свою позицию.
                                  0
                                  Это серьезно ваш мега-пример в котором невозможна кастомизация?
                                  Никто не мешает сделать сетку с двумя, тремя, n типами контейнеров, другое дело, понятия не имею, зачем вам это, я с такими задачми встречаюсь крайне редко.

                                  Вариант а) просто @extend-им нативный контейнер и кастомизируем width на брейкпоинтах, результат получается грязноватым, но вполне рабочим, если у вас скажем один такой выделяющийся контейнер, это переопределение ничего не затармозит.
                                  Вариант б) пишем свой контейнер, самое вербозное что там будет — это наши брейкпоинты, заодно можно их вынести в отдельные переменные.
                                  .row трогать не надо.
                                  .col тоже, там где нужны margin-ы не такие как у нас по умолчанию, @extend-им .col и добавляем margin-ы. Если еще приправить БЭМ-ом, выглядеть будет так:

                                  .block1 {
                                    @extend .first-type-container; //наш собственный контейнер 
                                  }
                                  
                                  .block1__row {
                                    @extend .row; // Без БЭМ-а это было бы лишним, но если нам необходимо сделать кастомную версию .row, то пожалуйста, в вашем случае в этом нет необходимости. 
                                  }
                                  
                                  .block1__col {
                                    @extend .col, .col-md-8, .col-lg-4;
                                    margin: 0 20px 0 20px;
                                  }
                                  
                                  // допустим нужен второй вид колонок в рамках этого же контейнера с другими margin-ами и размерами - не беда
                                  
                                  .block2__col-wide {
                                    @extend .col, .col-md-12; 
                                    margin: 0 10px 0 10px;
                                  }
                                  

                                  Опять таки, если вы не любите @extend, никто не мешает использовать сетки на миксинах, они работают точно так же, просто конечный CSS другой, даже велосипед автора вам здесь вполне зайдет, да как впрочем и любая сетка на миксинах. Если честно связи между сетками и
                                  например увеличив margin с 10 до 12 пикселей (просто поменяв одну переменную в SCSS)

                                  я вообще не вижу, переменные вы можете использовать и в классах с сеткой.

                                  без привязки к топорным глобальным брейкпоинтам (аля $phone, $tablet, $smallDesktop, $largeDesktop

                                  А как вы без брейкпоинтов делаете адаптивный дизайн, интересно? Если же вы имели в виду, что их недостаточно: вы можете сгенерировать их хоть на каждый пиксель, достаточно добавить в лист нужные цифры и буквы при генерации сетки.
                                    0

                                    Мне кажется, что если в макете везде разные отступы между элементами, то это повод обратиться к дизайнеру, либо вычислить среднее значение самостоятельно. Лично я сталкиваюсь с этим постоянно (а также с разными размерами шрифта тут и там). С этим надо бороться и немного усекать фантазию дизайнеров.

                                    0

                                    Очень сложно спорить с человеком(практически невозможно), которого сетка загоняет в рамки :)

                                      0
                                      лендос на 5 экранов, в них по 2, 3, 5, 7, 11 колонок. расскажите какая будет сетка?
                                        0

                                        Нарисован лендинг с техническим условием в 5 экранов с 2, 3, 5, 7, 11 колонками?
                                        А почему на этом технические условия заканчиваются?


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


                                        Сетку можно вкладывать друг в друга. Можно сделать 11 колоночной.

                                          +1
                                          Блин от дизайнера пришел макет в псд, нечего не попишешь тут, у них есть статистика что именно столько колонок увеличивают конверсию, или еще чего, короче с точки зрения разраба менять задание не вариант.
                                            +1
                                            Все. У вас доминирует мифология дизайнера. Он делает некий магический акт, (конечно же с маркетологами) призванный задобрить некое языческое божество подчинить реальность к своим ожиданиям. Куча ваших конкурентов использует невероятно разные решения, но именно молитвы к богу 11 колонок самые верные.

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

                                          .some-block-3-of-11 {
                                            @include make-col-ready();
                                            @include make-col(3, 11);
                                          }
                                          
                                  0
                                  Наоборот, стандартные сетки аля бутстрап (12-16 одинаковых колонок) — удел именно простых проектиков со сжатыми сроками и бюджетами (лендинги, визитки, етц).
                                  В сложной верстке сетки почти всегда свои, персонально спроектированные под задачу и контент.
                                    0

                                    Бутстрап, по крайней мере 4-й версии, легко расширяется в плане кастомных брейкпоинтов. Достаточно свой брейкпоинт добавить в карту, и он сгенерит соответствующие классы. Но иногда конечно проще сверстать по-своему.

                                      0
                                      Брейкпойнты — это малая часть.
                                  0

                                  Например, dashboard, с возможностью конфигурирования и изменения размера виджетов пользователем. Что-то типа http://dsmorse.github.io/gridster.js/

                                    0

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

                                      +1
                                      Сетки нужны для ускорения работы и упрощения вёрстки. Действительно большинство дизайнов, либо слишком просты, либо слишком сложны чтобы подключать готовую сетку и втискиваться в её рамки.
                                      Но средние по размеру студии часто дизайнеру ставят задачу рисовать всё строго по сетке (даже в фотошопе) и есть что-то не вписывается в стандартный бутстраповский грид, такой макет не принимается.
                                      В результате ограничивается полёт фантазии дизайнера, зато верстается такой макет просто ультра-быстро, причём даже не профессиональным верстальщиком. И сразу всё получается аккуратно, адаптивно и кроссбраузерно.
                                        +1
                                        Сетка нужна для более приятного визуального восприятия информации на странице пользователем, а не для верстальщика.
                                        +2
                                        Все то же самое делаю на 4 версии бутстрапа (слегка модифицированной и неполной — только сетка). Так же просто добавляются брикпойнты, так же легко используются миксины сетки =) Надо было тоже статью запилить ))
                                        А вообще интересно, надо будет глянуть ваш велик.
                                          0
                                          Посмотрите smart grid
                                            0

                                            Зачем изобретать велик в 17 году, когда везде уже Grid Layout?

                                              +3
                                              Grid Layout, к сожалению, можно использовать только если пожертвовав аудиторией с отсталыми браузерами. В частности, iOS его совсем недавно начал поддерживать.
                                                0

                                                Извращенцами с Опера мини думаю. что можно пренебречь...

                                                  +1
                                                  Вы всё-таки игнорируете значительную долю iOS 10-10.2 с почти 2% global usage, а также стандартный браузер в Samsungах, старые Androidы.
                                                  Даже по данным caniuse поддержка — 65.64% + 5.11% = 70.75%, т. е. 30% аудитории за бортом. Конечно для некоторых сайтов это может быть и норма, но типичные интернет-магазинчики, чуть ли не хотят ie9, поэтому для них рановато.
                                                    –6
                                                    с удовольствием пожертвовал бы тобой, да к сожалению не в курсе какой какой ты занимаешься…
                                                      +1
                                                      пока однажды не придет злой шеф, и не скажет что их самый крупный клиент сидит на IE6 и манал любые аргументы — у него не работает.
                                                      Бывает))
                                                      предсказуемость — крепкий сон.
                                                        0

                                                        Опера Мини ладно, а что прикажете делать с Internet Explorer? Там flexbox-то еле-еле работает в 10-11 версии.

                                                          0
                                                          Доля ie версии ниже 11 уже достаточно сильно упала (0.3% и ниже), поэтому, я думаю, от них уже точно можно избавляться. А в 11 версии флексы уже более-менее нормально работают.
                                                            0

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

                                                              +1
                                                              Верно говоришь, а есть ещё корпоративные порталы и CRM, где доля IE под 90%. То есть сложно так под одну гребёнку загрести.
                                                        0
                                                        логический вопрос, зачем поддерживать тех, кто отсталый? если хотят на старье сидеть, то пускай получают что получают…
                                                          +1
                                                          Потому что упущенные пользователи — это упущенная выгода?
                                                            0
                                                            Потому что это больно бъет по лояльности пользователей.

                                                            Потому что у тех, кто до сих пор сидит на старых версиях, как правило есть на это причины — иначе б не сидели.

                                                            И в сотый раз тыкать их носом в эти причины — все равно как инвалиду прямо в лицо шутить про «нет ножек — нет варенья».

                                                            Это не заставит их обновиться (потому что причины никуда не исчезли), но очень сильно настроит против вас.
                                                              0
                                                              Сразу видно — вы деньгу получает за другое)
                                                          +1
                                                          Что мешает использовать @extend? Я сейчас его использую в связке Stylus + Bootstrap 4 Grid засунутый в отдельный .styl файл, и пока что не встречал кейсов, где бы оно не работало. По сути это решает 80% описанных вами проблем, а остальные 20 решаются путем кастомной сборки сетки, которую можно сделать просто подправив две-три переменные и скомпилировав sass.
                                                            0
                                                            Да наверное многие верстальщики пишут свои миксины для создания сетки. У меня например мой миксин вызывается
                                                            @include col(1, 2) 
                                                            

                                                            Обеспечивается любое количество колонок любой ширины. Если кому интересно, могу привести код миксина и примеры использования. Прекрасно работает и очень удобно использовать совместно с миксином для брекпоинтов (тут на хабре я его и взял).
                                                              0
                                                              Интересно :-)
                                                                0
                                                                // Миксин для работы с брекпоинтами.
                                                                @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);
                                                                        }
                                                                
                                                                    }
                                                                
                                                              0
                                                              Bootstrap4 — есть брекпоинты, а колонки задаются также, как у сюзи.
                                                                0

                                                                Причём наконец-то добавили брейкпоинт на 512px. Его очень не хватает в 3 версии.

                                                                +1

                                                                Я бы с удовольствием почитал как на CSS сделать flex сетку

                                                                0
                                                                Там это, август 2017 года, немало кто уже на гридах лупит разметку. А тут сеточную библиотеку предлагают. Ну если я не ошибаюсь, то альфа 4-ого бутстапа в Sass и на флексах, легко кастомизируются брейк-поинты, и тащить можно только сетку, без элементов.
                                                                Наверное, у каждого верстака есть свои «заготовочки» на случаи авралов и заказов «на вчера», куча статеек и туториалов по созданию собственных.
                                                                Видать, мне повезло, но описанный велосипед вообще не решает никаких проблем для меня как для верстака.
                                                                  0
                                                                  странно писать какие-то велосипеды в 2017 году, когда уже давно есть css grid layout
                                                                      0
                                                                      Вам жалко страданий браузера? Велосипеды давно написаны и абстрагированны в понимаемый человеком не велосипедный вид. Они куда более предсказуемы чем гриды сейчас.
                                                                        0
                                                                        а чем гриды непредсказуемы? не такой обширной поддержкой древних браузеров? ну так это уже их проблемы. цсс лейауты уже практически релизнулись по спецификации
                                                                          0
                                                                          Именно поддержкой браузеров. Если это проблемы пользователей — вопросов нет.
                                                                      0
                                                                      1. Для правильной поддержки flexbox надо подключать полифиллы (то есть у какой-то части аудитории сайт будет лишний раз перерендериваться и глючить) и/или поддерживать 3 стандарта, плюс есть нюансы при выводе флексбоксов при загрузке страниц. Если это противопоставить уже отлаженным float сеткам, мне кажется этот геморрой не нужен.
                                                                      2. Использование фреймворков это использование их документации для привлечения новых членов команды в том числе, видимо автор только один работает.
                                                                      3. Написание своей сетки у большинства верстальщиков выливается в адское месиво медиа-запросов, неоднообразных и порой очень нелогичных
                                                                      4. Чтобы от вёрстки по сетке была максимальная отдача нужно чтобы дизайнер знал заранее что нужно верстать лайаут под сетку
                                                                      5. Сетка даёт скорость и пониженные требования к верстальщику при вёрстке отзывчивых сайтов. Плюс если посмотреь п.2, это даёт возможность быстро подключить новых членов команды.
                                                                      6. Я там выше читал про странных людей с сетками в 11 колонок, так вот их неспроста 12, это число делиться на максимальное количество делителей и имеет гибкость для того чтобы уменьшать и увеличивать размеры областей для лайаута. Если дизайнер про это не знает, горе такому проекту.
                                                                      7. Да, сетка даёт некоторые дополнительные ограничения, но это забота ДИЗАЙНЕРА (см. п. 4), никак не верстальщика.

                                                                      Насколько я в курсе, флексбокс придумали для отзывчивой замены таблицам и совать их куда попало — странное пожелание.
                                                                      • UFO just landed and posted this here
                                                                          0
                                                                          1. Не знаю зачем вы хотите проигнорировать часть аудитории, но есть куча мобильных устройств (мы же для них делаем отзывчивую вёрстку?) где флексбокс поддерживается только старого образца или не поддерживается вовсе. Есть корпоративные клиенты у которых IE9 и изменить это никак они не могут. Поэтому и нужны полифиллы, а если их не использовать то надо будет на каждый чих делать фоллбеки, что не вяжется с простотой и удобством. И ради чего? Чтобы некоторые колонки могли автоматически тянуться/сжиматься? Сомнительное удовольствие, похоже на внедрение фичи только ради флексбокса, тем более таких элементов обычно немного их можно и сделав лайаут сеткой с флоатами, их уже реализовать флексами с фоллбеком.
                                                                          2. Вы правда не видите разницу между:
                                                                          «зайти и посмотреть документацию с примерами на сайте»
                                                                          и
                                                                          «ковыряться в чужом css и размётке в поисках примеров кусков которые вы будете использовать далее»
                                                                          ?
                                                                          по моему опыту это разница в десятки часов. А по поводу «фреймворка в вёрстке» и «фантастики», если вы присмотритесь, больше трети сайтов в интернете используют bootstrap сетку.
                                                                          3. Я не видел отзывчивых сайтов без медиа запросов, а если мы от них не избавляемся и существенно их не уменьшаем, то плюсов не особо от флексбокса и гридов есть. А минус — это дополнительные телодвижения для обеспечения совместимости, чтобы показывалось везде однообразно.
                                                                          4. Не любую, выше же писали удивительные вещи про 11 колоночную вёрстку. Если дизайнеру сразу сказать какая будет сетка, то получиться макет который быстро и качественно верстается.
                                                                          • UFO just landed and posted this here
                                                                              0
                                                                              1. Просто на ресурсах для которых вы верстаете, народа нет… Ничего если будете меньше хайповать и больше приносить пользу бизнесу такие появятся. И ещё, бизнесу флексбокс деньги не приносит их приносят пользователи, поэтому отказываться от пользователей ради… ради чего, собственно? Чтобы верстальщику было приятнее? Бу-га-га
                                                                              2. для бутстраповской сетки
                                                                              дока фаундейшна
                                                                              И там и там есть исчерпывающая информация с примерами как пользоваться (а в чужом css файле и чужих шаблонах кровь и кишки).
                                                                              3. Вместо пустых слов лучше привести пример. А предложение — «иди и ищи сам», говорит о том, что не знаете сами что показать.
                                                                              4. Большинство дизайнеров не разу в жизни не верстали, и лепят макеты без волнений о том как быстро и удобно будет верстать их вазюканье, соответственно и про сетки не очень многие знают. Я уже писал выше, чтобы модульные сетки давали прирост надо чтобы и верстальщик и дизайнер работали сообща, тогда результат будет в разы быстрее и качественный.
                                                                              Сетки дают:
                                                                              — неудобство верстальщику (да, это ограничение)
                                                                              — сильно упрощает и ускоряет скорость вёрстки отзывчивых сайтов верстальщику и даёт некоторые неудобства, если дизайнер ничего не знает про сетки и для чего они нужны. Плюс даёт упрощение поддержки чужой вёрстки в разы.
                                                                              — удешевление в целом нового дизайна для заказчика и ускорение получения результата для него

                                                                              Так что страдают в основном дизайнеры.
                                                                              • UFO just landed and posted this here
                                                                            +1
                                                                            IE11+ (IE10 с автопрефиксером) — это охренеть как много людей, причем если сайт предполагает аудиторию 50+ или связанное с государством и законами это будут честные <30% аудитории.

                                                                            Пока не сталкиваешься с личной болью от проблем старшего поколения в иешниках, только тогда задумываешься что человек все таки не виноват.
                                                                          +1
                                                                          Сетка bootstrap давно не на float. Да и sass у них сейчас стандарт. Сетку под свои нужды на flex написать 2 минуты.
                                                                            0
                                                                            Почти все, что описано в статье — неактуально для bootstrap4

                                                                            Все, кто работал с bootstrap знает, что его сетка по умолчанию 12-кратная, поэтому 5 колонок в ряд стандартной бутстраповской сеткой ну никак не сделаешь.

                                                                            — в четвертой версии сетка основана на flex, соответственно есть класс ".col", который растягивается в зависимости от количества элементов

                                                                            Очень часто в стандартной бутстраповской сетке не хватает дополнительных брейкпоинтов, т. е. есть xs, sm, md, lg — все они до ширины 1200px.

                                                                            — четвертая версия использует scss, потому через переменные можно легко создать новые брекпоинты.

                                                                            Часто css-фреймворк подключают весь только ради сеток и пары мелких функций

                                                                            — Это вообще дурной тон подключать весь bootstrap.min.css. Лучше использовать bootstrap scss, и подключать только нужные компоненты, например: сетку и элементы форм

                                                                            Как известно, сетки в bootstrap 3 основаны на float-ах.

                                                                            — Bootstrap 4 на флексах
                                                                              0
                                                                              Почему не вариант дописать в тот же bootstrap свой формат сетки? Например .col-lg-my5 {width: 100%/5;} который в том числе можно подмешать в существующую систему сетки!
                                                                                0
                                                                                Если писать такие стили, то тогда и смысл сетки отпадает. Тогда лучше писать все самостоятельно и правила задавать через медиа-выражения
                                                                                +1

                                                                                Еще есть MDL от Google.

                                                                                  0
                                                                                  Автор статьи выделяет нестандартные сетки, как одну из проблем. В чем проблема расширить существующую сетку до нужного формата? Один класс, одно правило и решена одна типа глобальная проблема… можно двигаться дальше и удивляться полету творческой мысли со стороны дизайнеров.

                                                                                  .col-lg-my5 {width: 100%/5;}
                                                                                  Собственно маленький кусок кода, который и написан самостоятельно, а трогать медиа-выражения на данном этапе проблемы вообще не вижу необходимости т.к. добавив нужный класс из сетки bootstrap'a на иных разрешениях экрана просто скроет этот не стандартный вид сетки.

                                                                                  Или еще более глобальное и кардинальное решение: в переменных bootstrap можно задать шаг сетки (количество колонок) и препроцессор все необходимые вычисления уже сделает самостоятельно.
                                                                                    0

                                                                                    А не имеет ли здесь место так называемый "overengineering"? Просто мне клиентский код этого fast grid кажется сложнее чем голый flex. Не исключаю, впрочем, что это с непривычки, флекс же тоже не сразу зашёл :)

                                                                                      0

                                                                                      В первую очередь это инструмент, чтобы не писать тучу @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);
                                                                                      }
                                                                                        0
                                                                                        А почему вы сравниваете scss и css? В первом случае на scss будет конечно же больше строк написано, зато сразу понятно всем. А подключая миксин нужно уже разбираться что он делает, что там у него за аргументы. Кроме того на разных размерах экрана можно изменять не только саму колонку, но и что-то еще.
                                                                                          0

                                                                                          Не сильно меньше:


                                                                                          .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;
                                                                                              }
                                                                                          }
                                                                                            0
                                                                                            Вот вы рассуждаете про хайповый flex, а используете пикселы. Целую группу пожилых пользователей заставляете мучаться после вашей вёрстки (они не смогут изменить размер шрифта по умолчанию, им придётся зумить на каждой странице).
                                                                                              0

                                                                                              А что не так с пикселями в отступах? Их и bootstrap использует)

                                                                                                0
                                                                                                Зайдите на Яндекс маркет и lamoda. Измените в браузере размер шрифта по умолчанию на большой.
                                                                                                Вот для хрома где настройка:
                                                                                                image

                                                                                                Ну и туда-сюда поменяйте размер шрифта и посмотрите на разницу.
                                                                                                  0

                                                                                                  Как изменение размера шрифта по вашему должен отражаться на отступе между колонками? По-вашему, он должен увеличиваться? Тогда ширину сайта тоже придётся менять, иначе с крупными шрифтами текст ещё меньше влезать будет.

                                                                                                    0
                                                                                                    Расстояния между колонками будут пропорционально увеличиваться. Смысл отзывчивости в том что сайт должен на любом разрешении выглядеть хорошо.

                                                                                                    А про то что текст не будет влезать, у меня есть вот такая история из жизни:
                                                                                                    «Однажды я верстал по фрилансу сайт и после того как я закончил, выложил последние изменения заказчику. Тот позвонил, открыл скайп и стал в браузере в инспекторе в каждую строчку где есть текст набирать тексты произвольной длины с длинными словами без пробелов. Ну и везде всё повылазило, местами развалилось… В общем я доделывал ещё несколько дней… И после этого в других проектах весь текст у меня стал помещаться или имел какие-то ограничения которые я сразу же обсуждал с дизайнером и он просто грамотно обрезался...»
                                                                                                    Я это к тому что навык набивается болезненно, но с первого раза и наверняка ;-)
                                                                                                      0

                                                                                                      Я всё-таки не понимаю, зачем увеличивать пропорционально расстояния между колонками, если ширина сайта у вас не меняется? С чего вдруг расстояния между колонками должны увеличиваться за счёт ширины этих колонок, при увеличении шрифта, а не от ширины сайта? Какая-то странная пропорциональность, если честно.

                                                                                                  0
                                                                                                  Бутстрап 4 использует пиксели только в брейкпоинтах.
                                                                                                    0
                                                                                                      0
                                                                                                      Поправочка:
                                                                                                      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.
                                                                                          • UFO just landed and posted this here
                                                                                              0

                                                                                              Вариант работает в очень "примерно", и не привязан к сетке. Кроме того, как минимум у вас не влезает блок в 320px, и появляется горизонтальный скролл.

                                                                                              • UFO just landed and posted this here
                                                                                                  0
                                                                                                  Как вы ловко поменяли местами flex-basis <=> width и 330px <=> auto, как говорится «следите за руками»)) Вы бы прежде чем обвинять кого-то не в знании, проверяли бы свои примеры.
                                                                                                  Вот ваша следующая ошибка — на 1024 у вас 2 колонки, а не 3 как должно быть (из-за скролла). А на 1280 3 вместо 4.

                                                                                                  А вообще, ваш пример хорошо вписывается только потому, что:
                                                                                                  330 * 1 < 360
                                                                                                  330 * 2 < 768
                                                                                                  330 * 3 < 992
                                                                                                  330 * 4 > 1200
                                                                                                  • UFO just landed and posted this here
                                                                                                      0
                                                                                                      «Я вам там что-то кинул, оно не работает как надо, но не знаете flexbox именно вы». До чего же люди нетактичные пошли, на справедливое указание ошибки, сразу обвинять в незнании. В чужом глазу соломину видеть, в своём — бревна не замечать. Удачи!
                                                                                                      Вот вам ваш исправленный пример: CodePen

                                                                                                      Пойдём дальше разбирать ошибки. В случае, если нижняя строка не полностью заполнена, блоки растягиваются на ширину до заполнения. Так не должно происходить в нормальной сетке. Все карточки должны быть одинаковой ширины между собой.
                                                                                                      • UFO just landed and posted this here
                                                                                                          0
                                                                                                          Такая ситуация скорее норма, чем исключение, и это не бага дизайна. Если в каталоге лежит 5 товаров, а у вас в строчке их по 4 выводится, то это нормально переносить один элемент на новую строчку.
                                                                                                          Grid Layout — вещь хорошая, но доля неподдерживаемых браузеров слишком велика.
                                                                                                            0
                                                                                                            Да, поведение последней строки — это безусловно баг дизайна.
                                                                                                            Баг дизайна флексбокса.
                                                                                                            Большое упущение разработчиков.
                                                                                            0
                                                                                            необходимость использовать bootstrap

                                                                                            Ерунда какая-то, всегда был против этого карго культа. Постоянно встречаю проекты «на бутстрапе» в которых примерно половина стилей — это борьба с этим «чудо-фреймворком»
                                                                                              0
                                                                                              культ карго — это имитация. Но они ничего не имитируют судя по вашим словам.
                                                                                                0
                                                                                                Я как-раз про то, что новые люди, приходящие в профессию, не задумываясь и не изучив основ CSS, берут бутстрап потому что «так надо»

                                                                                            Only users with full accounts can post comments. Log in, please.