Articles of css grid

Ошибка safari в строке сетки CSS

Я создал шаблон сетки с строками 1fr 1fr 1fr. В средней строке есть список встроенных изображений. В Chrome и Firefox изображения соответствуют высоте строки сетки и соответствующим образом адаптируются. Тем не менее, в Safari 10.1.2 и Safari TP 31, похоже, комбинация изображений переполняет строку, а не масштабирует ширину изображения соответствующим образом. Возможно, я что-то делаю […]

прокрутка контейнера вверх, когда изменяется высота элемента пользователя

Я столкнулся с немного странным поведением. По крайней мере, это кажется странным для меня. Вы можете проверить это здесь: https://fiddle.jshell.net/mxmcd9Lw/8/show/ В основном, когда высота элемента изменяется, его родительский элемент автоматически прокручивается вверх (сначала вам нужно сначала прокрутить вниз). Похоже, что верхняя часть смещения потеряна из-за перерисовки, вызванной изменением высоты. структура основана на CSS Grid переполнение […]

Как центрировать элементы в последней строке в CSS Grid?

Я использую CSS-сетку для компоновки некоторых элементов, таких как … #container { display: grid; grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%; } .item { background: teal; color: white; padding: 20px; margin: 10px; } Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Как я могу заставить последнюю строку […]

Почему высота элемента Grid не вычисляется правильно?

У меня возникают проблемы с высотой элемента сетки CSS. Код, который я использую: .gridContainer { border: thin solid black; background: rgba(255, 0, 0, 0.5); display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; width: 100px; height: 100px; grid-template-areas: ‘windowContentHolder’; } .gridItem { grid-area: windowContentHolder; background: rgba(255, 255, 0, 0.5); width: 200%; height: 200%; overflow: auto; } .content { […]

Почему мой элемент сетки не охватывает несколько строк?

У меня есть html-шаблон, например: Включенный html выглядит так: {{cardData.label}} ….. {{cardData.value}} % Я хочу, чтобы первая карта охватывала две строки , например: Я использую CSS3 GridBox следующим образом : .my-grid-container { display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; padding: 10px; } .my-grid-container > div { text-align: center; padding: 20px 0; font-size: 30px; max-height: […]

CSS Grid auto-fit + minmax добавляет фантомную строку

Кажется, что в CSS-сетке для Chrome есть странная ошибка (это не происходит в Firefox). Это происходит при использовании повтора (auto-fit, minmax (300px, 1fr)) для стиля grid-template-columns. По какой-то причине, хотя есть только два дочерних div, родительский div считает, что есть еще один элемент и генерирует огромное количество пробелов и ненужных разрывов сетки. Любая идея, как […]

Как вы помещаете элементы в новую строку, тот же столбец с css-сеткой?

Мое содержимое перекрывается. Я понимаю, что это связано с тем, что я ставлю одно и то же col-start , но как мне получить, что div div контента будет расти, и спуститься по середине моей css-сетки? Должен ли я использовать flexbox с сеткой здесь? (пожалуйста, не загружайте) Вот как это выглядит сейчас: .mygrid { display: grid; […]

Центрирование элементов сетки в контейнере автозаполнения

Я создал сетку с двумя элементами. Эта grid может содержать любое количество элементов, но для этого примера достаточно двух. Задний план В этом примере два серых прямоугольника расположены слева. Используя инспектор на широком экране (выше 1000 пикселей), мы можем обнаружить третий (или более) «теневой» элемент, который заполняет остальную часть пространства. Вопрос Как я могу центрировать […]

Правильная реализация CSS Grid в Firefox и Chrome

Как было заключено здесь , CSS Grid реализует одинаковые элементы высоты между строками с помощью grid-auto-rows: 1fr . Тем не менее, Chrome и Firefox проявляют разные поведения при вставке строк с высотой, установленной в auto между равными строками высоты. То есть, Chrome достигает одинаковой высоты по строкам при использовании явных grid-auto-rows: auto 1fr 1fr 1fr […]

Отрегулируйте высоту сетки на ansible экран без полосы прокрутки

Какое свойство сетки следует использовать, чтобы сохранить сетку в пределах экрана? Использование height: 100vh; на .wrapper регулирует высоту, но вводит полосы прокрутки. Чтобы удалить нежелательные полосы прокрутки, я попробовал установить body{margin:0;} но я хочу иметь маржу, окружающую всю сетку, без создания полос прокрутки. Я уверен, что это простое решение, но, пожалуйста, помогите мне! Codepen: https://codepen.io/reiallenramos/pen/yzroxe […]