Вопросы по теме 'css-grid'
В чем разница между align-items и align-content в Grid Layout?
Я прочитал Полное руководство по сетке , но все еще не понимаю с различиями между двумя наборами свойств контейнера, а именно « justify/align-items » и « justify/align-content ».
Мое замешательство связано с утверждением автора о том, что набор "...
3245 просмотров
schedule
03.11.2023
автоматическое распределение строк в CSS-сетке
Есть ли способ получить автоматическое объединение строк (элемент занимает автоматическое количество вертикальных ячеек сетки)?
В моем примере я бы хотел, чтобы ячейка 8 автоматически занимала 2 (или более) ячейки, без необходимости явно указывать...
3149 просмотров
schedule
06.04.2024
Проблемы с созданием сетки flexbox
Я пытаюсь создать себе flexbox со следующим дизайном:
Мой html выглядит так (и я бы не хотел это менять):
<div class="wrapper">
<div class="page-header">Heading</div>
<h3 class="right_1">right_1</h3>...
665 просмотров
schedule
03.11.2022
Удалить псевдоэлемент, если есть только один дочерний элемент
Я использую невидимый псевдоэлемент ( ::after ), который занимает последний слот в контейнере. Но если есть только один элемент, я бы хотел расположить его в центре.
Поэтому для этого мне нужно «удалить» псевдоэлемент в этом случае.
Как мне это...
950 просмотров
schedule
07.06.2024
Отрегулируйте высоту сетки до доступного экрана без полосы прокрутки
Какое свойство сетки следует использовать, чтобы сетка оставалась идеально внутри экрана?
Использование height: 100vh; на .wrapper регулирует высоту, но вводит полосы прокрутки. Чтобы удалить ненужные полосы прокрутки, я попытался установить...
2311 просмотров
schedule
14.10.2022
Изменение высоты div с помощью сетки CSS
Я студент, пытающийся понять сетки CSS. Как изменить размер определенного столбца или строки div, не изменяя их все, и вставить в сетку такие элементы, как изображения и т. д.?
Я пробовал это здесь: https://codepen.io/lukeheald/pen/bYQNgj...
211 просмотров
schedule
09.02.2024
Строки не заполняют высоту
Я немного поэкспериментировал с CSS Grid и попытался разработать простую веб-страницу. Я использую модуль fr , чтобы равномерно отображать мой контент и делать его отзывчивым. Столбцы создаются равномерно, чтобы заполнить пространство экрана. Но...
147 просмотров
schedule
26.11.2023
Ошибка переполнения пустого пространства?
Это кажется довольно распространенным и не причудливым вариантом использования, но я не сталкивался с ним раньше. Я установил ручку, но не могу воспроизвести ее там, и я рву на себе волосы, пытаясь понять, почему.
Демонстрационная ручка...
892 просмотров
schedule
08.10.2022
Поле ввода становится маленьким при наборе текста только в Chrome на Mac (возможно, проблема с CSS-Grid)
Я создал веб-сайт, на котором у меня есть поля ввода, которые становятся очень маленькими, когда я начинаю что-то печатать. Но такое поведение проявляется только в Chrome на Mac (текущая версия 63). Тот же веб-сайт в Safari или Chrome в Windows...
167 просмотров
schedule
22.09.2022
Можно ли установить пропорциональные столбцы сетки на основе содержимого?
Используя Flexbox или CSS Grid, можно ли изменить размер моих столбцов на основе содержимого одного из столбцов?
Вот что я хочу:
У меня есть 2 столбца: основной и боковой .
|------------------------container--------------------------|
|...
155 просмотров
schedule
02.04.2024
Как интерпретируется grid-template-rows: auto auto 1fr auto?
Недавно я создал макет, используя сетку CSS . Хотя это работает хорошо, меня смущает, как это работает. В частности, меня смущает строка grid-template-rows: auto auto 1fr auto; .
В итоге произошло то, что размер верхнего и нижнего колонтитула...
5656 просмотров
schedule
02.10.2022
React - глючные проблемы с моим простым компонентом переключателя, размещенным в сетке css
Я создаю свое первое приложение для реагирования, и важным компонентом для моего приложения является эстетический набор переключателей, которые будут использоваться на большинстве страниц моих приложений, значения которых используются для фильтрации...
196 просмотров
schedule
08.04.2024
Выбор начального столбца и строки для серии элементов сетки
Если у меня это ниже, все данные будут перекрываться потому что я сказал ему перейти к тому же столбцу и строке. Как я могу заставить его начинаться со столбца и строки, которые я хочу, и «расти»?
Если я удалю строку, она пойдет вниз по...
128 просмотров
schedule
03.05.2024
Различный результат сетки css в Chrome и MS Edge
Я новичок в веб-разработке, поэтому я не совсем уверен, что здесь не так. Я использую загрузочную сетку. Вот css:
body {
background: #252525;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
height:...
559 просмотров
schedule
17.02.2024
Высота строки сетки CSS
У меня есть сетка, которая заполняется API в цикле. У меня есть 4 строки по 5 элементов. Мне удалось правильно настроить ширину столбцов, но я борюсь с настройкой высоты отдельных столбцов.
Я хотел бы, чтобы 3-й элемент каждой строки занимал 2...
234 просмотров
schedule
05.03.2024
Элементы сетки не выравниваются
Я пытаюсь выровнять элемент <p> по левому краю, а изображение по правому. Изображение не будет выравниваться по четвертому столбцу, и мне нужно это исправить.
.content{
display: grid;
grid-template-columns: 25% 25% 25% 25%;...
87 просмотров
schedule
06.06.2024
css сетка медиа-запрос
Во-первых, это не мой код, следуя инструкциям, но у меня возникла проблема с медиа-запросом. Использование браузера Chrome
Большой экран css, который отлично работает
/* Navigation */
.main-nav ul {
display: grid;
grid-gap: 20px;...
139 просмотров
schedule
17.12.2023
Элементы сетки CSS переполняют контейнер сетки при использовании align-content: space-between и липкого заголовка
У меня есть базовый макет, в котором моя сетка CSS расположена внутри гибкого макета, так что сетка занимает все доступное пространство, оставшееся за пределами нижнего колонтитула.
Заголовок позиционируется как position: sticky; .
Элементы в...
413 просмотров
schedule
28.12.2023
Проблема с позиционированием элемента поля внутри сетки CSS
Я изучаю HTML и CSS, и сейчас я изучаю CSS Grid.
Я думаю, что понимаю, как работает CSS Grid, и я пытался написать веб-сайт с элементом поля, расположенным в определенном месте внутри сетки.
Я сделал снимок экрана и нарисовал квадрат там, где я...
562 просмотров
schedule
18.11.2023
Изменение столбцов в шаблоне сетки приводит к нарушению макета
При определении grid-template-columns в соответствующем родительском div это нормально.
wrapper {
display:grid;
grid-template-columns: 1fr 1fr 700px;
}
Но что, если мне нужны только две колонки?
Если я удалю один из fr столбцов,...
583 просмотров
schedule
20.11.2022
