Публикации по теме 'css-grid'


Как скрыть текст в CSS?
Есть несколько способов скрыть текст в CSS. Вот некоторые из наиболее распространенных методов: Использование свойства display: none . Это наиболее распространенный способ скрыть текст. Свойство display: none сообщает браузеру не отображать элемент. CSS p { display: none; } Использование свойства visibility: hidden . Это свойство похоже на , но оно по-прежнему занимает место в документе. Это может быть полезно, если вы хотите скрыть текст, но при этом хотите,..

CSS GRID - в React
Мощный инструмент для создания двухмерной сеточной системы с использованием строк и столбцов. Недавно я начал работать над проектом, для которого требуется CSS Grid. Поначалу чтение документации было пугающим, но вскоре я понял, что добавить CSS Grid в свое приложение можно всего за несколько простых шагов. Сначала добавьте следующий код в свое приложение React: Проверьте это! Вы только что создали CSS-сетку! Чтобы высушить ваш код, вы также можете передать свойства..

Вопросы по теме 'css-grid'

Обертывание гибких элементов в контейнере в направлении столбца
Итак, чтобы обернуть элементы в гибкий div с использованием макета строки, все, что мне нужно сделать, это следующее: div { display: flex; flex-direction: row; /* I want to change this to column */ flex-wrap: wrap; /* wrap...
3620 просмотров
schedule 12.09.2021

Динамически гарантировать, что все элементы flexbox имеют одинаковую минимальную ширину, без использования flex-direction: column?
Обратите внимание: здесь , однако в чистом ответе css для контейнера используется flex-direction: column . Кажется, ответ на исходный вопрос заключается в том, что flexbox не поддерживает это, однако мне также интересно, возможно ли это с помощью...
45 просмотров
schedule 24.11.2021

Разрыв столбца сетки вызывает переполнение элемента сетки
Я пытаюсь создать сетку из 12 столбцов, как в Bootstrap, но с CSS3 Grid. Но у меня огромная проблема: если у меня элемент с 8 столбцами , а зазор составляет 40 пикселей , то минимальная ширина равна 40 * 8 = 320px , иначе он будет переполняться....
594 просмотров
schedule 01.10.2021

Как иметь одинаковую высоту для элементов в CSS Grid
Я использую макет CSS-Grid и задаюсь вопросом, как установить одинаковую высоту для panel-heading элементов? В частности, как и в строке ниже, я хотел бы, чтобы все разделы названий стран имели одинаковую высоту, тогда как раздел TotalContacts...
47 просмотров
schedule 19.10.2021

CSS сетка изображений адаптивна
Я пытаюсь сделать небольшую сетку изображений. На настольных компьютерах мне нужно 3 изображения на столбец, а на мобильных устройствах - 2 изображения на столбец. У меня нет проблем с этим. Проблемы начинаются, когда я уменьшаю размер страницы до...
876 просмотров
schedule 30.11.2021

Расширить фон столбца до желобов сетки
Учти это… Вы создаете трехколоночный макет, используя систему сеток. Ваш контейнер фиксированного размера и центрирован с использованием margin: 0 auto. В соответствии с вашими требованиями к дизайну первый столбец должен иметь цвет фона,...
398 просмотров
schedule 24.10.2021

Как сделать 30 столбцов с автоматической шириной с помощью CSS-сетки?
Я никогда раньше не использовал CSS Grid , поэтому, пожалуйста, извините мне, если это простой вопрос. Мне нужно создать сетку шириной 30 столбцов - автоматическую ширину, которая настраивается с помощью окна браузера или родительского div. Я...
186 просмотров
schedule 19.11.2021

Необъяснимая высота строки сетки в IE и Edge
Я отредактировал пример CodePen, чтобы добавить некоторый контент в центральный div с высотой во всех контейнерах div, и он явно не работает, см. Здесь: https://codepen.io/anon/pen/OEBxNr Эти строки, кажется, вызывают указанный ниже пробел:...
1884 просмотров
schedule 12.10.2021

Имеет границу снизу после строки сетки css3
У меня есть контейнер сетки, css которого .optionsInnerContainer { display: grid; // grid-template-columns: 1fr 1fr 1fr; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* see notes below */ //...
61 просмотров
schedule 10.11.2021

Почему css grid-template-area не соблюдает мой медиа-запрос?
Вот код. Думаю, это глупая ошибка, но я не вижу ее -grr. Я много раз пробовал. Области шаблона сетки медиа-запроса в моем коде: ". title title ." ". img-1-title img-2-title ." ". img-1 img-2 ." ". img-3-title img-4-title ." ". img-3 img-4 ."...
688 просмотров
schedule 18.11.2021

Использование CSS Grid с позицией / преобразованием
Я пытаюсь объединить сетку CSS с позицией, чтобы моя страница эффективно настраивалась под разные размеры экрана. Я думаю, что нужно создать одну сетку для мобильных устройств и одну для настольных компьютеров с использованием @media(screen-width) ....
303 просмотров
schedule 27.10.2021

Как я могу заставить эту CSS-сетку переноситься на новую строку без указания минимальных размеров?
Я пришел из тяжелого фона div / float для создания отзывчивых сайтов (например, Bootstrap 3, Foundation) и кратко использовал Flex Box, но пытался использовать Grid повсюду, поскольку он действительно отлично справлялся с рядом проблем. Кажется, я...
9758 просмотров
schedule 11.11.2021

Наложение текста заголовка при переносе
Пытаюсь создать свой первый веб-сайт с сеткой, и все идет хорошо, но по какой-то причине текст заголовка переполнен в меньшем браузере. Я пробовал играть с отступами / полями разных элементов. попытался добавить высоту линии, удалить свойства...
133 просмотров
schedule 29.10.2021

Смешивание фиксированной длины и repeat () в CSS Grid
Я пытаюсь сделать календарь в виде сетки. У каждого дня недели будет заголовок. Моя цель - установить высоту заголовка (то есть первой строки в сетке) на 30 пикселей, а остальные строки разделить оставшееся доступное пространство. Мой календарь...
2166 просмотров
schedule 01.12.2021

CSS Grid не будет обертывать дочерние элементы при установке grid-row
CODEPEN Фон: Я экспериментирую с Grid CSS и пытаюсь получить этот макет, который в настоящее время реализован для масштабирования. Ожидаемый макет Проблема: на рабочем столе заголовок элемента должен иметь ширину 8 столбцов, и...
775 просмотров
schedule 12.10.2021

CSS Grid: grid-row / column-start / end VS grid-area + grid-template-area.
Я прочитал руководство по CSS Grid в CSS Tricks, но один важный аспект меня немного смутил. Кажется, есть два способа решить, сколько ячеек охватывает элемент сетки: grid-template-area с использованием имен, присвоенных элементам сетки со...
787 просмотров
schedule 11.10.2021

CSS-сетка | Как автоматически подобрать столбцы разного размера?
Я пытаюсь использовать CSS-сетку (впервые), у меня возникают основные проблемы. Я создаю нижний колонтитул из трех компонентов. #footer-content { position: relative; margin: 0 auto; padding: 0 20px; max-width: $max-width;...
1773 просмотров
schedule 25.11.2021

Почему шаблон дорожек сетки-шаблона-строк не повторяется, как столбцы-шаблон-сетки
Вот простая сетка (всего двадцать .grid_item s): <div class="grid"> <h1 class="grid_item">300 px row, 1fr column</h1> <h1 class="grid_item">300 px row, 1fr column</h1> <h1 class="grid_item">300 px...
262 просмотров
schedule 27.10.2021

Стек элементы сетки css
Я получил макет, основанный на сетках. Два меню слева и справа и область для содержимого посередине. В области содержимого я получил сетку 4х4. Пример макета с сеткой 4x4: https://codepen.io/mannberg/pen/qemayy html / мопс...
444 просмотров
schedule 06.11.2021

Сетка CSS и семантический HTML
Я изучаю сетку CSS и, пытаясь создать свой макет и использовать семантический html, в то же время сталкиваюсь с некоторыми проблемами https://codepen.io/oscarryz/pen/oNNBKyd Итак, в основном я делаю сетку 3x3 с пустым пространством слева и...
1466 просмотров
schedule 26.09.2021