Создание страницы на гридах.?
Если делать на Гридах - сколько рядов будет у этого экрана? Колонок тут 7, они просматриваются по макету. А вот сколько рядов делать, не пойму.
И ещё, большинство декора(кексы, печенюхи, картинки, надписи конечно) - просто абсолютом с разными top/left по экрану раскидать? Или что-то лучше в грид сетку вписать?
Дополнительно:
По мне так на svg эту сетку сделать кроме input и меню
Как сверстать такую страницу?
Ответы:
Можно сделать 3 ряда с подрядами
1й ряд имеет 2 подряда с отступом между ними
2й ряд не имеет подрядов (Пей кофе)
3й ряд имеет 3 подряда с отступом сверху
- А первый ряд может больше подрядов должен иметь? Просто если их 2 будет, непонятно куда лого+меню пихать
- Danila232, это отдельный навбар, он не имеет отношение к гриду. Это совсем другой компонент страницы
- Danila232, вообще попробуйте это сделать с помощью bootstrap
- Nik Faraday, мда, а я его и не знаю
- Danila232, изучите. Это достаточно лёгкий фреймворк в освоении. За день-два выучите.
Bootstrap предоставляет уже готовые элементы интерфейса для использования, который уже стилизированны. Так же, в Bootstrap есть система сеток. Всё, что вам нужно находится на этой странице
P.s. не забудьте глянуть инструкцию по установке
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания страницы на гридах веб-сайта можно использовать различные подходы и технологии. Один из наиболее популярных способов - это использование CSS-гридов.
CSS-гриды позволяют создавать макеты веб-страниц с помощью сетки, которая состоит из строк и столбцов. Это дает возможность легко и гибко управлять расположением элементов на странице.
Для создания страницы на гридах сначала необходимо определить саму сетку. Например, можно создать сетку из 12 столбцов, которая будет разделять страницу на равные части.
Пример создания грида на CSS:
.container { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 10px; } .item { grid-column: span 6; } <div class="container"> <div class="item">Элемент 1</div> <div class="item">Элемент 2</div> <div class="item">Элемент 3</div> </div>.container { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 10px; } .item { grid-column: span 6; } <div class="container"> <div class="item">Элемент 1</div> <div class="item">Элемент 2</div> <div class="item">Элемент 3</div> </div>
В данном примере мы создаем контейнер с классом "container", который использует CSS-грид. Затем определяем элементы с классом "item", которые будут располагаться на гриде. В данном случае каждый элемент будет занимать 6 столбцов из 12.
Таким образом, используя CSS-гриды, можно легко и эффективно создавать макеты веб-страниц с различными элементами и их расположением. Не забывайте также о кроссбраузерной совместимости и адаптивном дизайне для лучшего пользовательского опыта.