Вопросы с меткой [css-grid]

Модуль CSS Grid описывает двухмерную систему создания раскладок, основанную на сетке, оптимизированную для создания пользовательских интерфейсов. В сеточной модели раскладки, потомок grid-контейнера может быть позиционирован в произвольный слот в заранее определенной тянущейся или фиксированной сеточной раскладке.

Фильтрация
Сортировка
Метки
0 голосов
0 ответов
21 показ

Как горизонтально выровнять надписи относительно "Бургера" на мобильной версии?

Есть вот такой сайт: https://client.evroflag.by/purl2/index.php?c=72764&p=3399072&e=13 На его мобильной версии, есть 2 мобильных меню. Рядом с которыми их названия. Но я не могу понять, как их ...
Vadzim's user avatar
  • 7
1 голос
0 ответов
51 показ

Css grid Как создать

проломал голову уже часов 6, не получается сверстать блок. А именно друг под друга поставить могу, но чтобы фото занимали пустое пространство не получается( Заранее спасибо)
Tom Tom's user avatar
  • 35
0 голосов
1 ответ
58 показов

Почему calc превращает отрицательное число повторений в одно?

Почему в Хроме (версия 121 и не только) repeat(-10, 1fr) является ошибкой, а repeat(calc(-10), 1fr) ведёт себя как 1? С другими неположительными числами - аналогично. Я ожидал, что поведение будет ...
Qwertiy's user avatar
  • 124k
0 голосов
1 ответ
27 показов

Расположить элементы на равном расстоянии друг от друга с помощью css-grid

Тренируюсь использовать css-grid, пытаюсь расположить три элемента в хэдере на одном расстоянии друг от друга, но они все сместились в левую сторону и не хотят задействовать левую часть контейнера. То ...
Bemfes's user avatar
  • 23
1 голос
1 ответ
27 показов

Не работает запрос media для телефонов

