Есть ли такие ситуации где гриды вообще не к месту, а флексбокс подойдёт?

Question

[Максим Иванов]

Особенно я про ситуацию, где на сайте много фотографий от 100-200 штук к примеру.
1) есть ли такие ситуации где гриды вообще не уместны, а флексбокс в самый раз или даже вместо их обоих те же флоаты, инлайн-блок и позишины лучше юзать?
2)какие именно ситуации бывают?
3)стоит ли использовать гриды, когда на сайте 100 и более картинок разных размеров нужно выстроить в колонки?
4)можете показать примеры таких сайтов где гриды вообще не стоит юзать, а где лучше всего выбрать именно их?

Comments

[Ankhena]

есть ли такие ситуации где гриды вообще не уместны, а флексбокс в самый раз

Да, например, блоки одинаковой высоты и разной ширины.

3)стоит ли использовать гриды, когда на сайте 100 и более картинок разных размеров нужно выстроить в колонки?

Гриды сами по себе (без участия js) не решают этой проблемы. Флексы, кстати, тоже.
Гуглите masonry.
Или смотрите в сторону css columns.

1) есть ли такие ситуации где гриды вообще не уместны, а флексбокс в самый раз или даже вместо их обоих те же флоаты, инлайн-блок и позишины лучше юзать?

Флоаты нужны для обтекания одного элемента (обычно картинки) другими (или текстом). Ни флексы, ни гриды, ни абсолюты вам в этом не помогут.
Абсолют нужен для того, чтобы вынуть элемент из потока и куда-то там переместить.
Флексы - это одномерная раскладка.
Гриды - двумерная

2)какие именно ситуации бывают?

Откройте темплейтмонстр или результаты выдачи гугла и смотрите все подряд сайты. Через некоторое время встретите все или почти все какие бывают.

Answer 1

[Вадим]

В целом, всё на ваше усмотрение. Раньше для сеток вообще исопльзовали таблицы или float. Которые для этого не предназначены.
Однако, считается хорошим выбором чтобы использовать гриды для сеток\раскладок элементов, а флексы уже внутри блоков для выравнивания, порядка и тд. Когда нет чёткой сетки или она не нужна и тд.

свежак:
https://www.youtube.com/watch?v=ST1EvRemB_U

Гриды были созданы для сеток\раскладок.
А флексы для управления потоком элементов.

Опирайтесь на тз, браузерную поддержку и здравый смысл.

Comments

[Максим Иванов]

Просто уже три раза я использую гриды (для "пробы") и уже третий раз понимаю что мог бы потратить меньше времени на тех же флексах позишинах или флоатах

[Вадим]

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

Уверен найдётся кто-то кто сделает ещё быстрее эту же задачу на третьем бутстрапе, где всё на флоатах.

Это вопрос опыта и удобства.
Есть моменты, где гриды выигрывают. Например, намного легче делать адаптив. Киллер фича гридов, как по мне - когда дизайнер рисует адаптивный интерфейс на десктопе\планшете\мобилке так, что блоки меняются местами настолько, что это удобно сделать только на гридах с помощью template-area. На флексах часто бывает жутко сложно решить подобное. А то и вовсе без js не обойтись.

[Максим Иванов]

Это вопрос опыта и удобства.

Это точно! Да и ещё эти три раза возможно были не теми случаями, где легче использовать гриды.

[SheikhRamil]

Вадим, а разве flex-wrap не решает проблему адаптива?

[Вадим]

Ramil_ Bayramov_, решает конечно. Речь про количество колонок, перестановку блоков местами и так далее.
На флексах Вам нужно будет создать дополнительный уровень абстракции на css - контейнер, строки и коллонки. Описать для них ряд правил.
Потом добавлять разным html элементам соответствующие классы и делать дополнительные обёртки.
На гридах это делается одной css строчкой на родительском элементе. И так же одной строчкой адаптируется на нужном Вам брэйкпоинте.

[Вадим]

Максим Иванов, В общем и целом, я бы рекомендовал Вам хорошенько изучить и гриды и флексы. Уже после этого станет легче решать когда где и что использовать. Какого то общего ответа тут скорее всего нет. Нужно рассматривать на каждом отдельно взятом случае.