Вопросы с меткой [css-grid]
Модуль CSS Grid описывает двухмерную систему создания раскладок, основанную на сетке, оптимизированную для создания пользовательских интерфейсов. В сеточной модели раскладки, потомок grid-контейнера может быть позиционирован в произвольный слот в заранее определенной тянущейся или фиксированной сеточной раскладке.
171
вопрос
0
голосов
0
ответов
4
показа
Как зделать так чтобы боковая панель, при увиличивании размера сайта перемещалась под основной текст
body {
background-color: #fff;
color: #333;
margin: 0;
font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
}
.logo {
font-size: 200%;
padding: 50px 20px;
margin: 0 auto;
...
0
голосов
1
ответ
33
показа
Можно ли сделать так, чтобы боковое меню перестало быть sticky, когда мы долистаем к footer(нижней части нашей страницы)?
Я хочу сделать так, чтобы в определённый момент (когда мы долистаем к footer) боковое навигационное меню (aside) перестало быть со свойством sticky, и чтобы оно не заступало footer. Можно ли это ...
0
голосов
0
ответов
7
показов
Каким способом оформить списки, чтобы высота колонок равнялась меньшей колонке, а остальное переносилось на следующую строку?
&__data-list {
display: grid;
justify-content: center;
column-gap: rem(20);
row-gap: rem(30);
grid-template-columns: repeat(auto-fill, rem(320));
@media (min-width: rem(650)...
0
голосов
1
ответ
37
показов
Как ограничить grid только 2 элементами по оси Y и бесконечным количеством со скролом по оси x
У меня есть два контейнера:
(является grid'дом)
<div className='Reviews'>внутри находятся много-много(или нет) контейнеров review(код ниже)</div>
и
(вот тот самый контейнер)
...
0
голосов
1
ответ
23
показа
Проблема с css grid
Имеется блоки которые окутаны в div.wrapper, у него имеются такие свойства
display: grid;
grid-template-columns: 20% 80%;
grid-template-areas: "aside main";
grid-column-gap: .8em;
Также ...
0
голосов
0
ответов
29
показов
Верстка на гридах
Есть проблема некоторая с версткой на гридах. Не могу разобраться, в чем дело. Что-то делаю дне так, но не понимаю, что именно. Отступ между ссылками навигации - 50px. От ссылок до иконок - 245px; ...
2
голоса
1
ответ
45
показов
Как задать относительную высоту элемента в сетке?
Есть сетка изображений (каждое с соотношением сторон 2:3) из 4-х элементов в строке. Как можно задать относительную высоту, чтобы при изменении разрешения, высота менялась пропорционально?
Сама сетка ...
0
голосов
1
ответ
165
показов
Как скрыть элемент, который не помещается в 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
ответ
23
показа
Вёрстка социального блока
Имеется макет в Figma. В макете имеется социальный блок с изображениями. Пытался сверстать его на флексах, гридах, но не особо понимаю, как правильнее это сделать. Нужно, чтобы элементы(изображения) ...
0
голосов
0
ответов
25
показов
Где можно увидеть лучшие работы по современной верстке?
Стоит задача хорошо прокачать CSS-Grid в комплекте с FlexBox.
После пройденных курсов по данному направлению появились некоторые вопросы и недопонимание относительно преимуществ данного подхода.
...
0
голосов
1
ответ
232
показа
Как ограничить количество строк в grid css?
Я хочу сделать 2 столбца по 5 элементов в каждом. Сейчас у меня 6 элементов, значит, 5 из них должны быть в первом столбце, а шестой - во 2-м столбце.
Должно быть:
Текущее состояние:
Код:
....
0
голосов
1
ответ
44
показа
Помогите сделать grid сетку
Полный чайник в Grid CSS. Нужно на скорях сделать вот такую сетку.
Обшарил весь интернет, именно такой не нашёл.
Кусок html кода
<div class="frontproject-item-list">
<a class="...
0
голосов
1
ответ
33
показа
Как выровнять карточки с помощью grid?
Как поставить карточку 1 ровно посередине между карточками 2 и 3?
* {
box-sizing: border-box;
}
.grid-container {
max-width: 940px; /* максимальная ширина контейнера */
margin: auto; /...
0
голосов
0
ответов
12
показов
помощь по сайту а кнкретнее по ссылкам на другие страницы
скачал сайт с веб архива. и на денвере и на хостинге открывается только главная. на другие страницы не могу попасть какая то проблема с ссылками .подскажите пожалуйста . в веб разработке и верстке ...
0
голосов
1
ответ
257
показов
как сделать grid сетку адаптивной? как уменьшать ее содержимое?
у меня есть грид сетка - товары в магазине, и на большом экране с ней все хорошо, но когда экран уменьшается вслед за ним уменьшается только ширина ячеек сетки, из-за чего элементы наезжают друг на ...
0
голосов
0
ответов
38
показов
Создание CSS Grid сетки которая гарантированно будет состоять из квадратов
Я хочу создать grid который будет занимать
Весь экран по длине
Состоять из 7 столбцов
Состоять из такого количества строк, чтобы ширина одной ячейки была равна ее длине
Примерно вот так:
Как это ...
0
голосов
0
ответов
40
показов
Почему не растягивается грид строчка по вертикали? В чем логика?
Не срабатывает настойка рядов,занимаемых элементом в случае,если элемент растянут на всю ширину экрана и не указаны никакие настройки высоты для гридконтейнера. Файлы с кодом в конце. Скриншоты в ...
0
голосов
0
ответов
28
показов
как используя grid разместить по 4 блока по горизонтали и сделать адаптив?
Задача, есть 12 блоков, разместить их по горизонтали по 4. Когда браузер сжимается, чтобы перегруппировывались по 3, потом по 2, потом по 1.
Мои попытки:
.grid {
display: grid;
grid-gap: ...
0
голосов
1
ответ
42
показа
css grid. позиционирование строк
Есть контейнер, в нем 9 блоков. Через display: grid; спозиционированы на странице в один ряд. При адаптировании мне надо чтобы 4 блока ушли на вторую строку и выровнялись по центру. (как будто теперь ...
0
голосов
2
ответа
84
показа
Css Grid Column
нужно разместить колонки как на примере ниже с помощью grid layout.
Вопрос, возможно ли такое? Нужно сместить некоторые колонки, я не знаю как это сделать, код предоставлен ниже.
body {
...
0
голосов
1
ответ
92
показа
Как сделать вертикальное выравнивание элементов внутри full-height css grid по центру?
разбираюсь с css grid.
Набросал небольшой макет, тренируюсь...
Мне нужно получить полностью адаптивную двух-колоночную сетку на всю высоту!
При этом, что бы для мобильных устройств сетка менялась с ...
0
голосов
0
ответов
33
показа
Почему grid обрезает последние блоки?
Всем добрый день. Верстаю новостной сайт и решил попробовать использовать сетку grid , но почему-то сетка становиться не во весь размер блоков и обрезает часть последних элементов . Гуглил , но не ...
0
голосов
1
ответ
252
показа
Может ли Grid заменить таблицу?
Собственно сам вопрос: могут ли гриды заменить таблицу? А нужно ли?
Мне никогда не нравились таблицы, не знаю чем. При появлении гридов, хочется многое сделать ими. Захотел сделать простую табличку, ...
0
голосов
1
ответ
47
показов
Не работает указание 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
ответ
46
показов
Задание межэлементного пространства во flexbox
Есть сайт - https://www.figma.com/file/noqP1gzhrAlGAErPNBgknp/test?node-id=0%3A1 (tablet версия). Как задать межэлементное пространство между LOGO COMPANY и двумя квадратиками в футере с учетом того, ...
0
голосов
1
ответ
111
показов
css grid появляются отступы
как сделать задний фон весь экран чтобы не было никаких отступов
.wrapper {
display: grid;
background-image: url('http://www.gpsprecision.com/wp-content/uploads/2016/04/bg-1920-1080.jpg');
...
0
голосов
1
ответ
31
показ
Проблема с отображением grid-а
Есть код
$(document).ready(function() {
/*
all__buttons=document.querySelectorAll('.header__button');
[].forEach.call(all__buttons, function(...
1
голос
2
ответа
81
показ
как сделать блоки как на картинке с с помощью flex-box или grid-box
Добрый день как можно сверстать блоки как на этой картине ?
1
голос
0
ответов
59
показов
Как сделать такой повторяющийся css-grid?
Как сделать такую сетку для неограниченного числа элементов, чтобы не прописывать стили для каждого элемента по очереди :nth-child(1), :nth-child(2) и т.д.
.grid {
display: grid;
grid-template-...
0
голосов
1
ответ
83
показа
Как установить весь grid по центру
Вопрос не в том, как выровнять элементы грида по центру, а как всю сетку установить по центру.
Т.е. есть wrapper с дивами внутри, wrapper реализован как grid и, например его ширина 1200px. ...
2
голоса
1
ответ
471
показ
Как правильно указать минимальную ширину для элемента CSS grid, если мы не знаем заранее, сколько места оставит родительский контейнер?
Задавая grid-template-columns значение например, repeat(auto-fill, minmax(280px, 1fr)); мы предполагаем, что родительский контейнер будет всегда оставлять нам не менее 280px (а иначе произойдёт ...
0
голосов
1
ответ
66
показов
Вопрос по разметки boostrap
Всем привет. Начал изучать boostrap, но столкнулся со сложностью разметки. Нужна разметка по изображению ниже. Сколько не искал по документации, подобного примера я так и не нашел (возможно плохо ...
1
голос
2
ответа
59
показов
Почему не отрабатывает minmax()
Есть разметка
<div class="row-default__left-col">
<div class="left-col__row-speciality default">
<span class=&...
1
голос
1
ответ
5k
показов
Автоматический перенос элементов в CSS grid как при float или inline-block
Подскажите пожалуйста, как реализовать на гриде следующее поведение, бывшее элементарным без грида.
Есть родительский блок с display: grid. Мы не знаем, сколько в нём будет дочерних элементов, сколько ...
1
голос
1
ответ
34
показа
Помогите с адаптивностью сайта :)
Я не очень разбираюсь в адаптивности, помогите с первой страничкой. Особенно не понимаю, как на мобильных устройствах сделать так, чтобы был только белый квадрат меню.
body {
padding: 0;
...
0
голосов
1
ответ
22
показа
Grid задать остаточное пространство слева от элементов
Существует блок с текстом и шкалой прогресса. Главный контейнер гибкий, в отличии от текста и шкалы прогресса. Внутри контейнера тег <a>, который имеет display: grid, а внутри блок с текстом и ...
1
голос
0
ответов
65
показов
Почему auto-fit и auto-fill не переносят блоки?
Код grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); должен переносить грид элементы на новую строку когда они перестают влазить в блок при заданной минимальной ширине, но они этого не ...
2
голоса
1
ответ
64
показа
Css grid. Как расположить элементы?
.what_is {
margin: 341px 40px 197px 40px;
text-align: center;
}
.t_what_is {
max-width: 1318px;
margin: 0 auto;
font-family: Roboto;
font-style: normal;
font-weight: bold;...
0
голосов
1
ответ
25
показов
Как исправить ошибку с выпадающем меню?
Всем привет, как исправить ошибку c перескакиванием выпадающего меню. Сама ошибка происходит на сайте https://y-skills.com
Ссылку на код прикладываю Codepen
Без js происходит тоже самое.
.submenu {
...
0
голосов
0
ответов
54
показа
css waterfall (masonry) layout only css
возникла необходимость создать сетку по типу "водопад", но самый первый элемент должен занимать две колонки (все остальные элементы 1 колонка) высота первого элемента(слайдера) известна и ...
1
голос
1
ответ
287
показов
Обращение к первому элементу строки display: grid;
Есть у меня такой HTML:
Сейчас там расположена 1 строка на 13 элементов, таких строк будет 6
<div class="site-size__grid-grif">
<div class="grid-grif__item">
...
0
голосов
1
ответ
28
показов
Гриды. Как сделать, чтобы картинки были на одном уровне между друг другом и даже при разных разрешениях экрана?
http://htmlpreview.github.io/?https://github.com/Roderen/ladesign/blob/main/index.html
Вот как нужно - https://imgur.com/a/JwtUtel
Вот как сейчас - https://imgur.com/a/if53Bio
Может подскажите что ...
0
голосов
2
ответа
1k
показов
Элемент выходит за пределы grid-контейнера
Блок .today-news__best-news-content выходит за пределы grid-контейнера. Как это исправить?
.today-news__best-news {
border: 1px dashed red;
height: 350px;
display: grid;
grid-template-...
0
голосов
0
ответов
33
показа
Создание адаптивного меню навигации в сетку 2×2
У меня есть навигационное меню которое надо сделать адаптивным
Само меню состоит из 4 кнопок, и мне нужно что бы они перестраивались в сетку 2 на 2
Так же присутствуют отступы
Слева и справа = 30%
...
1
голос
1
ответ
67
показов
Как гридами разместить дивы по углам родителя?
У меня есть 4 квадрата и я хочу разместить каждый из этих квадратов в каждый угол flex-контейнера. Решил сделать это через свойство justify-self и когда задаю для div.one параметр justify-self: start;,...
2
голоса
1
ответ
118
показов
Получаеться расположить div'ы по сетке, но не работает если поменять их на img CSS Grid
Как правильно будет сделать в случае, если нужно вставить изображения вместо цветного блока?
.blog__slider-content-images {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-...
3
голоса
3
ответа
122
показа
Как засунуть блок между двумя другими в зависимости от размера экрана используя Flexbox или Grid
Сделать такое мешает wrapper первого и второго елементов, который нужен для декстопа.
Единственное решение которое я смог придумать это js-ом делать unwraping на определенном расширении и тогда через ...
3
голоса
2
ответа
759
показов
В чем разница между 1fr и auto?
Имеется виду в CSS Grid и когда что использовать?
0
голосов
0
ответов
54
показа
Сетка на гридах в IE
Делаю сетку на гридах, во всех браузерах отрабатывает хорошо,но в IE все сплющено((
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[12];
grid-template-columns: repeat(12,1fr);...
0
голосов
1
ответ
2k
показов
Как растянуть grid блок на весь экран?
body {
display: grid;
grid-template-areas: "header header" "nav article ";
grid-template-columns: 200px 1fr;
margin: 0;
}
header,
footer,
article,
nav,
div {
padding: 20px;
background: ...