Делаю медиа-запрос для телефона, а он не работает (должно быть в один столбец, при разрешении от 0 до 600): * { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: ...
Артем's user avatar
1 голос
2 ответа
67 показов

Как разместить корректно галерею фоток с помощью grid?

Пытаюсь разместить фотки в галереи таким образом как на скрине, но не могу понять как разместить последний блок, да и вообще как корректно все их разместить. Также вопрос, в данном случае будет ...
Виталий Тимонин's user avatar
0 голосов
0 ответов
30 показов

Как сделать перенос элементов списка при уменьшии экрана, чтобы сначала переносились 2 элемента <li>, затем (при большем уменьшении окна) каждый <li>?

<div class="sect0__content0"> <ul class="sect0__content sect0-list"> <li class="sect0-list__item"> ...
VERA Yasakova's user avatar
1 голос
3 ответа
38 показов

Почему нижние элементы grid по высоте меньше, чем самые верхние?

Помогите пожалуйста решить данную проблему. Нижние блоки отличаются по высоте с верхними. Все блоки должны иметь высоту 350рх, когда нижние составляют, почему то, всего 290рх. Везде искал решение ...
Никита's user avatar
0 голосов
1 ответ
61 показ

Динамические строки для grid-template-areas

У меня есть сетка с grid-template-areas, и я хочу, чтобы элементы с классом item-left отображались слева в одной колонке, а элементы с классом item-right - справа, как на скриншоте: Важный момент: ...
rabbit's user avatar
  • 919
0 голосов
0 ответов
18 показов

Привязка фонового изображения к гриду

прошу вас о помощи В браузерной игре-бродилке реализовано перемещение между секторами. Карта представляет собой локацию 50×50, а сектора этой локации- ячейки. Предполагается, что на фоне матрицы будет ...
Den aka Ben's user avatar
0 голосов
3 ответа
71 показ

Как сверстать сетку с «выпавшими», пустыми элементами?

Коллеги, прошу вас помочь мне с идеей как сверстать сетку, у которой есть пустые ячейки без контента. САБЖ: Вот макет секции. Секция будет заполняться из админ панели. Т.е. все ячейки по порядку. Т.е. ...
Polina's user avatar
  • 336
0 голосов
0 ответов
49 показов

Динамическое смещение элементов по вертикали CSS Grid

Как реализовать динамическое смещение элементов по вертикали с помощью CSS Grid? Пример структуры:
Ilya's user avatar
  • 1
-1 голос
1 ответ
80 показов

Вёрстка контейнера с элементами разной ширины и высоты

Какой самый удобный и простой способ сверстать данный макет? Что лучше использовать grid или flex?
Artem Platonov's user avatar
0 голосов
1 ответ
189 показов

Как выбрать конкретную колонку в grid css

Подскажите пожалуйста, как можно обратиться к конкретной колонке грида? (чтобы например задать ему бордер) К элементам в сетке обращаемся типа .my_grid > a:nth-child(2), а вот можно ли обратиться к ...
Дима's user avatar
0 голосов
1 ответ
29 показов

как в css для grid-а плюсануть к fr pixel

(два блока) вот так не работает grid-template-columns: calc(2fr + 8px) 1fr; grid-template-columns: (calc(2fr + 8px)) 1fr;
Armen's user avatar
  • 1,730
-1 голос
1 ответ
155 показов

Как наложить один грид-элемент на другой пользуясь именованными областями?

Способом ниже - понятно, от одного числа до другого и z-index. .setka { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(3, 100px); color: white; } .blue {...
Otkambinok's user avatar
0 голосов
0 ответов
35 показов

Как перестроить блок в другой ряд

Есть следующая задача, карточки расположены по две в ряд на десктопе и каждая имеет равную ширину, которая равна 50%, при клике на карточку добавляется класс active и эта карточка начинает занимать ...
Евгений Мусеев's user avatar
3 голоса
2 ответа
154 показа

Схлопнуть внутреннюю колонку грида если нет элемента

В следующем примере нижние элементы mid-left и mid-right должны поровну делить между собой пространство, оставшееся от других областей. Но если присутствует только один из них, то он должен занимать ...
Qwertiy's user avatar
  • 124k
0 голосов
1 ответ
387 показов

Как запретить изображению в grid-элементе растягивать высоту?

Всем привет. Высота body 100 vh, поделил сетку, все вроде по канонам, но изображение справа получается больше (если так), появляется горизонтальная полоса прокрутки и изображение растягивается по ...
Otkambinok's user avatar
0 голосов
2 ответа
989 показов

Как отменить растягивание grid на всю ширину родителя

Не могу разобраться с поведением контейнера grid. Мне нужно, чтобы в grid в середине был блок основного контейнера, а слева и справа от него были блоки aside на некотором расстоянии, которое я задаю ...
Vadim Mokrushin's user avatar
-1 голос
1 ответ
52 показа

Изменить последовательность в Grid view

С сервера приходит список айтемов: <ul class="list"> <li class="item">Select All</li> <li class="item">Civil Id</li> <li class=&...
Propool's user avatar
  • 31
0 голосов
1 ответ
82 показа

Нестандартная сетка

Как сделать такую сетку? Пытаюсь через grid, но не все равно не получается. Спасибо!
Dmytro's user avatar
  • 3
1 голос
1 ответ
182 показа

Как выровнять текст по вертикали в grid с помощью css?

Сверстала макет на grid. Хочу выровнять текст по вертикали. Свойство align-items работает не так, как надо - оно выравнивает текст, но и обрезает background, который я задала: А надо, чтобы ячейка ...
Ira F.'s user avatar
  • 13
0 голосов
1 ответ
79 показов

Как добавить отступы и скролл?

В проекте требуется сделать инвентарь. На данный момент он выглядит так. Добавил ему свойство display: grid и добавил отступы друг от друга через grid-gap. Хочется также добавить отступы от левого и ...
blnk.off's user avatar
0 голосов
0 ответов
33 показа

Grid CSS свойства: grid-row-start: и grid-row-end:

https://codepen.io/yasakova/pen/mdxvxpr Объясните почему box1 находится вертикально в 1-3 строке, а не в 1-4 строке как указано: .box1 { grid-row-start: 1; grid-row-end: 4; } Как ...
VERA Yasakova's user avatar
0 голосов
1 ответ
612 показов

Как задавать одинаковую высоту элемента grid в зависимости от максимальной высоты

Всем привет! Задача такова, есть простая grid-сетка с 1 колонной и 2 элементами внутри. При сжатии экрана текст перепрыгивает на другую строку тем самым увеличивая сам блок. Но не во всех элементах ...
Stanislav's user avatar
0 голосов
1 ответ
42 показа

Выравнивание по ширине родительского блока

Возможно ли сделать выравнивание типа justify-content: space-between; (flexbox/grid), но при этом чтобы по высоте автоматически выставлялся аналогичный отступ между элементами и при этом последние ...
MAX GOLD's user avatar
0 голосов
1 ответ
92 показа

Можно ли сделать так, чтобы боковое меню перестало быть sticky, когда мы долистаем к footer(нижней части нашей страницы)?

Я хочу сделать так, чтобы в определённый момент (когда мы долистаем к footer) боковое навигационное меню (aside) перестало быть со свойством sticky, и чтобы оно не заступало footer. Можно ли это ...
Maksim_432's user avatar
0 голосов
1 ответ
176 показов

Как ограничить grid только 2 элементами по оси Y и бесконечным количеством со скролом по оси x

У меня есть два контейнера: (является grid'дом) <div className='Reviews'>внутри находятся много-много(или нет) контейнеров review(код ниже)</div> и (вот тот самый контейнер) ...
3DMaX's user avatar
  • 43
0 голосов
1 ответ
69 показов

Проблема с css grid

Имеется блоки которые окутаны в div.wrapper, у него имеются такие свойства display: grid; grid-template-columns: 20% 80%; grid-template-areas: "aside main"; grid-column-gap: .8em; Также ...
lowanda777's user avatar
0 голосов
0 ответов
50 показов

Верстка на гридах

Есть проблема некоторая с версткой на гридах. Не могу разобраться, в чем дело. Что-то делаю дне так, но не понимаю, что именно. Отступ между ссылками навигации - 50px. От ссылок до иконок - 245px; ...
Meekwest's user avatar
2 голоса
1 ответ
95 показов

Как задать относительную высоту элемента в сетке?

Есть сетка изображений (каждое с соотношением сторон 2:3) из 4-х элементов в строке. Как можно задать относительную высоту, чтобы при изменении разрешения, высота менялась пропорционально? Сама сетка ...
levensta's user avatar
0 голосов
1 ответ
1k показов

Как скрыть элемент, который не помещается в CSS Grid

Допустим у нас есть 5 элементов в grid: .grid { width: 500px; border: 1px red solid; display: grid; grid-gap: 11px; grid-template-columns: repeat(12, minmax(0, 1fr)); } .item {...
FIMKA's user avatar
  • 5
0 голосов
1 ответ
42 показа

Вёрстка социального блока

Имеется макет в Figma. В макете имеется социальный блок с изображениями. Пытался сверстать его на флексах, гридах, но не особо понимаю, как правильнее это сделать. Нужно, чтобы элементы(изображения) ...
Владислав Бирюков's user avatar
0 голосов
0 ответов
29 показов

Где можно увидеть лучшие работы по современной верстке?

Стоит задача хорошо прокачать CSS-Grid в комплекте с FlexBox. После пройденных курсов по данному направлению появились некоторые вопросы и недопонимание относительно преимуществ данного подхода. ...
Mikhail Krivosheev's user avatar
0 голосов
1 ответ
1k показов

Как ограничить количество строк в grid css?

Я хочу сделать 2 столбца по 5 элементов в каждом. Сейчас у меня 6 элементов, значит, 5 из них должны быть в первом столбце, а шестой - во 2-м столбце. Должно быть: Текущее состояние: Код: ....
yourBadApple's user avatar
0 голосов
1 ответ
61 показ

Помогите сделать grid сетку

Полный чайник в Grid CSS. Нужно на скорях сделать вот такую сетку. Обшарил весь интернет, именно такой не нашёл. Кусок html кода <div class="frontproject-item-list"> <a class="...
Шемединов Сергей's user avatar
0 голосов
1 ответ
142 показа

Как выровнять карточки с помощью grid?

Как поставить карточку 1 ровно посередине между карточками 2 и 3? * { box-sizing: border-box; } .grid-container { max-width: 940px; /* максимальная ширина контейнера */ margin: auto; /...
win's user avatar
  • 69
0 голосов
1 ответ
2k показов

как сделать grid сетку адаптивной? как уменьшать ее содержимое?

у меня есть грид сетка - товары в магазине, и на большом экране с ней все хорошо, но когда экран уменьшается вслед за ним уменьшается только ширина ячеек сетки, из-за чего элементы наезжают друг на ...
user avatar
0 голосов
0 ответов
78 показов

Создание CSS Grid сетки которая гарантированно будет состоять из квадратов

Я хочу создать grid который будет занимать Весь экран по длине Состоять из 7 столбцов Состоять из такого количества строк, чтобы ширина одной ячейки была равна ее длине Примерно вот так: Как это ...
Micos's user avatar
  • 126
0 голосов
0 ответов
147 показов

Почему не растягивается грид строчка по вертикали? В чем логика?

Не срабатывает настойка рядов,занимаемых элементом в случае,если элемент растянут на всю ширину экрана и не указаны никакие настройки высоты для гридконтейнера. Файлы с кодом в конце. Скриншоты в ...
G H's user avatar
  • 1
0 голосов
0 ответов
44 показа

как используя grid разместить по 4 блока по горизонтали и сделать адаптив?

Задача, есть 12 блоков, разместить их по горизонтали по 4. Когда браузер сжимается, чтобы перегруппировывались по 3, потом по 2, потом по 1. Мои попытки: .grid { display: grid; grid-gap: ...
Daniil's user avatar
  • 53
0 голосов
1 ответ
91 показ

css grid. позиционирование строк

Есть контейнер, в нем 9 блоков. Через display: grid; спозиционированы на странице в один ряд. При адаптировании мне надо чтобы 4 блока ушли на вторую строку и выровнялись по центру. (как будто теперь ...
Meth0d's user avatar
  • 893
0 голосов
2 ответа
187 показов

Css Grid Column

нужно разместить колонки как на примере ниже с помощью grid layout. Вопрос, возможно ли такое? Нужно сместить некоторые колонки, я не знаю как это сделать, код предоставлен ниже. body { ...
selyaninov's user avatar
0 голосов
1 ответ
833 показа

Как сделать вертикальное выравнивание элементов внутри full-height css grid по центру?

разбираюсь с css grid. Набросал небольшой макет, тренируюсь... Мне нужно получить полностью адаптивную двух-колоночную сетку на всю высоту! При этом, что бы для мобильных устройств сетка менялась с ...
Javier Pena's user avatar
0 голосов
0 ответов
125 показов

Почему grid обрезает последние блоки?

Всем добрый день. Верстаю новостной сайт и решил попробовать использовать сетку grid , но почему-то сетка становиться не во весь размер блоков и обрезает часть последних элементов . Гуглил , но не ...
Daniil's user avatar
  • 79
0 голосов
1 ответ
2k показов

Может ли Grid заменить таблицу?

Собственно сам вопрос: могут ли гриды заменить таблицу? А нужно ли? Мне никогда не нравились таблицы, не знаю чем. При появлении гридов, хочется многое сделать ими. Захотел сделать простую табличку, ...
Oliver Patterson's user avatar
0 голосов
1 ответ
272 показа

Не работает указание grid-областей

Есть код HTML, css .addForm { display: grid; grid-template-columns: repeat(20, 30px); grid-auto-rows: 30px; margin: 20px auto; grid-gap: 10px; grid-template-areas: "name name name name ...
Антон's user avatar
0 голосов
1 ответ
79 показов

Задание межэлементного пространства во flexbox

Есть сайт - https://www.figma.com/file/noqP1gzhrAlGAErPNBgknp/test?node-id=0%3A1 (tablet версия). Как задать межэлементное пространство между LOGO COMPANY и двумя квадратиками в футере с учетом того, ...
htmlcssjsphp's user avatar
0 голосов
1 ответ
241 показ

css grid появляются отступы

как сделать задний фон весь экран чтобы не было никаких отступов .wrapper { display: grid; background-image: url('http://www.gpsprecision.com/wp-content/uploads/2016/04/bg-1920-1080.jpg'); ...
Agata's user avatar
  • 467