Вопросы с меткой [css-grid]
Модуль CSS Grid описывает двухмерную систему создания раскладок, основанную на сетке, оптимизированную для создания пользовательских интерфейсов. В сеточной модели раскладки, потомок grid-контейнера может быть позиционирован в произвольный слот в заранее определенной тянущейся или фиксированной сеточной раскладке.
189
вопросов
0
голосов
1
ответ
24
показа
Динамические строки для grid-template-areas
У меня есть сетка с grid-template-areas, и я хочу, чтобы элементы с классом item-left отображались слева в одной колонке, а элементы с классом item-right - справа, как на скриншоте:
Важный момент: ...
0
голосов
0
ответов
17
показов
Привязка фонового изображения к гриду
прошу вас о помощи
В браузерной игре-бродилке реализовано перемещение между секторами. Карта представляет собой локацию 50×50, а сектора этой локации- ячейки. Предполагается, что на фоне матрицы будет ...
0
голосов
3
ответа
70
показов
Как сверстать сетку с «выпавшими», пустыми элементами?
Коллеги, прошу вас помочь мне с идеей как сверстать сетку, у которой есть пустые ячейки без контента.
САБЖ:
Вот макет секции. Секция будет заполняться из админ панели. Т.е. все ячейки по порядку. Т.е. ...
0
голосов
0
ответов
42
показа
Динамическое смещение элементов по вертикали CSS Grid
Как реализовать динамическое смещение элементов по вертикали с помощью CSS Grid?
Пример структуры:
-1
голос
1
ответ
43
показа
Вёрстка контейнера с элементами разной ширины и высоты
Какой самый удобный и простой способ сверстать данный макет? Что лучше использовать grid или flex?
0
голосов
0
ответов
140
показов
Слайдер Swiper выходит за колонку в Css Grid
У меня Css Grid с двумя колоками в первой слайдер Swiper, во второй картинка.
Swiper выходит за колонку и заходит под картинку
CSS Grid:
Слайдер:
swiper.js:
import { Pagination } from "swiper&...
0
голосов
1
ответ
120
показов
Как выбрать конкретную колонку в grid css
Подскажите пожалуйста, как можно обратиться к конкретной колонке грида? (чтобы например задать ему бордер)
К элементам в сетке обращаемся типа .my_grid > a:nth-child(2), а вот можно ли обратиться к ...
0
голосов
1
ответ
24
показа
как в css для grid-а плюсануть к fr pixel
(два блока)
вот так не работает
grid-template-columns: calc(2fr + 8px) 1fr;
grid-template-columns: (calc(2fr + 8px)) 1fr;
-1
голос
1
ответ
115
показов
Как наложить один грид-элемент на другой пользуясь именованными областями?
Способом ниже - понятно, от одного числа до другого и z-index.
.setka {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
color: white;
}
.blue {...
0
голосов
0
ответов
32
показа
Как перестроить блок в другой ряд
Есть следующая задача, карточки расположены по две в ряд на десктопе и каждая имеет равную ширину, которая равна 50%, при клике на карточку добавляется класс active и эта карточка начинает занимать ...
3
голоса
2
ответа
109
показов
Схлопнуть внутреннюю колонку грида если нет элемента
В следующем примере нижние элементы mid-left и mid-right должны поровну делить между собой пространство, оставшееся от других областей. Но если присутствует только один из них, то он должен занимать ...
0
голосов
1
ответ
303
показа
Как запретить изображению в grid-элементе растягивать высоту?
Всем привет. Высота body 100 vh, поделил сетку, все вроде по канонам, но изображение справа получается больше (если так), появляется горизонтальная полоса прокрутки и изображение растягивается по ...
0
голосов
2
ответа
653
показа
Как отменить растягивание grid на всю ширину родителя
Не могу разобраться с поведением контейнера grid. Мне нужно, чтобы в grid в середине был блок основного контейнера, а слева и справа от него были блоки aside на некотором расстоянии, которое я задаю ...
-1
голос
1
ответ
34
показа
Изменить последовательность в Grid view
С сервера приходит список айтемов:
<ul class="list">
<li class="item">Select All</li>
<li class="item">Civil Id</li>
<li class=&...
0
голосов
1
ответ
57
показов
Нестандартная сетка
Как сделать такую сетку?
Пытаюсь через grid, но не все равно не получается.
Спасибо!
1
голос
1
ответ
128
показов
Как выровнять текст по вертикали в grid с помощью css?
Сверстала макет на grid. Хочу выровнять текст по вертикали. Свойство align-items работает не так, как надо - оно выравнивает текст, но и обрезает background, который я задала:
А надо, чтобы ячейка ...
0
голосов
1
ответ
64
показа
Как добавить отступы и скролл?
В проекте требуется сделать инвентарь. На данный момент он выглядит так.
Добавил ему свойство display: grid и добавил отступы друг от друга через grid-gap. Хочется также добавить отступы от левого и ...
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;
}
Как ...
0
голосов
1
ответ
467
показов
Как задавать одинаковую высоту элемента grid в зависимости от максимальной высоты
Всем привет!
Задача такова, есть простая grid-сетка с 1 колонной и 2 элементами внутри. При сжатии экрана текст перепрыгивает на другую строку тем самым увеличивая сам блок. Но не во всех элементах ...
0
голосов
1
ответ
41
показ
Выравнивание по ширине родительского блока
Возможно ли сделать выравнивание типа justify-content: space-between; (flexbox/grid), но при этом чтобы по высоте автоматически выставлялся аналогичный отступ между элементами и при этом последние ...
0
голосов
1
ответ
84
показа
Можно ли сделать так, чтобы боковое меню перестало быть sticky, когда мы долистаем к footer(нижней части нашей страницы)?
Я хочу сделать так, чтобы в определённый момент (когда мы долистаем к footer) боковое навигационное меню (aside) перестало быть со свойством sticky, и чтобы оно не заступало footer. Можно ли это ...
0
голосов
1
ответ
153
показа
Как ограничить grid только 2 элементами по оси Y и бесконечным количеством со скролом по оси x
У меня есть два контейнера:
(является grid'дом)
<div className='Reviews'>внутри находятся много-много(или нет) контейнеров review(код ниже)</div>
и
(вот тот самый контейнер)
...
0
голосов
1
ответ
59
показов
Проблема с css grid
Имеется блоки которые окутаны в div.wrapper, у него имеются такие свойства
display: grid;
grid-template-columns: 20% 80%;
grid-template-areas: "aside main";
grid-column-gap: .8em;
Также ...
0
голосов
0
ответов
50
показов
Верстка на гридах
Есть проблема некоторая с версткой на гридах. Не могу разобраться, в чем дело. Что-то делаю дне так, но не понимаю, что именно. Отступ между ссылками навигации - 50px. От ссылок до иконок - 245px; ...
2
голоса
1
ответ
85
показов
Как задать относительную высоту элемента в сетке?
Есть сетка изображений (каждое с соотношением сторон 2:3) из 4-х элементов в строке. Как можно задать относительную высоту, чтобы при изменении разрешения, высота менялась пропорционально?
Сама сетка ...
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 {...
0
голосов
1
ответ
36
показов
Вёрстка социального блока
Имеется макет в Figma. В макете имеется социальный блок с изображениями. Пытался сверстать его на флексах, гридах, но не особо понимаю, как правильнее это сделать. Нужно, чтобы элементы(изображения) ...
0
голосов
0
ответов
28
показов
Где можно увидеть лучшие работы по современной верстке?
Стоит задача хорошо прокачать CSS-Grid в комплекте с FlexBox.
После пройденных курсов по данному направлению появились некоторые вопросы и недопонимание относительно преимуществ данного подхода.
...
0
голосов
1
ответ
1k
показов
Как ограничить количество строк в grid css?
Я хочу сделать 2 столбца по 5 элементов в каждом. Сейчас у меня 6 элементов, значит, 5 из них должны быть в первом столбце, а шестой - во 2-м столбце.
Должно быть:
Текущее состояние:
Код:
....
0
голосов
1
ответ
57
показов
Помогите сделать grid сетку
Полный чайник в Grid CSS. Нужно на скорях сделать вот такую сетку.
Обшарил весь интернет, именно такой не нашёл.
Кусок html кода
<div class="frontproject-item-list">
<a class="...
0
голосов
1
ответ
118
показов
Как выровнять карточки с помощью grid?
Как поставить карточку 1 ровно посередине между карточками 2 и 3?
* {
box-sizing: border-box;
}
.grid-container {
max-width: 940px; /* максимальная ширина контейнера */
margin: auto; /...
0
голосов
1
ответ
2k
показов
как сделать grid сетку адаптивной? как уменьшать ее содержимое?
у меня есть грид сетка - товары в магазине, и на большом экране с ней все хорошо, но когда экран уменьшается вслед за ним уменьшается только ширина ячеек сетки, из-за чего элементы наезжают друг на ...
0
голосов
0
ответов
67
показов
Создание CSS Grid сетки которая гарантированно будет состоять из квадратов
Я хочу создать grid который будет занимать
Весь экран по длине
Состоять из 7 столбцов
Состоять из такого количества строк, чтобы ширина одной ячейки была равна ее длине
Примерно вот так:
Как это ...
0
голосов
0
ответов
138
показов
Почему не растягивается грид строчка по вертикали? В чем логика?
Не срабатывает настойка рядов,занимаемых элементом в случае,если элемент растянут на всю ширину экрана и не указаны никакие настройки высоты для гридконтейнера. Файлы с кодом в конце. Скриншоты в ...
0
голосов
0
ответов
40
показов
как используя grid разместить по 4 блока по горизонтали и сделать адаптив?
Задача, есть 12 блоков, разместить их по горизонтали по 4. Когда браузер сжимается, чтобы перегруппировывались по 3, потом по 2, потом по 1.
Мои попытки:
.grid {
display: grid;
grid-gap: ...
0
голосов
1
ответ
87
показов
css grid. позиционирование строк
Есть контейнер, в нем 9 блоков. Через display: grid; спозиционированы на странице в один ряд. При адаптировании мне надо чтобы 4 блока ушли на вторую строку и выровнялись по центру. (как будто теперь ...
0
голосов
2
ответа
170
показов
Css Grid Column
нужно разместить колонки как на примере ниже с помощью grid layout.
Вопрос, возможно ли такое? Нужно сместить некоторые колонки, я не знаю как это сделать, код предоставлен ниже.
body {
...
0
голосов
1
ответ
724
показа
Как сделать вертикальное выравнивание элементов внутри full-height css grid по центру?
разбираюсь с css grid.
Набросал небольшой макет, тренируюсь...
Мне нужно получить полностью адаптивную двух-колоночную сетку на всю высоту!
При этом, что бы для мобильных устройств сетка менялась с ...
0
голосов
0
ответов
113
показов
Почему grid обрезает последние блоки?
Всем добрый день. Верстаю новостной сайт и решил попробовать использовать сетку grid , но почему-то сетка становиться не во весь размер блоков и обрезает часть последних элементов . Гуглил , но не ...
0
голосов
1
ответ
1k
показов
Может ли Grid заменить таблицу?
Собственно сам вопрос: могут ли гриды заменить таблицу? А нужно ли?
Мне никогда не нравились таблицы, не знаю чем. При появлении гридов, хочется многое сделать ими. Захотел сделать простую табличку, ...
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 ...
0
голосов
1
ответ
73
показа
Задание межэлементного пространства во flexbox
Есть сайт - https://www.figma.com/file/noqP1gzhrAlGAErPNBgknp/test?node-id=0%3A1 (tablet версия). Как задать межэлементное пространство между LOGO COMPANY и двумя квадратиками в футере с учетом того, ...
0
голосов
1
ответ
229
показов
css grid появляются отступы
как сделать задний фон весь экран чтобы не было никаких отступов
.wrapper {
display: grid;
background-image: url('http://www.gpsprecision.com/wp-content/uploads/2016/04/bg-1920-1080.jpg');
...
0
голосов
1
ответ
55
показов
Проблема с отображением grid-а
Есть код
$(document).ready(function() {
/*
all__buttons=document.querySelectorAll('.header__button');
[].forEach.call(all__buttons, function(...
1
голос
2
ответа
221
показ
как сделать блоки как на картинке с с помощью flex-box или grid-box
Добрый день как можно сверстать блоки как на этой картине ?
1
голос
0
ответов
98
показов
Как сделать такой повторяющийся css-grid?
Как сделать такую сетку для неограниченного числа элементов, чтобы не прописывать стили для каждого элемента по очереди :nth-child(1), :nth-child(2) и т.д.
.grid {
display: grid;
grid-template-...
0
голосов
1
ответ
232
показа
Как установить весь grid по центру
Вопрос не в том, как выровнять элементы грида по центру, а как всю сетку установить по центру.
Т.е. есть wrapper с дивами внутри, wrapper реализован как grid и, например его ширина 1200px. ...
2
голоса
1
ответ
1k
показов
Как правильно указать минимальную ширину для элемента CSS grid, если мы не знаем заранее, сколько места оставит родительский контейнер?
Задавая grid-template-columns значение например, repeat(auto-fill, minmax(280px, 1fr)); мы предполагаем, что родительский контейнер будет всегда оставлять нам не менее 280px (а иначе произойдёт ...
0
голосов
1
ответ
71
показ
Вопрос по разметки boostrap
Всем привет. Начал изучать boostrap, но столкнулся со сложностью разметки. Нужна разметка по изображению ниже. Сколько не искал по документации, подобного примера я так и не нашел (возможно плохо ...
1
голос
2
ответа
233
показа
Почему не отрабатывает minmax()
Есть разметка
<div class="row-default__left-col">
<div class="left-col__row-speciality default">
<span class=&...