Как сделать сетку (html, css)
не знаю как сделать сетку.
Она идёт сразу через несколько блоков и есть места(там где оранжевая стрелка и чуть выше), где не понятно каким образом можно сделать сетку(вертикальную часть
Отслеживать
23.5k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
задан 8 мар 2022 в 11:45
Можно предоставить HTML код, пожалуйста?
9 мар 2022 в 10:11
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Просто добавьте блокам css свойство border
.row < border-top: 1px solid silver; border-bottom: 1px solid silver; >.box
Отслеживать
ответ дан 8 мар 2022 в 12:33
1,298 2 2 золотых знака 9 9 серебряных знаков 20 20 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
CSS-сетка
Использование и настройка нашей альтернативной системы макета, основанной на CSS Grid, с примерами и фрагментами кода.
На этой странице
Сетка по умолчанию в Bootstrap представляет собой кульминацию более чем десятилетних методов компоновки CSS, опробованных и протестированных миллионами людей. Но он также был создан без многих современных функций и методов CSS, которые мы видим в браузерах, таких как новая CSS Grid.
Внимание! Наша система CSS Grid является экспериментальной и поддерживает версию 5.1.1! Мы включили ее в CSS нашей документации, чтобы продемонстрировать ее вам, но по умолчанию она отключена. Продолжайте читать, чтобы узнать, как включить его в свои проекты.
Как это устроено
В Bootstrap 5 мы добавили возможность включения отдельной системы сеток, построенной на CSS Grid, но с поворотом Bootstrap. Вы по-прежнему получаете классы, которые можете применять по прихоти для создания адаптивных макетов, но с другим подходом под капотом.
- CSS Grid включен. Отключите сетку по умолчанию, установив $enable-grid-classes: false , и включите CSS Grid, установив $enable-cssgrid: true . Затем перекомпилируйте свой Sass.
- Замените экземпляры .row на .grid . Класс .grid устанавливает display: grid и создает grid-template , который вы создаете с помощью вашего HTML.
- Замените классы .col-* классами .g-col-* . Это потому, что наши столбцы CSS Grid используют свойство grid-column вместо width .
- Столбцы и размеры желоба устанавливаются с помощью переменных CSS. Задайте их в родительском .grid и настройте, как хотите, встроенным или в таблице стилей, с помощью —bs-columns и —bs-gap .
В будущем Bootstrap, вероятно, перейдет к гибридному решению, поскольку свойство gap обеспечило почти полную поддержку браузером flexbox.
Ключевые отличия
Сравнение с сеткой по умолчанию:
- Утилиты Flex не влияют на столбцы CSS Grid таким же образом.
- Заменяет зазоры водосточные желоба. Свойство gap заменяет горизонтальный padding из нашей системы сетки по умолчанию и работает больше как margin .
- Таким образом, в отличие от .row , .grid не имеет отрицательного отступа, и утилиты отступа не могут использоваться для изменения промежутков сетки. Промежутки сетки по умолчанию применяются по горизонтали и вертикали. Смотрите раздел кастомизации для получения более подробной информации.
- Встроенные и пользовательские стили следует рассматривать как замену для классов модификаторов (например, style=»—bs-columns: 3;» против class=»row-cols-3″ ).
- Вложение работает аналогично, но может потребовать от вас сбросить счетчик столбцов для каждого экземпляра вложенного файла .grid . Смотрите раздел вложенности для получения подробной информации.
Примеры
Три колонки
Три столбца одинаковой ширины во всех окнах просмотра и на всех устройствах могут быть созданы с помощью классов .g-col-4 . Добавьте отзывчивые классы, чтобы изменить макет по размеру области просмотра.
div class="grid"> div class="g-col-4">.g-col-4div> div class="g-col-4">.g-col-4div> div class="g-col-4">.g-col-4div> div>Адаптивность
Используйте адаптивные классы, чтобы настроить макет во всех окнах просмотра. Здесь мы начинаем с двух столбцов на самых узких окнах просмотра, а затем увеличиваем до трех столбцов на средних и выше.
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
div class="grid"> div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4div> div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4div> div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4div> div>Сравните это с макетом из двух столбцов во всех окнах просмотра.
div class="grid"> div class="g-col-6">.g-col-6div> div class="g-col-6">.g-col-6div> div>Обертка
Элементы сетки автоматически переносятся на следующую строку, когда по горизонтали больше нет места. Обратите внимание, что gap применяется к горизонтальным и вертикальным промежуткам между элементами сетки.
div class="grid"> div class="g-col-6">.g-col-6div> div class="g-col-6">.g-col-6div> div class="g-col-6">.g-col-6div> div class="g-col-6">.g-col-6div> div>Начало
Стартовые классы призваны заменить классы смещения нашей сетки по умолчанию, но они не совсем такие же. CSS-Сетка создает шаблон сетки с помощью стилей, которые говорят браузерам «начинать с этого столбца» и «заканчиваться в этом столбце». Это свойства grid-column-start и grid-column-end . Стартовые классы являются сокращением для первых. Соедините их с классами столбцов, чтобы задать размер и выровнять столбцы, как вам нужно. Начальные классы начинаются с 1 , поскольку 0 является недопустимым значением для этих свойств.
.g-col-3 .g-start-2
.g-col-4 .g-start-6
div class="grid"> div class="g-col-3 g-start-2">.g-col-3 .g-start-2div> div class="g-col-4 g-start-6">.g-col-4 .g-start-6div> div>Авто колонки
Когда в элементах сетки нет классов (непосредственные дочерние элементы для .grid ), размер каждого элемента сетки автоматически будет равен одному столбцу.
CSS Grid или Bootstrap?
Этим вопросом задаются многие, а также многие спрашивают, для чего нужна модульная сетка в web-дизайне?
Привет друзья, с вами Денис и в данном уроке поговорим о модульных сетках в веб-дизайне, а также рассмотрим вариант создание ее при помощи bootstrap и сравним ее с CSS Grid.
Для тех, кто незнаком с терминологией, что такое модульная сетка и для какой цели используют ее в Вебе, немного предыстории.
Вообще « модульная сетка » в веб, пришла из полиграфического дизайна. Она не только улучшило юзабилити сайта, но и значительно упростила их верстку. Модульная сетка, представляет собой разметку единой схемы, расположения всех элементов и блоков на странице. То есть, она накладывается на каркас веб-страницы, тем самым помогает создать визуальной порядок всех ее элементов.
Сетки бывают простые, сложные, фиксированные, динамические, но не в этом суть, главное осознайте, для какой цели ее используют. Раннее до возникновения сеток, приходилось использовать нарезку графических элементов с дизайна страницы, и компоновать их, используя табличную верстку. Сейчас же, в современном дизайне, есть возможность разбить страницу по модульной сетки на блоки. Тем самым изменяя размер страницы, можем предположить, как блоки ведут себя на разных разрешений экрана.
От нас требуется сделать соответственную верстку под эти разрешения и заполнить блоки соответствующей информацией.
Модульную сетку можно написать как с нуля самому, так и задействуют готовые библиотеки. Самая популярная наверняка многие о них слышали это Gumby , Bootstrap . Так вот, в данном уроке, разберем сетку при помощи библиотеки Bootstrap , и сравним ее с модулем Grid , который с середины 2017 года, стал полноценно, поддерживается различными браузерами без префиксов.
В уроке рассмотрим трех колоночный макет сетки при помощи этих двух гигантов, а начинаем мы с построения блоков.
Создаем модульную сетку
See the Pen wPYoNz by Denis (@Dwstroy) on CodePen.
Воспользуемся распространенной двенадцати колоночной модульной сеткой в принципе на которой реализован Bootstrap и нарисуем в ней эскиз блоков. В вы сможете сами убедитесь, насколько удобно ее использовать и выравнивать блоки при помощи ее.
Открываю модульную сетку, направляющими делаем предварительную разметку.
Первая блок будет занимать шесть колонок по ширине, за ней два блока в три колонки. Сетка будет состоять из двух рядов, где второй ряд будет поделен на две части, первая часть отведена под первый блок, соответственно вторая под остальные три блока. В конечном итоге получили четырех блочную сетку.
Вставляем в блоки изображения, и теперь приблизительно понимаем, как это будет выглядеть на сетки Bootstrap .
Размечаем модульную сетку в Bootstrap
Затем, когда у нас есть дизайн по модульной сетки, делаем его разметку. Создаю index файл, разверну doctype . Прописываю заголовок «Верстка блоков по сетки Bootstrap» подключение, скрипта и jquery нам не понадобятся, их удаляю. Сверну область head для лучшего обзора.
Создаем четыре блока по дизайну модульной сетки. Делаем обертку с классом .container , в ней создаем блок с классом .pow , в который вкладываем четыре блока с классами .col-md- . В каждой ячейка размещаем блок с классом .img-bloc для оформления картинки. В нем вкладываем картинку, а ниже заголовок третьего уровня, в котором пропишем номер текущего блока.
Таких блоков будет четыре штуки, нажимаем Tab , и перед нами развернулась html структура.
.container>.row>(.col-md->.img-bloc>img+h3)*4
Добавляю заранее подготовленные изображения, для этого создаю дополнительную директорию, и переношу в нее картинки.
Первому блоку зададим шесть ячеек, второму и третьему присвоим по три ячейки, четвертому шесть, так как он будет занимать половину пространства.
В конечном итоге получаем такую структуру.
Блок 1
Блок 2
Блок 3
Блок 4
Создадим файл стилей и оформим эти контейнеры.
Переходим в стили и оформляем эти контейнеры. Делаю отступ сверху у основного контейнера на 50 пик.
.container
У блоков с классом .img-bloc , уберем все лишнее за его пределами overflow: hidde , задам position: relative . Для тех, кто знаком с flexbox , задействуем его для выравнивания заголовков. Для этого прописываем display: flex и так как блоки будем адаптировать, зададим нижние отступы в 30 пик.
.img-bloc
Переходим к оформлению заголовков. Позиционируем их абсолютно.
Блоку, увеличу шрифт, задам задний фон с прозрачностью, а цвет заголовка сделаю белым.
.img-bloc h3
Для их выравнивания по горизонтали, основному блоку пропишем justify-content: center , я для выравнивания по вертикали align-items: center .
.img-bloc
Зададим для всех картинок ширину в 100%, а для четвертого блока придется задать дополнительный класс cont-4 , для того что бы работать с его высотой, так как он у нас не стандартный.
.img-bloc img
В стилях пропишем для него ограничение по высоте до 275 пик.
.cont-4
Пропишу тут же медиа запросы под данную высоту, что бы на них не отвлекаться.
@media only screen and (max-width: 1199px) < .cont-4 < height: 222px; >> @media only screen and (max-width: 991px) < .cont-4 < height: 100%; >>
И в принципе все замечательно, мы добились поставленной цели, путем вложенности такой структуры. И навряд ли, получится сделать по-другому при помощи данной библиотеки Bootstrap . Так как она реализована на паддингах, а это играет ключевую роль во вложенности блоков, приходится всегда создавать дополнительны элемент.
Да и бог с этой вложенностью, подумают многие из вас. Сама вложенность это мелочи, что нам, жалко наштопать каких-то блоков!
И давайте посмотрим ее адаптацию, что у нас получается, а выходит следующее, блоки все выстраиваются в одну колонку и они просто огромные. Но это все мелочи, решается добавлением класса col-sm-6 .
В итоге получили четырех колоночный блок.
И вроде все нормально, но давайте еще больше ужмем экран, и тут снова видим огромные картинки, блоки перестроились в одну колонку.
Что мы делаем в таком случае, как уменьшить блоки?
Думаю много догадались, добавляем еще один класс col-xs-8 .
И что мы видим, вроде бы блоки уменьшились, но в тоже время они не по центру. Для их выравнивания по горизонтали добавляем col-xs-offset-2 , то есть, не учитываем две первые ячейки.
Теперь замечательно все адаптируется. Проверяем далее на других разрешений экрана, и что мы видим! На предыдущем разрешении все блоки рассыпались.
Почему это произошло? Причина вся в наследовании, все предыдущие классу унаследовали отступ, и теперь на другом разрешении их нужно сбросить offset поставить в ноль.
Сбрасываем отступы, прописываем col-sm-offset-0 .
И думаю, вы уже догадались, к чему я клоню!
Но давайте представим следующую картину, заказчик посмотрел на все это дело и говорит вам, а я хочу в адаптивке поменять некоторые элементы местами, то есть, блок 1 на блок 4 или блок 2 на блок 1, разницы не имеет.
И тут, начнете его слегка ненавидеть.
Вам придется делать полу пушь, прописывать еще дополнительные классы.
И в любом случае, такое количество классов, в такой вложенности, не так просто поддерживать.
col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-0 col-md-6
И это полный бред так писать. Я думаю, многое из вас со мной в этом согласитесь!
Насколько такие длинные строки из многочисленных классов актуальны. И задумаешься, а не проще ли самому это все адаптировать без сторонних библиотек!
И давайте рассмотрим один инструмент, который совсем недавно появился, а точнее в середине 2017г. начал полноценно поддерживаться всеми браузерами без всяких префиксов. И наверняка многие из вас уже догадались, о чем пойдет речь, да, именно о CSS Grid .
Для того что бы заработал CSS Grid , вам не нужно нечего настраивать, не какие не нужны сторонние библиотеки, это не какое то там свойство, это полноценный модуль, который внедрен в CSS, который на протяжении пяти лет активно развивался и дорабатывался, а в этом году, у нас появилась возможность полноценно его использовать.
Давайте рассмотрим на примере данной структуры, как реализовать такую модель сетки при помощи CSS Grid.
Делаем верстку на модуле CSS Grid
See the Pen NwObLR by Denis (@Dwstroy) on CodePen.
Текущие файлы я удалять не буду, просто переименую, и оставлю в этих директориях.
Создаю новый index и разворачиваю в нем doctype . Пропишу заголовок, удаляю подключение bootstrap , и скрипты. Переходим в CSS и описываем блоки.
Прописываем блок с классом .grid-container , в него вложим блок с классом .imageBox , в котором будет находиться картинка и изображение. Таких блоков делаем четыре штуки и разворачиваем структуру.
.grid-container>(.imageBox>img[src="https://dwstroy.ru/video/azbuka-ot-a-do-css/css-grid-bootstrap/img/$.jpg"]+h3>)*4
Прописываем изображение и заголовки.
Блок 1
Блок 2
Блок 3
Блок 4
Это и есть вся структура, для реализации сетки на модуле Grid . Она логична, понятна, и в ней присутствует основной контейнер, в котором вложены его элементы.
Далее создадим файл стилей, сброшу все отступы и делаю сверху отступ в 30 пик.
body < margin: 0; padding: 0; font-family: Verdana, Geneva, sans-serif; >.dws-wrapper
И для того что бы начать пользоваться мощным инструментом CSS Grid, нужно назначить его основной контейнер. Напишем блоку с классом grid_container display: grid .
.grid-container
Вторым этапом определим шаблон сетки, которые задаются при помощи свойства grid-area , но что бы его задать, нужно для элементов Grid прописать индивидуальные имена, при помощи классов или как сделаем мы, воспользуемся псевдоклассом nth-child где в скобках укажем порядковый номер блока и при помощи grid-area зададим для каждой ячейки индивидуальное имя.
.grid-container div:nth-child(1) < grid-area: box-1; >.grid-container div:nth-child(2) < grid-area: box-2; >.grid-container div:nth-child(3) < grid-area: box-3; >.grid-container div:nth-child(4)
Затем зададим для блока Grid максимальную ширину в 900 пик. Почему в 900! Так как картинки по ширине занимают 430 пик, в сумме они будут 860 пик, и по 10 пик зададим у них отступы с каждой из сторон, выходит 40 пик., а полностью в сумме выйдет 900 пик.
Выравниваем при помощи margin: auto , далее описываем сетку.
.grid-container
Временно пока скрою текстовый блок, для этого отбираю его и задаю свойство display: none .
.imageBox h3
Далее формируем свою сетку, прописываем grid-template-areas , и далее, используя имена блоков, которые задавали ранее, указываю в каком порядке, сколько ячеек будут они занимать.
.grid-container
Элементы Grid контейнера выстроились, но они еще не знаю, сколько отведено для них пространство. Точнее они занимают определенное пространство ширины и высоты картинки, но нас это не устраивает. У блоков размеры картинок разные, и что бы нам индивидуально под каждый блок не нарезать картинку, сделаем это все при помощи CSS.
И давайте зададим 100% ширину картинки, что бы она занимала все пространство блока.
.imageBox img
Затем для каждой ячейки зададим свой размер ширины, для этого воспользуемся свойством grid-template-columns и каждой колонке задаем определенный размер. Первой сделаем 2 фракции, и двум остальным по одной фракции.
.grid-container
Как видим, четвертый блок вылез за пределы основного контейнера. И что бы скрыть его часть, нужно для контейнера imagBox прописать overflow: hidden .
.imageBox
И данный стиль бы сработал, но из-за того что нет высоты контейнера, он не знает его границы. А какая должна быть высота? Обратимся к картинке, размер ее по высоте 450 пик., делим на пополам получается 225 пик.
При помощи grid-template-rows прописываем каждой строке высоту по 225 пик.
.grid-container
Ну и для отступов можно воспользуемся свойством grid-gap , где каждой из сторон зададим по 10 пик, но я использую margin в 10 пик, это задаст сразу отступы в дальнейшем для мобильных устройств.
.imageBox < … margin: 10px; >.grid-container
В принципе с контейнером закончили работать, и переходи к его элементам. Блоку с классом .imageBox прописываем position: relative , делаем его flex контейнером.
Для заголовка пропишем позиционирование абсолютное блоку, увеличим до 25 пик, сделаем прозрачный фон, и назначим белый цвет.
.imageBox h3
И для его выравнивания по горизонтали, зададим .imegeBox justify-content: center , а для вертикали align-items: center .
Элементы выровняли и далее можно переходить к адаптивности сетки.
Адаптируем сетку на модуле CSS Grid
Создаем дополнительный файл, он у нас подключается в head при разрешении менее 920 пик. Делаем проверку, убедились что он подключается и поехали дальше.
body
При таком разрешении делаем двух колоночную сетку, первым делом зададим допустимую максимальную ширину в 730 пик. Зададим ширину колонок по 1 фракции, а ширину ряда по 370 пик.
.grid-container
На разрешении менее 768 пик, делаем максимальную допустимую ширину 450 пик, для высоты и ширены ячейки задаем 1 фракцию, и делаем размету в одну ячейку.
@media only screen and (max-width: 768px) < .grid-container < max-width: 450px; grid: 1fr / 1fr; grid-template-areas: "box-1" "box-2" "box-3" "box-4" >>
И последний штрих, что бы блоки не сжимались мене 150 пик, так как это уже не красиво смотрится. Создаем медиа запрос от 280 пик, и для блоков пропишем минимальную допустимую ширину в 150 пик.
@media only screen and (max-width: 280px) < .imageBox img < min-width: 150px; >>
На таком разрешении будет появляться скрол, и картинка ужиматься не будет.
Так вот мы написали сетку, она у нас адаптивна. И теперь заказчик говорит нам, а поменяй блоки местами, к примеру блок 1 и 3 между собой на основном разрешении.
Для этого вы переходите в файл css, и меняете их местами.
.grid-container
Притом, просматривая на отображение в других устройствах, их порядок остается предыдущим. Согласитесь, это просто класс.
И так, я вам показал, как реализуется сетка на библиотеки bootstrap и модуле Grid , а вы для себя выберите вариант, с которым вам будет удобней работать.
В предыдущем уроке я показывал вам тройной эффект по наведению на изображение. Вам домашнее задание, внедрите те эффекты в текущую верстку, и вы получите такой результат.
Урок подготовил Горелов Денис.
Как создавать сложные макеты с помощью CSS-сетки
Во предыдущей статье мы узнали, как работает CSS Grid и как с его помощью легко создавать простые макеты.
Сегодня мы узнаем, как с его помощью создавать более сложные макеты.
Определяем сетку
Не смотря на то, что CSS Grid может быть очень простым, он дает вам возможность невероятно точно контролировать, где именно на странице будет расположен определенный элемент.
Все начинается с определения сетки. Для макетов рекомендуется определить столбцы и строки.
Для сегодняшнего примера, давайте создадим сетку 5×5 (пять столбцов и пять строк).
.grid-5-by-5 < /* Активируем CSS grid*/ display: grid; /* Создаем 5 столбцов, каждый шириной 1 fr (дробная единица) */ grid-template-columns: repeat(5, 1fr); /* Создаем 5 строк, кадая высотой 1 fr (дробная единица) */ grid-template-rows: repeat(5, 1fr); /* Добавим разрыв 10px между строками и столбцами */ grid-gap: 10px; >Вот как это выглядит
Для наглядности в каждом элементе в сетке находится текст, который отражает порядок элементов в потоке сетки по умолчанию.
Располагаем элементы в нашей сетке
Допустим, у меня в сетке было три предмета.