Как перенести блоки при изменении размера дисплея в CSS Grid?

Question

[Илья]

Прошу отнестись с пониманием) Я только начал изучать верстку и так получилось, что сразу решил задействовать CSS Grid.
И если в обычном режиме всё более-менее получилось, то в адаптации я споткнулся. Суть вопроса - есть сетка с grid -элементами. вот здесь
Я пытаюсь сделать так, чтобы при уменьшении дисплея блоки становились в другом порядке, но по всей видимости что-то не так делаю с grid-template-areas: И возникли сомнения, нужно ли вообще здесь применять этот инструмент, или в @media-запросах можно решить эту проблему проще.

Comments

[Ankhena]

И возникли сомнения, нужно ли вообще здесь применять этот инструмент, или в @media-запросах можно решить эту проблему проще.

0. Нет.
Достаточно флекса или columns.
1. Картинки у пунктов это просто псевдоэлементы для блока с текстом. А у вас для этого целый div, в нем i и только у него псевдо. Я понимаю, что i это пример из документации от шрифта, но всё же...

[Илья]

Спасибо. А можно совмещать флекс и grid?

[Ankhena]

Илья, можно, конечно. А еще блоки, инлайн-блоки, флоаты, таблицы и т.д.
Использовать нужно то, что лучше всего подходит в конкретной ситуации.

Answer 1

[xdevelx]

Чтобы вывести элементы в ряд по 50% ширины и выстроить иконку с текстом в одну линию grid css не нужен.

Comments

[Илья]

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

Answer 2

[Игорь Захаров]

Ручками это все прописывать муторно, подключите bootstrap и пользуйте готовые сетки и иже с ним.

Comments

[Алексей]

Боже упаси автора слушать таких советчиков.

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

Единственный вариант - использовать от него сетку, но и это лишнее, когда есть гриды

[Игорь Захаров]

Алексей, ох начинается... Ну тогда только такой "гура" как Вы сможет с ноля научить вопрошающего как правильно сетки строить... давайте, учите, я посмотрю как правильно надо. Чет у меня вот порядка 5 проектов лично моими кривыми руками реализовано на бутстрапе, да еще и о чудо, работают, да бабки приносят... Именно потому, что я таких бабкососов с их модными плюхами шлю по эротическому пути, когда мне начинают впаривать лендинги по 100 000 руб. Слал, шлю и буду...

[Алексей]

Никита Шинкевич, Стили бутстрапа и куча стилей переопределяющих стили бутстрапа и получается каша, а потом удивляются почему поддержка проекта становится дороже или адаптивность страдает

На гридах при адаптиве одной строкой в стилях можно сделать то, на что в бутстрапе придется менять верстку

[Илья]

Алексей, спасибо за комментарий, а конкретно по моему примеру сможете подсказать?

[Алексей]

Илья, Вы в grid-template-area пытаетесь работать с именованными областями, а имена областям не задали. Почитайте на досуге https://wp-kama.ru/id_8945/grid-v-css.html - весьма грамотный тутор