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

Question

massef @massef

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

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

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

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

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

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

Вопрос задан более трёх лет назад
460 просмотров

5 комментариев

Подписаться 1 Простой 5 комментариев

Виктор Таран @shambler81

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

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

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS
Из ваших двух картинок и скудного описания непонятна задумка дизайнера.
Единственное, что видно — это размещение элементов каталога в пять колонок на больших размерах.
Берём бутстрап, добавляем еще один брикпойнт. Плюс, помимо стандартных колонок, добавляем еще одну
.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 @massef Автор вопроса

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

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

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

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

Написано более трёх лет назад

Сергей delphinpro @delphinpro Куратор тега CSS

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);
  }
}

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

4 комментария

Dima Polos @dimovich85 Куратор тега CSS

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

Написано более трёх лет назад
massef @massef Автор вопроса

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

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

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

Написано более трёх лет назад
Dima Polos @dimovich85 Куратор тега CSS

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

Написано более трёх лет назад
massef @massef Автор вопроса

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

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

CSS

Простой
Как сделать фон который слева сужается, справа расширяется?
- 1 подписчик
- 50 минут назад
- 20 просмотров
0

ответов
Bootstrap

+1 ещё

Простой
Как правильно скопировать google карту в модальное окно и добавить в неё указатели?
- 1 подписчик
- 3 часа назад
- 8 просмотров
0

ответов
CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- 6 часов назад
- 44 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- вчера
- 62 просмотра
1

ответ
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 24 апр.
- 59 просмотров
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 24 апр.
- 68 просмотров
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 23 апр.
- 53 просмотра
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- 23 апр.
- 39 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- 23 апр.
- 87 просмотров
2

ответа
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 23 апр.
- 87 просмотров
3

ответа
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Составить единую таблицу SQL

26 апр. 2024, в 16:51

2000 руб./в час

Сверстать 2 транзакционных письма по макету figma

26 апр. 2024, в 16:36

3000 руб./за проект

Дорисовать в Figma каталог товаров

26 апр. 2024, в 16:26

3000 руб./за проект

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

p.s. Поскольку у вас уже 90% бутстрапа будет перековеркано к концу верстки, есть ли смысл тогда от переписного вдоль и в поперек стандарта?
Можно конечно взять уже готовые сетки под большие разрешения, дабы их много в интернете и даже по 6 разрешений. НО есть ли смысл от стандартизации нестандартными способами?
как вариант скиньте проект интерфейса или дизайн, может что иное придет в голову.
Из ваших двух картинок и скудного описания непонятна задумка дизайнера.
Единственное, что видно — это размещение элементов каталога в пять колонок на больших размерах.
Берём бутстрап, добавляем еще один брикпойнт. Плюс, помимо стандартных колонок, добавляем еще одну
.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); } } ...

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

Сергей Там еще gutters "гуляют" в зависимости от разрешения, поэтому решил отказаться от бутстрапа и нашел сетку с указанием еще и отступов.
massef, можно было брать сетку от 4 bs, в ней можно указывать разные гуттеры.
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 · 2017-12-27 23:21:39

Насчет сетки, могу предложить вот такой инструмент: 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рх).

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт