Публикации по теме 'css-grid'
Какой ваш любимый язык кодирования? У вас их больше одного?
Если вы используете любимый язык программирования, у вас его нет? Или, с другой стороны, у вас их больше одного? Вы можете ответить на этот пост. Или, с другой стороны, вы можете присоединиться к этой программе Coderons , которая является творческим стремлением ценить и продвигать технологии, созданные инженерами. Здесь инженеры могут распространять свои статьи и получать больше уникальных перспектив и, следовательно, получать за это компенсацию.
Полное руководство по CSS Grid
В течение последних двух месяцев я более глубоко изучал CSS Grid. В этом уроке я хочу поделиться основными выводами. Чтобы упростить задачу, я объяснил их с помощью наглядных диаграмм.
Вот список моих лучших руководств по веб-разработке.
Полное руководство по CSS-гибкости на Hashnode.
Ultimate CSS grid tutorial на Hashnode.
Функции высшего порядка .map, .filter и .reduce на Hashnode.
Вы можете подписаться на меня в Twitter , чтобы получать обучающие материалы,..
Вопросы по теме 'css-grid'
Flex-элементы по центру и выравниванию по нижнему краю
У меня есть гибкий контейнер (синий квадрат) со следующими свойствами:
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
Поэтому его дочерние элементы (светло-голубые квадраты) располагаются так, как вы видите...
28349 просмотров
schedule
26.06.2023
Большой первый элемент с макетом flexbox?
У меня есть макет, состоящий из одного упорядоченного списка , содержащего кучу элементов.
Все элементы имеют одинаковую ширину и высоту, кроме первого элемента, который в 3 раза шире и в 2 раза выше. Это выглядит так:
ol {...
2497 просмотров
schedule
14.05.2023
Использование значения автозаполнения в функции repeat() не работает в Firefox?
Я пытаюсь изучить макет css-grid. Я включил флаги сетки для Chrome, FireFox и FireFox Developer. Я также загружал FireFox каждую ночь (на сегодняшний день 52.0a1 (2016-11-07) (64-разрядная версия)). Я на Mac.
Мой план состоял в том, что я хотел...
2037 просмотров
schedule
01.05.2024
Процентное заполнение / поле для элемента сетки игнорируется в Firefox
Этот codepen создает сетку из красных ячеек 100*50 пикселей в Chrome. Это ожидаемое поведение.
#grid{
display: grid;
grid-gap: 8px;
grid-template-columns: 100px 100px;
}
.cell{
background-color: red;...
2445 просмотров
schedule
20.06.2023
Плавное масштабирование элементов в макете CSS Grid
Я создал макет ниже, используя display: grid , я использовал старый трюк padding-top , чтобы иметь плавные квадратные элементы div, но мне интересно, есть ли лучший способ сделать это с помощью CSS Grid или Flexbox. Макет должен выглядеть как есть,...
5763 просмотров
schedule
25.07.2023
Запретить содержимое расширять элементы сетки
TL; DR: Есть ли что-нибудь вроде table-layout: fixed для CSS-сеток?
Я попытался создать годовой календарь с большой сеткой 4x3 для месяцев и вложенными сетками 7x6 для дней.
Календарь должен заполнить страницу, поэтому каждый контейнер...
143359 просмотров
schedule
22.04.2022
Сворачивание границ с помощью CSS Grid
Я с удовольствием разбираюсь в новой спецификации CSS Grid, но у меня возникают проблемы с границами.
Можно ли свернуть границы в сетке CSS или как-то изменить стиль поля?
Как вы можете видеть во фрагменте ниже, 10px границ стека (всего 20px...
18508 просмотров
schedule
11.04.2022
Центрирование столбцов в CSS Grid
Я пытаюсь создать простую сетку CSS, используя собственные свойства CSS Grid. Он работает так, как я хотел, за исключением того, что я хочу создать служебный класс, который может центрировать столбец в сетке.
Есть ли способ создать служебный класс...
9767 просмотров
schedule
17.07.2023
CSS Grid Layout — сворачивание содержимого в Microsoft Edge
Я пытаюсь оформить список определений с помощью нового CSS Grid Layout , используя @support, чтобы обойти старые браузеры. Autoprefixer изменяет его на более старую версию для Edge .
dl {
display: grid;
grid-gap: 0.5rem 0.75rem;...
916 просмотров
schedule
19.10.2022
CSS Grid Layout на iOS, Android - проблема с сетками-шаблонами-зонами
См. Упрощенный код ниже. Код отлично работает на рабочем столе Windows с хромом (верхний и нижний колонтитулы показывают сторону моей стороны в полноэкранном режиме, а на уменьшенном экране ниже 480 пикселей верхний колонтитул отображается под нижним...
2492 просмотров
schedule
19.06.2022
Вертикальные столбцы CSS Grid с бесконечными строками
У меня есть список элементов неизвестной длины (из CMS). Я хочу отображать их в 2 вертикальных столбцах, читая вниз. например
1 4
2 5
3 6
etc...
Я пытаюсь добиться этого с помощью сетки CSS, однако это не представляется возможным, если вы...
20087 просмотров
schedule
08.08.2022
CSS Grid Layout с полной высотой в IE
Я начал использовать CSS Grid Layout великой Рэйчел Эндрюс, и я не могу понять, как я могу растянуть обертку. Я использую ее первый пример из книги Get Ready for CSS Grid Layout с небольшой модификацией — полная высота .
Он отлично работает в...
2162 просмотров
schedule
07.11.2022
CSS Grid row max height 1fr, scroll content
У меня есть макет календаря с использованием следующих стилей CSS-сетки:
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1.5em 1.5em repeat(6, 1fr);
width: 100%;
height: 100%;
}
(Codepen...
11007 просмотров
schedule
01.03.2023
Неправильная разметка областей сетки в CSS Grid
Я хочу создать свой веб-сайт с использованием системы сетки CSS, но, похоже, она не работает. Вот мой код:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq"...
2814 просмотров
schedule
09.08.2023
Центрирование содержимого CSS Grid
* {
margin: 0;
padding: 0;
}
.container {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template
}
header {
height: 100%;
width: 100%;
background-color:...
80 просмотров
schedule
06.12.2022
Элементы не переносятся в CSS Grid
Всем привет ,
Довольно новичок в веб-разработке, я пытаюсь научиться использовать красивый инструмент сетки css, но на самом деле я застрял с этим:
Я хочу, чтобы мои карты автоматически перемещались одна за другой в следующей строке (с тем же...
5332 просмотров
schedule
11.07.2022
Как убрать пробелы в flexbox?
Я создал вкладку во flexbox с :target , которая показывает .details div при нажатии. К сожалению, элемент div .details очень высокий и имеет огромный пробел внизу абзаца. Есть ли решение в CSS для устранения этого пробела?
Демонстрация:...
128 просмотров
schedule
13.04.2023
Как заставить изображения оставаться в строках контейнера сетки css?
В приведенном ниже коде показано предполагаемое поведение при изменении размера окна в Chrome 60 и Firefox 55 (но не в iOS Safari 10.3; это, скорее всего, еще один вопрос, почему он работает неправильно в Safari).
html, body {
width:...
10531 просмотров
schedule
02.11.2022
Как использовать адаптивные изображения с помощью CSS Grid Layout
Я работаю с новым макетом CSS Grid, и одна вещь, о которой я не могу найти много информации, это как сделать изображения отзывчивыми ?? Я пробовал использовать медиа-запросы и устанавливать ширину изображения на 100%, но изображение все равно выходит...
1006 просмотров
schedule
20.06.2023
Ошибка проверки сетки Visual Studio CssLint Css
Я использую новый макет Css Grid, но кажется, что версия CssLint, используемая Visual Studio 2017, не поддерживает это. Я получаю ошибку проверки, показанную на скриншоте:
Кто-нибудь знает, как его обновить, или нужно просто подождать?
413 просмотров
schedule
13.04.2023
