Две сетки с разным количеством колонок, как быть?

Question

[massef]

Пример блока с товарами на странице каталога
Сверху сетка из 15 колонок под разрешение 1920
Снизу стандартная сетка из 12 колонок под разрешение 1366


Или я туплю или дизайнер "нехороший человек". Но держать на проекте две сетки, помоему бред?

И второй вопрос по блоку в две строки справа.
Я так понимаю, что на флексах это не решить, при условии что не используются обертки для колонок в верхних рядах? То есть они в разметке идут друг за другом.

<div class="row">
    <div class="col-md-3"> 1 </div>
    ....
    <div class="col-md-3"> 15 </div>
</div>

Про гриды знаю

Comments

[Виктор Таран]

1. если две сетки используется по всему сайту 50:50 или окол того, вставить леща дизайнеру, потом еще леща и появится одна сетка.
2. Сетка на 15 используется в паре мест, да здравствует container-fluid обычная верстка в нем.
Ну или если ваш дизайнер решил сделать сетку 15 которая толком ни на что не делится и взял ее за основную, вернуться к пункту 1 вставить леща за дебилизм.
3. Если же оно действительно оправдано ( но я не мону на своей памяти найти ни одного проекта в котором это было бы оправдано, а вот рупожопые дизайны припоминаю). То возможно вам стоит отказаться от бутстрапа, возможно действительно сделать все на флексах.

p.s. Поскольку у вас уже 90% бутстрапа будет перековеркано к концу верстки, есть ли смысл тогда от переписного вдоль и в поперек стандарта?
Можно конечно взять уже готовые сетки под большие разрешения, дабы их много в интернете и даже по 6 разрешений. НО есть ли смысл от стандартизации нестандартными способами?
как вариант скиньте проект интерфейса или дизайн, может что иное придет в голову.

[Сергей delphinpro]

Из ваших двух картинок и скудного описания непонятна задумка дизайнера.
Единственное, что видно — это размещение элементов каталога в пять колонок на больших размерах.
Берём бутстрап, добавляем еще один брикпойнт. Плюс, помимо стандартных колонок, добавляем еще одну

.col-xs-fifth {
  @include make-col-ready();
  @include make-col(1, 5);
}
@include media-breakpoint-up(sm){
  .col-sm-fifth {
    @include make-col-ready();
    @include make-col(1, 5);
  }
}
...

Профит!!!

[massef]

Виктор Таран, Да, весь сайт от 1920 на 15'ой сетке, если бы была только область карточек, я бы не парился. Дизайн уже согласован и меняться не будет, так что лещи не помогут ). Плюс на адаптиве тоже разное кол-во колонок, но там они хоть деляться на 12.
Все делаю на флексах, но к сожалению они не способны сделать такой вытянутый блок в углу, при условии что все карточки + этот баннер, идут друг за другом в разметке. Без оберток. Тут либо гриды ли флоаты.

Сергей Там еще gutters "гуляют" в зависимости от разрешения, поэтому решил отказаться от бутстрапа и нашел сетку с указанием еще и отступов.

[Сергей delphinpro]

massef, можно было брать сетку от 4 bs, в ней можно указывать разные гуттеры.

[Сергей delphinpro]

massef,

.col-xs-fifth {
  @include make-col-ready(20px); // гуттер
  @include make-col(1, 5);
}
@include media-breakpoint-up(sm){
  .col-sm-fifth {
    @include make-col-ready(40px); // гуттер
    @include make-col(1, 5);
  }
}

Answer 1

[Dima Polos]

Насчет сетки, могу предложить вот такой инструмент: https://www.npmjs.com/package/smart-grid
Видео о том, как с ней работать можно посмотреть вот тут:https://www.youtube.com/watch?v=KFVoIzaGPYg&list=P...
Эту сетку можно сгенерировать под любое кол-во колонок и с любыми межколоночниками. Настройки для генерации сетки задаются в smart-grid.js, а сама генерация происходит через Node.js. Можно задать сначала сетку на 15 колонок и межколоночник в столько-то пикселей, сохранить препроцессорный файл на выходе просто переименовав его, а потом поменять настройки под сетку на 12 колонок, только задать разные префиксы для примесей.
Сам пользуюсь, и рекомендую. Для кроссбраузерности можно использовать для построения сетки не флексы, а инлайнблоки, а для межколоночника указать значения в процентах. Можно и по деолту все оставить, и сетку на флексах сделать, так как они уже хорошо работают.

2. Если я правильно понял суть дела, то можно задать флекс-контейнеру flex-direction: column, чтобы они по вертикали строились flex-wrap:wrap, чтобы переносились на новую вертикальную ось, далее надо задать высоту родителю, чтобы блоки переносились на новый ряд, поиграться с justify-content, align-content, align-items, а тем блокам, которые надо вынести вправо задать два самых больших ордера и задать им базис по приблизительно 50% (кальк 50%-20рх).

Comments

[Dima Polos]

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

[massef]

Dima Polos Вариант со smart-grid не решит проблему двух сеток на проекте, такое можно и на бутстрапе сделать.

А вот за вариант по второму вопросу - спасибо.

Наваяют блин малевичи, а потом голову ломаешь )

[Dima Polos]

massef, да уж, бывает)) Smart-grid знаком, просто интересно?
Тогда, наверное самому считать ширину блоков и мучатся.

[massef]

Dima Polos Слышал но не тыкал