Описание тега css-grid
CSS Grid Layout is a W3C technology that allows for the creation of grids. It eliminates the need to use floats, tables, absolute positioning and even flexbox for building all sorts of grids, from simple to complex. Do not use this tag for CSS grid systems in general.
2
ответа
Переполнение содержимого ячейки сетки CSS не работает
Прямо сейчас мой нижний колонтитул не находится в порту просмотра, потому что высота содержимого в main выше, чем main. Я попробовал решение, предложенное здесь, но все еще не мог заставить основной прокручивать и заставить нижний колонтитул показат…
26 апр '18 в 17:35
2
ответа
Как сделать макет одной строки с вертикальным центром в сетке CSS?
Я пытаюсь сделать одну строку, вертикально центрированный макет, используя сетку CSS. Вот грубый набросок: Замечания: У меня есть один ряд предметов Элементы (вероятно) будут одинаковой ширины Я не знаю много вещей, которые у меня есть (поэтому я не…
11 июн '18 в 15:38
2
ответа
Попытка добавить текст в сетку CSS
Я пытаюсь создать шаблон сетки в стиле резюме. По сути, у меня есть сетка, которая имеет 2 столбца 1 фр и 3 фр. 1fr имеет заголовок раздела, а 3fr - весь контент. В разделах 3fr я описываю опыт работы и выложил его так, чтобы было 2 столбца со свойс…
05 июн '18 в 03:33
1
ответ
Почему эта CSS-сетка отображается в неверных размерах в пикселях?
Я только начинаю с CSS Grid, и он отображает правильные поля в нужных местах, но с неправильным размером пикселя???? Основной контейнер отображается примерно на 1500px вместо 1200px и все размеры строк тоже неверны. #container { width: 1200px; displ…
17 авг '17 в 02:18
1
ответ
Центрирование контейнера сетки
#panelb { background: lightblue; display: grid; grid-template-columns: repeat(auto-fit, 300px); } .card { background: gold; } .imgcard { display: block; width: 100%; margin: 0 auto; } <div id='panelb'> <div class='card'> <img class='…
11 дек '17 в 15:48
5
ответов
Последнее смещение полей / отступов в макете flexbox / grid
У меня есть список элементов, которые я пытаюсь расположить в прокручиваемом горизонтальном макете с помощью flexbox. Каждый элемент в контейнере имеет поле слева и справа, но правое поле последнего элемента свернуто. Есть ли способ остановить это и…
17 авг '16 в 09:45
2
ответа
CSS-сетка, событие JS-mouse onClick
В моем HTML у меня есть один родительский div и внутри него 25 div. <div class="container> <div class="faces"></div> <div class="faces"></div> <div class="faces"></div> . . . . . </div> Я использую CSS…
22 дек '17 в 22:49
8
ответов
Граница внутри сетки
У меня есть CSS-сетка, которая представляет игру в крестики-нолики. Я хотел поставить границу только внутри сетки. Сегодня я поступаю следующим образом: :root { --border: 2px dashed #393939; --symbol-color: #FF7F5B; } .grid { height: 100%; display: …
29 мар '18 в 11:18
3
ответа
Как получить разрыв сетки между элементом сетки и контейнером?
Как я могу получить левосторонний разрыв? Как вы можете видеть, Box1 сидит "липко" с левой стороны, которую я использовал grid-gap: 1em; но это относится только к верху снизу и справа? /*Defining the font and pixels so we can work with em later*/ bo…
29 сен '17 в 12:58
2
ответа
css grid with background - прокрутка, когда сетка больше фона
У меня есть таблица, которая может расти, когда она растет, она может выдвинуть высоту сетки больше, чем фон. Я хочу, чтобы сама сетка имела прокрутку поверх фона. Я пытался использовать переполнение, но не удалось. Вы можете увидеть проблему здесь …
30 апр '18 в 16:33
1
ответ
CSS Grid auto-fit + minmax добавляет фантомную строку
Кажется, есть странная ошибка в сетке CSS для Chrome (не происходит в Firefox). Это происходит при использовании repeat(auto-fit, minmax(300px, 1fr)) для стиля grid-template-columns. По какой-то причине, даже если есть только два дочерних элемента d…
20 ноя '17 в 19:07
1
ответ
Есть ли альтернативный метод CSS, который я могу использовать для обхода неполной поддержки Safari для flex-grow?
Я делаю виджет "аккордеон", который может содержать любое количество дочерних элементов. Когда дочерний элемент закрыт, он сжимается до высоты его заголовка. Когда он открыт, он распределяет свою высоту так же, как и другие открытые братья и сестры …
10 мар '18 в 21:51
1
ответ
Если я использую макет сетки CSS на своей веб-странице и использую fr, он будет выглядеть одинаково во всех браузерах?
Итак, сегодня я узнал о CSS-сетках, и у меня возник вопрос, на который я не смог найти ответ. На своем сайте, который я создаю, я использовал таблицы HTML, так как я еще не знал о сетках CSS. Теперь, когда я узнал о них, я вижу, что сетки являются б…
29 сен '18 в 16:13
3
ответа
В чем разница между автозаполнением и автоподгонкой?
Я работаю с сетками CSS, чтобы добиться макета сетки карт. Но я не совсем знаю, как настроить minmax() оператор для обработки сценариев использования, когда не хватает элементов для заполнения строки, но все же они должны выглядеть как карточки! Есл…
14 сен '17 в 19:04
2
ответа
Плавающие элементы в CSS Grid
В настоящее время я работаю над своей первой страницей, где я хочу использовать сетку CSS display: grid, Это работает очень хорошо, но я сталкиваюсь с небольшой проблемой с элементом, который я хочу float классически - текст плавает вокруг изображен…
10 фев '18 в 14:41
1
ответ
Оберните гибкие элементы в контейнер в направлении столбца
Итак, чтобы обернуть элементы в гибкий div, используя макет строки, все что мне нужно сделать, это: div { display: flex; flex-direction: row; /* I want to change this to column */ flex-wrap: wrap; /* wrap doesn't seem to work on column, only row */ …
07 май '17 в 16:55
1
ответ
Центр сетки дочернего элемента div без выравнивания текста
Я использую display:grid для моего контейнера Div. В этом контейнере у меня есть некоторые предметы, которые должны хранить их text-align:left но я хочу, чтобы их родители были в центре. #grid { display: grid; grid-template-columns: calc(50% - 50px)…
14 сен '18 в 20:09
0
ответов
Внутри сетки фоновое изображение зависит от содержимого
Это своего рода обман, чтобы объяснить, но я получил вложенную сетку, сетка внутри сетки выглядит так: .footer { grid-area: footer; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .bottomdiv { grid-column-start: 1; grid…
21 янв '18 в 09:17
1
ответ
CSS сетка, выпуск макета
У меня есть различные обертки сетки, как показано ниже, которые создают сетку CSS см. Также рисунки. Это работает нормально, однако у меня есть скрытый элемент "replyDev", который должен показывать элемент Div, когда я нажимаю кнопку ответа. Я хочу,…
17 фев '18 в 15:36
1
ответ
Сбой проверки Visual Studio CssLint Css Grid
Я использую новый макет Css Grid, но кажется, что версия CssLint, используемая в Visual Studio 2017, не поддерживает это. Я получаю ошибку проверки, показанную на скриншоте: Кто-нибудь знает, как его обновить, или мне просто нужно подождать?
09 окт '17 в 10:55