Какие сетки лучше использовать Flex или Grid?

Question

[Raul Abdullin]

Какие сетки лучше использовать в современной верстке Flex или Grid?
Или быть может вообще выдергивать сетку с bootstrap 4?
Только начинаю верстать, изучил основы html и css.
А вот работу с сетками особенно при адаптивной верстке не совсем понимаю.
Подскажите с чего начать?

Comments

[Rustam Bainazarov]

Зависит от поддерживаемый браузеров и задачи.

А так — Grid, конечно, он для этого и предназначен изначально.

[Raul Abdullin]

Рустам Байназаров, а бутстрап 4 на гридах или флексах? Я просто про гриды только сегодня узнал. Вернее я до этого пытался использовать bootstrap 3, там видимо как раз гриды?

[Rustam Bainazarov]

raulvodov, он на Flex'ах, но точно не на Grid.

[Виталий Першин]

raulvodov, Если есть возможность обойтись без гридов, то советую их пока не использовать, так как поддержка браузерами все же меньшем чем у флексов.
bootstrap 3-й основан на float
bootstrap 4-й основан на flexbox
Это все фреймверки. Если вы только учитесь как по мне лучше попрактиковаться со своей сеткой, тем более как вы сами говорите у вас проблемы с адаптацией.

[Raul Abdullin]

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

[Виталий Першин]

raulvodov, Могу посоветовать перейти хотя бы на бутстрап 4. А по поводу своих сеток, вы вообще верстали сайты без фреймверков?

[Raul Abdullin]

Виталий, верстал парочку сайтов, один чисто на флексах без бутстраповских сеток, но там задача была под ширину не менее 1000 пикселей делать, т.е. под мобилки не нужно было. Поэтому без проблем на флексах сделал. Второй же сайт сделал огромный одностраничник, дизайн которого делал сам, но использовать сетку из бутстрапа 3. Так вот вопрос заключается в том есть ли смысл строить самому эти сетки, если можно использовать сетки из бутстрапа 3 или 4? Если же есть, то как учиться их делать? Какие технологии для этого использовать и тд?

[Виталий Першин]

raulvodov,

Какие технологии для этого использовать и тд?

На данный момент флексы самый оптимальный вариант. Но уже сейчас не помешает пощупать и гриды.

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

Сделайте хотя бы один сайт без фреймверков. И не обязательно мудрить с сетками, просто сделайте его адаптивным, чтобы понять как работаю медиа запросы иначе вы будете как марышка тыкать везде col row без понимания, что они вообще делают

есть ли смысл строить самому эти сетки

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

[Виталий Першин]

raulvodov,

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

Хотя, если вы будете сам себе дизайнер, вам наверное лучше будет использовать фреймверк. Затачивая дизайн под свой инструментарий, у вас скорость разработки проекта будет значительно выше.

[Raul Abdullin]

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

[Виталий Першин]

raulvodov, Весь принцип заключается в том чтобы при определенном размере изменить поведение элементов. Объяснять можно долго, проще попробовать и почитать/посмотреть уроки на эту тему.

[Raul Abdullin]

Виталий, уроки создания сетки на флексах?

[Виталий Першин]

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

Хотя в паре видео Дмитрия Лаврика есть хорошая база по сеткам, если не ошибаюсь это одно из них https://youtu.be/hrFPD0nkRVA

[Raul Abdullin]

Виталий, да спасибо за видео, только дошли руки посмотреть. Более менее картина яснее стала.

Answer 1

[DanKud]

Не совсем корректно полностью сравнивать Flexbox и Grid как противоборствующие стороны. Наиболее оптимально вообще использовать их вместе. Grid-разметка для позиционирования основных блоков страницы. Flexbox-разметка для позиционирования элементов внутри блоков Grid-разметки.

Comments

[Raul Abdullin]

да согласен, стоит ли с нуля писать респонсив разметку для сетки на Grid или достаточно использовать готовые решения? Я просто пока не совсем понимаю, как адаптивность сделать, с помощью Grid.

Answer 2

[ReActor Дмитрий Вершанский]

Рекоммендую новую технологию GRID, поддержка браузеров уже на высокос уровне, вот кстати довольно хороший урок по основам Grid CSS https://youtu.be/agmgl-ElC8A

Comments

[ReActor Дмитрий Вершанский]

Сам синтаксис и механизм технологии на загляденье прост и реализуем с первого знакомства, сам инструментарий довольно широк в диапазонах задач

[Raul Abdullin]

HunteR-VRX, я по этой игре https://cssgridgarden.com/#ru немного разобрался с гридом. А разве флексы не новые гридов? Мне казалось, что бустрап 3 сетка на гридах, а бутстрап 4 на флексах?

[ReActor Дмитрий Вершанский]

Да, эту игру думаю многие юзали, во время знакомства с технологией, нет все с точностью наоборот) Bootstrap это следствие flex, а grid - это новый фарш

[Rustam Bainazarov]

raulvodov, Bootstrap 3 на float'ах.

[Raul Abdullin]

HunteR-VRX, ага понял, стоит ли с нуля писать респонсив разметку для сетки на Grid или достаточно использовать готовые решения? Я просто пока не совсем понимаю, как адаптивность сделать, с помощью Grid.

[ReActor Дмитрий Вершанский]

Юзай этот урок https://www.youtube.com/channel/UCmu55NR0pyzaBvELw... в течении недели выложу еще 2 из 3-х видео, по ним и все поймешь)