Вопросы с меткой [grid]
Grid - общее название контейнеров, использующихся для компоновки элементов интерфейса в виде таблицы. Если существует более конкретная метка, следует использовать ее ([css-grid], [wpf-grid] и т.п.)
228
вопросов
0
голосов
1
ответ
24
показа
Динамические строки для grid-template-areas
У меня есть сетка с grid-template-areas, и я хочу, чтобы элементы с классом item-left отображались слева в одной колонке, а элементы с классом item-right - справа, как на скриншоте:
Важный момент: ...
0
голосов
0
ответов
10
показов
как сделать так, чтобы виджет всегда добавлялся в начало первой строки на GridStack.js
виджет всегда добавляется в конце, после последнего виджета
Допустим, у нас есть 10 виджетов, мы добавляем еще один, и он должен появиться вверху, перед самым первым добавленным
как сделать, чтобы ...
0
голосов
1
ответ
28
показов
Справа на странице сайте появилась вертикальная полоса
"Исследуя элемент", заметила в во 2-ом стоит margin-right, кот-й не получается убрать. вылезает за сетку. Как это исправить?
@import url('https://fonts.googleapis.com/css?family=...
0
голосов
0
ответов
27
показов
Как правильно написать navbar?
я всегда делал navbar через display: flex, но хочу попробовать через grid. как написать правильно?
0
голосов
3
ответа
70
показов
Как сверстать сетку с «выпавшими», пустыми элементами?
Коллеги, прошу вас помочь мне с идеей как сверстать сетку, у которой есть пустые ячейки без контента.
САБЖ:
Вот макет секции. Секция будет заполняться из админ панели. Т.е. все ячейки по порядку. Т.е. ...
0
голосов
1
ответ
41
показ
Помочь создать адаптивную сетку с использованием Grid
Всем привет! Столкнулся с нестандартным дизайном и расположением блоков, но не знаю, как правильно это делать. Пытался решить это с помощью grid-area, но получилось не очень. Буду благодарен всем, кто ...
0
голосов
0
ответов
27
показов
CSS Grid Layout Resize React
Не понимаю, как можно добиться такого поведения колонки, чтобы она заполняла все возможное место, забирая место пустой колонки. При этом чтобы была полная адаптивность, при изменение размеров
Я ...
0
голосов
0
ответов
7
показов
Множественный выбор в SlickGrid без зажатия клавиш-модификаторов
Есть необходимость реализовать множественный выбор в SlickGrid без использования Ctrl и Shift. На англоязычном SO советуют использовать собственную реализацию RowSelectionModel, но почему-то не ...
0
голосов
3
ответа
28
показов
Как создать сетку, где в первом ряду одно количество колонок, а в остальных — другое?
Условие - можно использовать только CSS (Использовать JavaScript и ломать верстку нельзя)
Нужно сделать:
Первый ряд - 2 колонки
Остальные ряды - 3 колонки
<div class="row">
<...
0
голосов
2
ответа
30
показов
Как размещать новосозданные <div> над другими
Я создаю карточную игру. Вот пример карт в руке противника:
<div class="enHend" id="enHand">
<div class="card" id="card62" onclick="putEnCard(62)&...
0
голосов
0
ответов
21
показ
Как за счёт grid зафиксировать header и footer и другие какие-нибудь элементы
Сделал такую верстку, но не сдвигается header, и не показывается footer.
body {
font-family: sans-serif;
margin: 0;
--main-spacing: 15px 5px 10px 5px;
--header-footer-spacing: 10px 5px;
}
....
1
голос
1
ответ
25
показов
Как сделать разметку grid для данной галереи?
Друзья, подскажите какие значения прописать для grid-template-columns и grid-template-rows чтоб удобно было располагать элементы.
-1
голос
1
ответ
33
показа
Как располагать элементы в одной ячейке grid?
Нужно чтобы три картинки по середине располагались друг за другом. Как это реализовать?
0
голосов
0
ответов
31
показ
Можно ли достать актуальные строки (все) из Grid в ASP NET MVC?
Ситуация следующая. Есть (Devexpress)грид (readonly), который я вызываю с пустой моделью (или моделью с несколькими элементами), которые я беру из базы. Далее я хочу добавить элемент - ввожу его в ...
0
голосов
0
ответов
43
показа
Как сделать чтоб изображения в grid сетке уменьшались в размерах при сужении?
Нужно чтоб вот эти элементы галереи уменьшались в размерах пропорционально. Какие свойства можно добавить в код?
HTML
<section class="gallery">
<div class="container&...
0
голосов
0
ответов
81
показ
React Grid Layout - переопределение статичных полей
Я использую React Grid Layout, чтобы перетаскивать элементы. Пример такого элемента:
<div
key={"id" + Math.random().toString(16).slice(2)}
data-grid={{ x: 4, y: 0, w: 2, h: 2 }} ...
0
голосов
1
ответ
145
показов
Выравнивание текста по центру внутри ячейки. Метод GRID
Подскажите как выровнять по центру текст в ячейке с использованием метода Grid. Дело в том что текст в основном окне динамический: может быть и 5 букв, а может и 100 и текст прыгает внутри ячейки.
def ...
0
голосов
1
ответ
58
показов
Почему не получается прижать грид элемент полностью к верху?
Есть вот такой блок нужно чтоб кнопки переключение слайдов прижимались к верху прописываю им align-self: start; они все ровно не становятся в самый верх когда вместо start ставлю end все роботает как ...
0
голосов
1
ответ
48
показов
Заполнение пространства в grid-сетке
Вот что дано на макете:
А вот что получилось у меня (пришлось уменьшить размер страницы чтобы всё поместилось в скрин):
А вот код:
.portfolio__items{
display: grid;
grid-template-columns: ...
0
голосов
0
ответов
37
показов
Как сделать сетку grid
Как сделать такую сетку грид как на фото(мобильная версия)? Пк версию я смог сделать сам
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta ...
0
голосов
0
ответов
41
показ
Неверно рассчитывается ширина столбцов Grid в WPF
При запуске окна с установленным SizeToContent="WidthAndHeight" столбцы должны занимать ровно по половине ширины окна, но на самом деле получается так, что первый столбец занимает больше ...
1
голос
1
ответ
214
показов
масштабирование изображения внутри grid сетки css
При верстке сайта возникла проблема с реализацией сетки контента (выделил красным эту область)
С позиционирование ячеек проблем не возникло, сделал все используя сетку grid (мне показалось это самым ...
-1
голос
2
ответа
72
показа
Помогите пожалуйста сверстать Grid/Flex сетку
Как я могу сделать такую грид сетку или через flex?
1
голос
1
ответ
72
показа
Расположение таблицы grid на всю область фрэйма вкладки tab
Не понимаю, почему при позиционировании виджетов с помощью Grid фрейм вкладок не покрывает всю область приложения. Нужно по высоте увеличить таблицу до нижней границы так, чтобы фрэйм покрывал всю ...
0
голосов
2
ответа
27
показов
Как центрировать flex-контейнер
Хотелось как в гриде. Чтобы сам флех-контейнер было по центру или например если justify-content:space-between был равномерный отступ между блоками, но на следующем ряде все начались вначале как flex-...
0
голосов
1
ответ
40
показов
Как сделать такое на grid или flex
Как отступать слева по максимальной ширине текста? Как это сделать без минимальной ширины текста
-1
голос
1
ответ
115
показов
Как наложить один грид-элемент на другой пользуясь именованными областями?
Способом ниже - понятно, от одного числа до другого и z-index.
.setka {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
color: white;
}
.blue {...
0
голосов
0
ответов
30
показов
как сделать картинки посередине в @media ? Помогите пожалуйста
Как сделать картинки посередине в @media (max-width: 600px) ? Помогите пожалуйста
* {
margin: 0;
padding: 0;
}
.ss {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-...
0
голосов
1
ответ
65
показов
Помогите пожалуйста,нужно разместить картинку посередине
Нужно как то сделать картинку по середине,text-align не помогает
Вот css код,если нужен HTML,напишите
* {
margin: 0;
padding: 0;
}
.ss {
display: grid;
grid-template-columns: repeat(3, ...
0
голосов
1
ответ
86
показов
Не отображается Label в окне в Python (tkinter)
Возникла проблема с динамическим отображением метки Label в окне библиотеки tkinter в Python.
За отображение и уничтожение метки отвечают методы: create_waiting и destroy_waiting.
Код:
import tkinter ...
0
голосов
0
ответов
32
показа
Автоматически переносить элементы в grid, в зависимости от ширины элемента
Есть возможность автоматически переносить элементы в гриде, в зависимости от ширины элемента (grid-wrap или что-то подобное)?
Все, что удалось найти это - grid-template-columns: repeat(auto-fill, ...
0
голосов
1
ответ
36
показов
Как правильно споцизионировать элементы grid?
Данные картинки не могу правильно расположить на странице, помогите пожалуйста.
.container {
margin: 0 auto;
max-width: 1200px;
}
.grid__list {
display: grid;
grid-template-columns: repeat(...
0
голосов
0
ответов
27
показов
Почему grid контейнер не умещается в основной контейнер с контентом?
Как сделать чтобы контент не вылазил за пределы основного (мобильного) контейнера, вот такого:
.container{
max-width: 306px;
overflow-x: hidden;
}
grid контейнер сделан ...
0
голосов
1
ответ
136
показов
Аналог flex-grow:1; для блока без высоты [дубликат]
Есть простой пример: https://codesandbox.io/s/color-c4wos0?file=/src/styles.css
В данном примере с flex-grow:1; Блок занимает все свободное для него пространство, то есть от Header до Footer. При ...
-1
голос
1
ответ
145
показов
Как убрать пустое пространство под блоком на grid сетке?
Есть сетка из 2х колонок разной высоты и если высота сильно разнится, то у какой то из колонок под ней появляется пустое пространство. Как сделать так, чтобы пустота пропала и вместо нее под колонкой ...
0
голосов
1
ответ
22
показа
Расположить блоки (grid)
main {
display: grid;
grid-template-rows: min-content min-content;
position: fixed;
height: 100vh;
width: 100vw;
background: #fff;
}
.box1 {
grid-area: 1 / 1;
}
.box2 {
grid-area: 2 /1;
...
0
голосов
2
ответа
197
показов
Картинки выезжают из грид сетки, как решить?
У меня проблема с гридом .intro-section. Когда у него маленькая высота и большая ширина, то картинки выезжают за элемент и отодвигают нижний блок.
Вот так оно выглядит нормально. Стоит растянуть ...
0
голосов
1
ответ
304
показа
Как запретить изображению в grid-элементе растягивать высоту?
Всем привет. Высота body 100 vh, поделил сетку, все вроде по канонам, но изображение справа получается больше (если так), появляется горизонтальная полоса прокрутки и изображение растягивается по ...
0
голосов
0
ответов
52
показа
Помогите разобраться, почему иконки накладываются друг на друга
Иконки в данном шаблоне накладываются друг на друга, и как это исправить, ума не приложу... По идее они должны размещаться в блоке равномерно, относительно его размеров. В другом шаблоне моем этот ...
0
голосов
0
ответов
41
показ
Как игнорировать ошибки компиляции свойств grid из scss в css?
В VS Code использую SCSS в работе.
Проблема в том, что при компиляции в css, возникают ошибки во всех свойствах гридов.
Работает все адекватно, в валидаторе тоже все норм. То есть ругается именно vs ...
0
голосов
1
ответ
32
показа
Как сверстать подобную разметку?
Как сверстать подобную разметку? Если использую флексы, то по высоте между элементами появляется расстояние, нужно, чтобы они стояли к друг другу вплотную, как на фото
.news {
background: #...
0
голосов
1
ответ
199
показов
CSS | Grid Перенос блоков при переполнении
Есть простенький макет, при увеличении страницы блоки уходят за края экрана и появляется скролл-бар, мне нужно что-бы они сдвигались в низ и были видны всегда без скролла.
Как это сделать?
.full-...
-1
голос
1
ответ
53
показа
Как на Flex сделать две колонки с одинаковым количеством блоков и их размерами в каждой, если текст в этих блоках может быть разный
Подскажите пожалуйста, как на Flex сделать две колонки, чтобы соседние по горизонтали блоки в ней были одинакового размера, независимо от длины текста в них.
Сейчас получается так, что они могут быть ...
0
голосов
1
ответ
49
показов
CSS | Как задать в какой фракции будет находиться элементы контейнера grid
Как сделать так что-бы block1 и block2 оказались во второй фракции, то есть в центральной? А block2 был справа снизу блока1?
<div class="main-top-container">
<div class=&...
-1
голос
1
ответ
34
показа
Изменить последовательность в Grid view
С сервера приходит список айтемов:
<ul class="list">
<li class="item">Select All</li>
<li class="item">Civil Id</li>
<li class=&...
0
голосов
0
ответов
14
показов
Tkinter Python. Как можно получить информацию о положении виджета (Button) в grid или номер в массиве, по его состоянию? [дубликат]
Как можно получить информацию о положении виджета (button) в grid по его состоянию или его позицию в массиве, подскажите пожалуйста. Если это возможно, но есть способ проще, расскажите о нем.
Это ...
0
голосов
0
ответов
24
показа
как сделать сетку с гибкими столбцами
как реализовать такую сетку и при том что блоки будут генерировать и размер их зависит от содержимого и не обязательно они будут в таком виде. Пробывал реализовать через flex column wrap, но там нужно ...
0
голосов
1
ответ
27
показов
Выкладка списка в два столбца
Здравствуйте имеется вот такое меню, которое выкладывается сверху вниз. Сверстать с помощью Flex его не сложно, но проблема в том что приходится ограничивать высоту контейнера и если появится ещё ...
1
голос
2
ответа
37
показов
Одинакова высота внутренних элементов
Здравствуйте имеется вот такой блок, заголовки в нем могут отличатся по количеству строк соответственно декоративный разделитель может съезжать. Вопрос в следующем если в CSS(не JS) способ задать ...
1
голос
1
ответ
128
показов
Как выровнять текст по вертикали в grid с помощью css?
Сверстала макет на grid. Хочу выровнять текст по вертикали. Свойство align-items работает не так, как надо - оно выравнивает текст, но и обрезает background, который я задала:
А надо, чтобы ячейка ...