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

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

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

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

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

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

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

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

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

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

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

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

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

Слайдер Swiper выходит за колонку в Css Grid

У меня Css Grid с двумя колоками в первой слайдер Swiper, во второй картинка. Swiper выходит за колонку и заходит под картинку CSS Grid: Слайдер: swiper.js: import { Pagination } from "swiper&...
Alex Fox's user avatar
  • 171
0 голосов
1 ответ
120 показов

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

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

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

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

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

Способом ниже - понятно, от одного числа до другого и 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 ответов
32 показа

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

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

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

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

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

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

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

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

Изменить последовательность в 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 ответ
57 показов

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

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

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

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

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

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

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 ответ
467 показов

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

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

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

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

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

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

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

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

Проблема с 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 ответ
85 показов

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

Есть сетка изображений (каждое с соотношением сторон 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 ответ
36 показов

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

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

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

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

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

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

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

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

Как выровнять карточки с помощью 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 ответов
67 показов

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

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

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

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

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

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

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

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

Css Grid Column

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

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

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

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

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

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

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

Не работает указание 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 ответ
73 показа

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

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

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
0 голосов
1 ответ
55 показов

Проблема с отображением grid-а

Есть код $(document).ready(function() { /* all__buttons=document.querySelectorAll('.header__button'); [].forEach.call(all__buttons, function(...
htmllayout's user avatar
1 голос
2 ответа
221 показ

как сделать блоки как на картинке с с помощью flex-box или grid-box

Добрый день как можно сверстать блоки как на этой картине ?
Genesis's user avatar
  • 71
1 голос
0 ответов
98 показов

Как сделать такой повторяющийся css-grid?

Как сделать такую сетку для неограниченного числа элементов, чтобы не прописывать стили для каждого элемента по очереди :nth-child(1), :nth-child(2) и т.д. .grid { display: grid; grid-template-...
Alexey Kuznetsov's user avatar
0 голосов
1 ответ
232 показа

Как установить весь grid по центру

Вопрос не в том, как выровнять элементы грида по центру, а как всю сетку установить по центру. Т.е. есть wrapper с дивами внутри, wrapper реализован как grid и, например его ширина 1200px. ...
Эмин Погосбеков's user avatar
2 голоса
1 ответ
1k показов

Как правильно указать минимальную ширину для элемента CSS grid, если мы не знаем заранее, сколько места оставит родительский контейнер?

Задавая grid-template-columns значение например, repeat(auto-fill, minmax(280px, 1fr)); мы предполагаем, что родительский контейнер будет всегда оставлять нам не менее 280px (а иначе произойдёт ...
Боков Глеб's user avatar
0 голосов
1 ответ
71 показ

Вопрос по разметки boostrap

Всем привет. Начал изучать boostrap, но столкнулся со сложностью разметки. Нужна разметка по изображению ниже. Сколько не искал по документации, подобного примера я так и не нашел (возможно плохо ...
hard990's user avatar
1 голос
2 ответа
233 показа

Почему не отрабатывает minmax()

Есть разметка <div class="row-default__left-col"> <div class="left-col__row-speciality default"> <span class=&...
Антон's user avatar