Вопросы с меткой [grid]
Grid - общее название контейнеров, использующихся для компоновки элементов интерфейса в виде таблицы. Если существует более конкретная метка, следует использовать ее ([css-grid], [wpf-grid] и т.п.)
180
вопросов
0
голосов
0
ответов
18
показов
Grid и flex Возможности
Возник вопрос. У Яндекса есть галерея картинок введите сюда описание ссылки,
при изменении ширины картинки перестраиваются меняя при этом высоту рядов и количество ячеек, понятно что с js это все ...
0
голосов
0
ответов
7
показов
React-grid-layout не масштабируется ширина
Не получается сделать адаптивным компонент ResponsiveGridLayout
Делал следующим образом:
import { Responsive, WidthProvider } from 'react-grid-layout';
далее:
const ResponsiveGridLayout = ...
0
голосов
1
ответ
38
показов
css grid. Расположение внутри контейнера
Нужен такой вид. Как не кручу - не получается.
0
голосов
0
ответов
4
показа
Как зделать так чтобы боковая панель, при увиличивании размера сайта перемещалась под основной текст
body {
background-color: #fff;
color: #333;
margin: 0;
font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
}
.logo {
font-size: 200%;
padding: 50px 20px;
margin: 0 auto;
...
0
голосов
0
ответов
33
показа
Grid css. Надо переместить блок с текстом под картинку
Мне надо переместить текст "Lorem..." под картинку используя grid css.
.main__item {
border: 1px solid #7c7c7c;
margin-top: 70px;
margin-bottom: 15px;
}
.item__title {
...
1
голос
0
ответов
14
показов
В чем разница между start, left, self start, safe start values for justify-items свойств?
Можете ли вы объяснить мне разницу между этими свойствами: justify-items: start justify-items: left justify-items: self start justify-items-safe start :
start это начальный уровень контейнера, то есть ...
0
голосов
0
ответов
17
показов
почему fit-content() не работает со свойством grid-template-rows в Css-Grid, но хорошо работает со grid-template-columns?
Я приведу один пример, где есть два изображения. размер их составляет 168 пикселей в ширину и 180 в высоту. Я разрешил использовать только высоту до 300 пикселей, но она отображает два изображения по ...
2
голоса
1
ответ
21
показ
Автоматическая подстройка ширины по длине текста
section{
display: grid;
grid-template-areas:
". co .";
}
.container{
display: grid;
grid-area: co;
background: red;
}
<section>
<div class="container"&...
0
голосов
0
ответов
32
показа
Помогите сверстать страничку с использованием Grid Layout
Я сверстал вот такую страничку, требования к страничке были такие, использовать Grid Layout, футер чтоб прижимался к низу странички
<div class="wrapper">
<header class="...
0
голосов
1
ответ
44
показа
Почему не подключается css к Django
settings.py:
STATIC_URL = '/main/static/'
STATICFILES_DIRS = [
BASE_DIR / "main/static"
]
index.html:
{% extends 'main/base.html' %}
{% load static %}
<link rel="stylesheet&...
1
голос
1
ответ
32
показа
Выровнять блок со второго ряда, к блоку первого ряда. Grid css
Как выровнять div к верху вне зависимости от высоты рядов? На моем примере: прилепить div (с текстом 4) к div, который находиться выше него. Нашла что то про "mansory", но кажется это ...
0
голосов
0
ответов
10
показов
Компенсировать адаптивные отступы родителя, дочерним блокам
* {
position: relative;
padding: 0;
margin: 0;
outline: none;
letter-spacing: 1px;
box-sizing: border-box;
}
.m_bl {
--padding:clamp(10px, 2%, 20px);
--paddingm:clamp(-...
2
голоса
2
ответа
36
показов
Прижать красный блок
.m_bl {
display: grid;
grid-template-columns: 1fr max(100px, 30%);
align-items: start;
grid-template-areas: 'pl rk' 'cn rk';
}
.pl {
height: 200px;
background: gold;
grid-...
0
голосов
1
ответ
23
показа
Проблема с css grid
Имеется блоки которые окутаны в div.wrapper, у него имеются такие свойства
display: grid;
grid-template-columns: 20% 80%;
grid-template-areas: "aside main";
grid-column-gap: .8em;
Также ...
0
голосов
0
ответов
42
показа
Применение диспетчера компоновки в WPF
Необходимо, используя диспетчер компоновки в WPF, реализовать приложение со следующим поведением при изменении размеров окна:
Вот код, который есть на данный момент, однако как можно сдвинуть первый ...
2
голоса
1
ответ
46
показов
Как задать относительную высоту элемента в сетке?
Есть сетка изображений (каждое с соотношением сторон 2:3) из 4-х элементов в строке. Как можно задать относительную высоту, чтобы при изменении разрешения, высота менялась пропорционально?
Сама сетка ...
0
голосов
1
ответ
26
показов
Сделать на одном уровне название пункта и значение в grid cell
Есть grid таблица со спойлером, открывающимся при нажатии на верхнюю строчку с данными таблицы.
Как сделать чтобы каждое название пункта и его значение в спойлере было на одном уровне вне зависимости ...
0
голосов
1
ответ
15
показов
построить боксы grid используя nth-child
У меня есть хтмл код сетки, который не работает должным образом. Мне нужен вот такой результат:
Но в итоге, код дает не тот результат, который нужен. Пожалуйста, подскажите, где я ошибаюсь. Спасибо.
...
4
голоса
2
ответа
62
показа
Как можно сверстать подобное?
body {
margin: 0;
padding: 0;
}
main.gallery {
height: 100vh;
overflow: hidden;
}
.gallery > .gallery__list {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, ...
0
голосов
0
ответов
42
показа
Как изменить высоту ячеек в grid?
Подскажите, пожалуйста, как задать одинаковую высоту и ширину для ячеек? grid-template-rows: repeat(30, 30px); игнорируется, а если подгонять высоту через font-size, то это дает неточный результат.
...
1
голос
1
ответ
23
показа
Задать размер конкретного столбца таблицы grid с помощью CSS
Итак, есть таблица построенная с помощью элемента CSS - grid
Есть свойство nth-child() - которое позволяет задавать конкретные параметры для дочерних элементов.
Что я хочу: я хочу, чтобы некоторые ...
1
голос
2
ответа
48
показов
как сделать одинаковый фиксированный отступ всем span, без margin конкретно каждому из них
<div class="contact">
<ul>
<p> CONTACT US :</p>
<li>Mywebsite.Com Socaial <span> Media Username</span>
<li>Username@domain.com <span>...
0
голосов
1
ответ
31
показ
grid html не ставятся кнопки
1 как они распалагаются
2 как должны распалагатся
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-...
0
голосов
0
ответов
24
показа
Адаптация grid-секции под разрешение 4К
Есть grid-секция, состоящая из двух блоков-формы обратной связи, и карты (в примере вместо нее серый блок). Так как карта должна выходить за пределы контейнера, использовано абсолют. позиц-е. Делю ...
0
голосов
2
ответа
29
показов
Как на grid выстраить колонки?
.content {
display: grid;
}
.content > div {
border: 1px solid #efefef;
}
<div class="content">
<div class="lists">lists</div>
<div class="numbers">numbers</div&...
0
голосов
1
ответ
9
показов
Grids и не корректные св-ва в браузере
Есть такой код, который я копирую исходя из курса:
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/...
0
голосов
0
ответов
28
показов
Адаптивные 2 блока разной ширины
.box{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr) minmax(500px, 1fr));
}
.left{
background: blue;
}
.right{
background: red;
}
<div class="container">
<div ...
0
голосов
3
ответа
52
показа
Позиционирование блоков, сетка
Всем привет, нужно реализовать такое же расположение блоков как я сделал ниже, только с одним условием: неважно сколько блоков у нас будет, 1 или 10, они всегда должны распологаться все на своих ...
1
голос
0
ответов
38
показов
Как верстать данный grid?
Я верстаю макет из figma, в нем есть элемент, который нужно верстать с помощью свойства grid. Он несимметричен, и имеет довольно сложную структуру. Я, обучаюсь в в верстке не так давно. Я попытался ...
0
голосов
2
ответа
34
показа
Как сверстать такое расположение блоков (желательно на флексах)?
Как сверстать такое расположение блоков?
Желательно на флексах, чтобы они уходили друг под друга при сжатии окна.
0
голосов
0
ответов
67
показов
могу ли я расположить два блока в одной ячейке grid
блок слева занимает одну строку и одну колонку, могу ли я сделать так, чтобы блоки справа разостились так как на картинке?
.cards-grid {
display: grid;
gap: 20px;
grid-template-...
0
голосов
0
ответов
20
показов
как увеличивать элемент grid
не получается выделять элемент при помощи grid. Суть такая: как только я делаю элемент активным - все соседние должны ужиматься, а активный увеличиваться. И так должно со всеми через click происходить....
0
голосов
1
ответ
26
показов
Проблема с вёрсткой grid?
Вот блок, который нужно сверстать. Я только недавно начал его изучать, так что не силён в нём. В Интернете искал похожие примеры, не нашёл. Помощь нужна только с расположением фото, стрелку и надпись ...
0
голосов
0
ответов
37
показов
Как менять Frame в tkinter
from tkinter import *
class MyApp(Tk):
def __init__(self):
Tk.__init__(self)
self._frame = None
self.switch_frame(StartPage)
def switch_frame(self, frame_class):
...
0
голосов
1
ответ
33
показа
Как выровнять карточки с помощью grid?
Как поставить карточку 1 ровно посередине между карточками 2 и 3?
* {
box-sizing: border-box;
}
.grid-container {
max-width: 940px; /* максимальная ширина контейнера */
margin: auto; /...
0
голосов
0
ответов
56
показов
Плагин gulp-autoprefixer ругается на grid сетку
При запуске gulp в консоли появляются такие предупреждения.
gulp-autoprefixer:
autoprefixer: C:\Users\DanKadd\Desktop\ts\app\scss\style.min.css:1:676: IE does not support justify-content on grid ...
2
голоса
2
ответа
130
показов
Почему появляется прокрутка в grid хотя стоит height: 100vh?
Почему не срабатывает в .wrapper свойство height: 100vh; ?
Появляется прокрутка, также некорректно работает .item__body свойство overflow: auto; height: 100%;
body {
margin: 0;
}
.wrapper {
...
1
голос
1
ответ
37
показов
Как через grid совместить 3 ячейки в 2 строки?
.wrapper {
height: 200px;
display: grid;
grid-template-areas:
"col1 col1"
"col2 col4"
"col3 col5";
grid-template-rows: 28px 1fr 1fr;
grid-template-columns: ...
0
голосов
0
ответов
11
показов
Как отобразить индекс строк в Ag-Grid в обратном направлении?
Всем привет, Мне нужно указать индекс строки для таблицы Ag-grid.
Моя проблема в том, что он нумерует первый элемент в самом вверху сетки как № 1.
Но мне нужна пронумеровать первый элемент сверху ...
0
голосов
0
ответов
22
показа
Как переносить ячейки qgridlayout в зависимости от ширины окна
Есть ли такой метод, который будет переносить ячейки QGridLayout в зависимости от ширины окна?
1
голос
0
ответов
28
показов
Как масштабировать фон в сетке Bootstrap
Делаю свою первую страницу на сетке бутстрап и столкнулся с проблемой. Основное фото я сделал фоном к <header> и поместил в него лого, меню, подпись и кнопку. Но при масштабировании страницы фон ...
0
голосов
0
ответов
40
показов
Почему не растягивается грид строчка по вертикали? В чем логика?
Не срабатывает настойка рядов,занимаемых элементом в случае,если элемент растянут на всю ширину экрана и не указаны никакие настройки высоты для гридконтейнера. Файлы с кодом в конце. Скриншоты в ...
0
голосов
0
ответов
28
показов
как используя grid разместить по 4 блока по горизонтали и сделать адаптив?
Задача, есть 12 блоков, разместить их по горизонтали по 4. Когда браузер сжимается, чтобы перегруппировывались по 3, потом по 2, потом по 1.
Мои попытки:
.grid {
display: grid;
grid-gap: ...
0
голосов
1
ответ
37
показов
Почему input и textarea вплотную прилегают к правому краю формы?
Почему input и textarea вплотную прилегают к правому краю формы и выходят за края грид-сетки?
https://jsfiddle.net/uecya4L6/
html, body {
height: 100%;
width: 100%;
overflow: hidden;
...
0
голосов
1
ответ
133
показа
Поменять местами блоки в родительскому Grid?
Как поменять местами два последних блока. Тоесть сначала Header, за ним Info, Slider
.main {
display: grid;
grid-gap: 24px;
grid-template-columns: 383px;
}
<div class="main">
<...
1
голос
0
ответов
42
показа
Высота родительского блока меньше высоты дочернего
Есть проблема Выравнивание в Firefox. Кроссбраузерная верстка. В связи с ней обнаружил странную вещь
Как видно из скриншотов высота родительского блока FiltersNew__blocks меньше высоты дочернего ...
0
голосов
2
ответа
81
показ
Css. Flex(grid) Ширина блоков, в зависимости от контента в независимых блоках
Нужно сделать так, чтобы в первом блоке ширина контента всех трёх первых параграфов была одинаковая, но бралась в зависимости от максимальной ширины самого большего параграфа. Проблема в том, что они ...
-1
голос
1
ответ
23
показа
как сверстать вот эту секцию на гридах
<section class="catalog-car">
<div class="catalog-car__content">
<img src="img/firstcar.jpg" alt="" class="catalog-car__img"...
0
голосов
0
ответов
25
показов
Как подтягивать элементы сетки?
у меня есть сетка и фильтрация контента, для нее я использовал плагин mixitup
после того как нажимаю кнопку фильтра, не нужны блоки исчезают, а нужны остаются, но на свои местах, я бы хотел, чтобы ...
1
голос
1
ответ
46
показов
Разной длины текст в блоке толкает контент
Всем привет, ребят, подскажите, есть три блока, в котором есть текст разной длины, нужно сделать так, чтобы если в одном текст длиннее, то и в остальных двух блока одинаково толкался контент, для ...