Лучшие css-grid вопросы ИТ разработчиков

  • 6 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

Это решило это отлично, спасибо

у меня есть простой набор из трех абзацев на мобильном устройстве, который я хочу стилизовать в сетке на больших окнах просмотра без изменения исходного порядка. В первом разделе может быть что угодно, от нескольких строк до отсутствия контента ...

Задан 05 Jun 2018, 21:10 от codycustard
  • 1 голос
  • 2 ответа
  • 0 просмотров
2 ответа

Эти два вместе должны достичь желаемого эффекта.

ался установитьminmax() дляgrid-template-rows и что достаточно интересно, результатом было то, что ряды сетки простирались до максимумаminmax() вместо мин. Как сделать так, чтобы строки сетки оставались с минимальным объявленным размером, а ...

Задан 02 Jun 2018, 07:04 от user3789797
  • 3 голосов
  • 2 ответа
  • 0 просмотров
2 ответа

 сломать этот механизм?

читал много уроков по CSS flex box и CSS сеткам, но, честно говоря, я просто не могу понять, как сделать эту простую (?) Вещь. Все, что я хочу, это чтобы элементы в контейнере были такими же широкими, как и самый широкий элемент. Я не хочу, ...

Задан 28 Dec 2017, 07:21 от tscheingeld
  • 2 голосов
  • 2 ответа
  • 0 просмотров
2 ответа

 а также

аюсь создать макет, который использует сетку, которая занимает весь видовой экран браузера (height: 100vh), а затем позволяет элементу div внутри одного из элементов сетки прокручиваться в измерении Y. Вот пример кода. Есть три области сетки: ...

Задан 07 Feb 2019, 01:15 от Rob N
  • 3 голосов
  • 3 ответа
  • 0 просмотров
3 ответа

Ничто другое, что я пробовал, казалось, не сработало. Может быть, кто-то еще может найти решение. Или, может быть, это ограничение в текущей итерации Grid.

работает должным образом, когда я добавляю автозаполнение или автозаполнение вместо числа. grid-template-columns: repeat(auto-fit, minmax(max-content, max-content)); [/imgs/UNgn6.jpg] Но это работает правильно, когда я добавляю число вместо ...

Задан 30 Jul 2018, 13:21 от Galib Hasanov
  • 2 голосов
  • 2 ответа
  • 0 просмотров
2 ответа

Если вы разделите элементы содержимого HTML на блоки по четыре, вы сможете достичь желаемого результата с помощью правил стиля CSS Grid, JavaScript не требуется

ыске: решение только для CSS, позволяющее использовать «НЕСКОЛЬКО» одинаковых по высоте высот «сечений» для каждой строки, что также является адаптивным.Прим...

Задан 23 May 2017, 08:04 от Russell Winborn
  • 5 голосов
  • 2 ответа
  • 0 просмотров
2 ответа

@Ted не уверен, что вы можете объединить 3 ограничения внутри grid-template-column, но да, подождите, возможно, есть какой-то магический трюк с Grid;)

ли способ,без использования медиа-запроса, чтобы ограничить количество создаваемых столбцов и объединить это с автоподгонкой / заполнением? Например: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));Создает замечательный, отзывчивый ...

Задан 27 Feb 2019, 14:05 от Ted
  • 13 голосов
  • 6 ответов
  • 0 просмотров
6 ответов

Так что это будет исправлено, даже если верхние столбцы не равны нижним столбцам

вая текущий пример сетки CSS, как я могу свернуть границы, чтобы избежать двойных границ? Это такая простая вещь, чтобы достичь с помощью таблицы HTML. Как мне это сделать, используяdisplay: grid ? .wrapper { display: grid; ...

Задан 19 Dec 2017, 08:38 от klugjo
  • 7 голосов
  • 0 ответов
  • 0 просмотров
0 ответов

Боже мой, какое противоречие.

от вопрос уже есть ответ здесь: Центрирование в CSS Grid [/questions/45536537/centering-in-css-grid] 5 ответовЯ столкнулся с этой проблемой недавно. Предположим, у меня есть простой<h1> тег, и я хочу центрировать его по вертикали, поэтому даже ...

Задан 08 Aug 2017, 08:02 от user5700598
  • 14 голосов
  • 4 ответа
  • 0 просмотров
4 ответа

это не будет работать для установки, где grid-template-column имеет auto, потому что некоторое содержимое может расширить столбец в одной строке больше, чем в другой

аблица, созданная с помощью CSS Grid Layout, но у меня есть проблема с ней, я не могу установить состояние наведения на каждую строку. Я только хочу использовать CSS для этого. Кто-нибудь может дать мне решение для этого? .table { display: ...

Задан 05 Jan 2018, 07:14 от Nguyen Trung Hieu
  • 4 голосов
  • 2 ответа
  • 0 просмотров
2 ответа

@SuddenlyRust Добро пожаловать ... и ответы тоже способ обучения, и я многому научился, просто помогая другим :)

ужна отдельная прокрутка для каждого из моих столбцов в сетке.В настоящее время я разрабатываю мобильное веб-приложение. Я хочу использовать другую сетку для...

Задан 09 May 2017, 20:24 от SuddenlyRust
  • 2 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

stackoverflow.com/q/42176419/3597276

способ автоматически генерировать сетку, которая всегда заполняет доступное пространство, в то время каксокращениеэлементы, пока другой элемент не может быть добавлен. Большинство реализаций адаптивной сетки используют что-то, связывающее ...

Задан 25 Aug 2017, 11:41 от Afterlame
  • 6 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

jsFiddle demo

аюсь понять и проработать свой путь через CSS-сеткуgrid-template-areas вариант. учитывая этот HTML <div class="wrapper"> <div class="d">D</div> <div class="b">B</div> <div class="c">C</div> <div class="a">A</div> </div>и это CSS .wrapper { ...

Задан 07 Feb 2018, 09:38 от jmls
  • 3 голосов
  • 4 ответа
  • 0 просмотров
4 ответа

Имея этот параметр, вы можете сократить ширину строки-2.

.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; grid-auto-rows: 60px; grid-gap: 15px; } .col { background-color: tomato; }<div class="grid"> <div class="col"></div> <div class="col"></div> <div ...

Задан 03 Dec 2017, 00:23 от knitevision
  • 0 голосов
  • 2 ответа
  • 0 просмотров
2 ответа

 не работает

.parent { position:fixed; width:100%; left:0; top:14px; display:grid; grid-template-columns:40% 60%; grid-gap:5px; background:#eee; } .left { border:2px solid red; } .right { border:2px solid red; }<div class='parent'> <div ...

Задан 31 Aug 2018, 10:23 от user7461846
  • 65 голосов
  • 0 ответов
  • 0 просмотров
0 ответов

использование

аюсь создать простую страницу с помощью CSS Grid. То, что я не могу сделать, это центрировать текст из HTML в соответствующие ячейки сетки. Я пытался разместить контент в отдельномdivкак внутри, так и снаружиleft_bg а такжеright_bg селекторы и ...

Задан 06 Aug 2017, 20:52 от beetroot
  • 22 голосов
  • 4 ответа
  • 0 просмотров
4 ответа

РЕЗУЛЬТАТ ДЛЯ КОДА

ствительно смущен. При поиске онлайн-ресурсов и документации большая часть документации по этим свойствам, похоже, ссылается на Flex-box, а не на grid. И я не знаю, насколько применима документация для эквивалентных свойств в Flex-box ...

Задан 31 Jan 2018, 06:11 от keithlee96
  • 5 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

@SanderMoolin на самом деле нет, но было бы интересно иметь функцию floor () или round () .. возможно на будущем уровне;)

ел бы рассчитать количество строк в шаблоне сетки, используяcalc(), но пытается получитьrepeat подсчет с делением не работает: .grid { display: grid; grid-gap: 10px; grid-template-columns: 1fr; margin-bottom: 10px; background: rgba(0, 0, 0, ...

Задан 30 Jan 2019, 19:06 от Sander Moolin
  • 0 голосов
  • 2 ответа
  • 0 просмотров
2 ответа

но я следовал за учебниками в Интернете, и все они сказали мне, чтобы выразить это так ... Есть ли какая-то причина, по которой вы говорите мне так сказать? у вас есть какие-либо ссылки ????

у сделать свой сайт, используя систему CSS сетки, но, похоже, он не работает. Вот мой код: .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "logo faq" "about-us"; } .logo { ...

Задан 12 Aug 2017, 07:42 от Bashir Abdelwahed
  • 6 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

Абсолютно гениально и очень ценится. Спасибо, что так подробно объяснили проблему и заставили flex box работать!

лал шаблон сетки со строками 1fr 1fr 1fr. В среднем ряду приведен список встроенных изображений. В Chrome и Firefox изображения учитывают высоту строки сетки и корректно адаптируются. Однако в Safari 10.1.2 и Safari TP 31, по-видимому, ...

Задан 26 Jun 2017, 23:23 от D. Walsh
  • 1 голос
  • 1 ответ
  • 0 просмотров
1 ответ

Вот полный пример:

есть неявная сетка сgrid-auto-rows а такжеgrid-auto-columns, Однако мы также можем использоватьgrid-template-rows/grid-template-columns в комбинации сrepeat а такжеauto-fit создать явную неявную сетку. Есть ли что-нибудь, что мы можемтолько ...

Задан 09 Aug 2018, 11:24 от Lux
  • 0 голосов
  • 0 ответов
  • 0 просмотров
0 ответов

jsfiddle.net/rdtva2fq/48

я такая ситуация:https://jsfiddle.net/johnsam/rdtva2fq/НаХром это работает хорошо, посмотрите это:Это начало (см. «ПЕРВЫЙ» и «ПОСЛЕДНИЕ» BTN). Хорошо.НаСафар...

Задан 17 May 2017, 12:45 от user4412054
  • 8 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

Я согласен на часть «display: subgrid», которая по сути означает «нет, это пока невозможно» :)

уководства по CSS-сетке, по-видимому, подразумевают структуру, в которой элементы, расположенные в сетке, являются дочерними элементами самой сетки. <div class="wrapper"> <div>A</div> <div>B</div> </div>где.wrapper имеетdisplay: grid и ...

Задан 21 Dec 2017, 16:49 от phtrivier
  • 2 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

 доступно, другие решения, которые являются взломами, будут поражены.

стиемспецификация сетки [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout]Я понимаю, как выровнять дочерние элементы контейнера сетки, но я хочу выровнять элементыв дети, как если бы они были элементами сетки, а не их ...

Задан 04 Feb 2018, 22:35 от Ian Dunn
  • 7 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

@DavidGenger, когда вы достигнете уровня спецификации, вы окажетесь у источника. На «почему» могут ответить только авторы спецификаций и разработчики браузеров. Это может быть связано с технической сложностью, конфликтом с другими функциями или просто с выбором, который нужно было сделать на развилке дороги. Кто знает? Но, надеюсь, проблема решена на уровне 2 сетки.

нципе, я не понимаю, почему это работает: .grid { display: grid; grid-template-columns: repeat(4, min-content); }Но это не работает: .grid { display: grid; grid-template-columns: repeat(auto-fill, min-content); }Я действительно хочу сделать ...

Задан 25 Sep 2018, 17:47 от timetowonder
  • 2 голосов
  • 2 ответа
  • 0 просмотров
2 ответа

Спасибо, второе правильно, но, как и вы, недовольны тем, как это сделано. Я думаю, что есть лучший способ достичь этого с новой системой CSS-сетки, возможно, с использованием span и z-index, но я не могу понять, как.

аюсь получить шаблон сетки CSS, где заголовок накладывается на следующую строку.Я добавил фрагмент кода с заголовком вверху, прикрепленное изображение должно...

Задан 03 May 2017, 08:25 от Dan
  • 6 голосов
  • 0 ответов
  • 0 просмотров
0 ответов

@ Собака, достаточно честно. Конечно, это было бы круто, чтобы иметь в Grid Layout. Возможно в будущей версии.

периментировал с CSS Grid и застрял в поиске наиболее эффективных средств для обтекания текста<div> элемент, который расположен частично поверх двух других<div/> элементы. По сути, как и на изображении ниже, я хочу, чтобы текст в красных и синих ...

Задан 30 Dec 2017, 06:38 от Dog
  • 2 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

Добавьте это к своему коду:

я есть пустой столбец в начале, и я не могу понять, почему? <ul class="inrpager clearfix"> <li class="inrpager-previous"> </li> <li class="inrpager-title">Overview</li> <li class="inrpager-next">test</li> </ul> Код CSS отображает шаблон ...

Задан 03 Nov 2018, 05:34 от Interlated
  • 12 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

! Я попробовал flex, flex-grow, Grow и т. Д. Перед публикацией: p

ли аналогflex-grow длясетка [https://developer.mozilla.org/en-US/docs/Web/CSS/grid]свойство ? Я бы хотел, чтобы мои области сетки содержали контент, который они получают, но некоторые области занимают больше места, чем другиеflex-grow ...

Задан 24 Aug 2017, 20:25 от Ced
  • 9 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

 работал как шарм.

ы можете указать максимальное количество столбцов при использовании

Задан 27 Apr 2017, 15:55 от Panda TG Attwood
  • 7 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

 Подсетка css - это хак: хаки увеличивают сложность, усложняя поддержку кода и склонность к другим ошибкам, и рано или поздно они перестанут работать.

отаю над страницей с довольно простым макетом - в основном это таблица данных, но я использую сетку, чтобы столбцы корректно корректировались в зависимости от размера контента. Я хочу сделать строки сортируемыми (используя jQuery), поэтому мне ...

Задан 01 Jan 2018, 15:37 от Buno
  • 4 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

Разница между процентами и франками в CSS Grid Layout

у у меня есть переполнение на оси X в следующем фрагменте? Переполнение генерируется после примененияgrid-gap: 10px на моем.body сетка контейнера. div:not(.header):not(.body):not(.row) { border: 1px solid grey; } .header { margin-top: 20px; ...

Задан 11 Jan 2018, 19:12 от Damiano Barbati
  • 5 голосов
  • 0 ответов
  • 0 просмотров
0 ответов

Вот основной пример:

даю форму, которая имеет обязательные поля. Чтобы пометить их как обязательные, я ставлю звездочку (*) как::before элемент и плавающий прямо так, чтобы это было в верхнем правом углу поля. У меня проблема в том, что некоторые из этих полей ...

Задан 09 Aug 2017, 19:39 от Andrea
  • 7 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

Обе коробки появляются справа для меня в Chrome 72

сто заметил некоторые значенияalign-self собственность, которую я не видел раньше. Чтоstart, end, self-start, а такжеself-end и чем они отличаются отflex-start а такжеflex-end? Я имел в видуруководство по ...

Задан 19 Jun 2018, 01:26 от Vince
  • 2 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

я фактически использовал явную ширину для входов, которые я удалил для MVP. однако, это даже не имеет значения, потому что это инструмент, который я создаю только для себя :)

которым причинам два входных диапазона делают верхние два элемента в сетке смещенными по центру. Я предполагаю, что это из-за их теневого стиля DOM. Это действительно так? Кто-нибудь знает, почему диапазоны делают элементы A и B смещенными по ...

Задан 08 Dec 2017, 22:32 от Anthony
  • 4 голосов
  • 2 ответа
  • 0 просмотров
2 ответа

Не в ряд, а между сетками с разным содержанием.

ент ниже использует CSS Grid для увеличения количества столбцов для широких контейнеров. Для узких контейнеров (например, раскомментируйтеwidth: 80vw или изменить размер примера), он добавляет неявные строки (только 2 явные вgrid-template-rows ...

Задан 08 Feb 2018, 18:30 от Ian
  • 3 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

 Собственность объединена.

а ситуация с поддержкой браузера в отношении CSS Grid? Я осматриваюсь и с трудом понимаю всю картину о совместимости. Если я пойду кМогу ли я использовать [http://caniuse.com/#search=css%20grid] Вроде бы почти все браузеры его поддерживают. Но ...

Задан 05 Sep 2017, 16:55 от rolfo85
  • 2 голосов
  • 3 ответа
  • 0 просмотров
3 ответа

Если вы предпочитаете решение Javascript, вы можете использовать это:

ерирую таблицу (с vue.js) из объекта, который должен иметь ширину в два столбца. Каждый из столбцов происходит от ключа и значения объекта. Это эквивалентно следующему фактическому HTML: <div id="table"> <div> <div> this is something long on the ...

Задан 05 Feb 2019, 13:37 от WoJ
  • 1 голос
  • 3 ответа
  • 0 просмотров
3 ответа

Да, у меня уже было это, но я решил, что есть способ растянуть его ...

аюсь выяснить, как получить два столбца моей сетки одинаковой высоты. Вот то, что я после: xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx x qqqqqqqqqqqqq x x qqqqqqqqqqqqqqq x x qqqqqqqqqqqqq x x qqqqqqqqqqqqqqq x x x x qqqqqqqqqqqqqqq x x x x ...

Задан 13 Oct 2017, 19:55 от Jeff
  • 2 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

Вы можете использовать фиксированную позицию с трюком с нулевым преобразованием:

я есть 1 х 6 сетка. Я хочу показать ручку изменения размера при наведении на элемент сетки. Для этого у меня есть 2 округленных абсолютно позиционированных div внутри элемента сетки. Я поместил в середине края с обеих сторон предмета. Я хочу, ...

Задан 22 Feb 2018, 04:59 от Saravanan Ramupillai
  • 2 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

Это приносит еще одну проблему. Вы должны опубликовать новый вопрос с акцентом на изображениях границ и перемещениях, чтобы они могли получить полное внимание.

Задан 06 May 2017, 14:29 от Steven Ellen Starar
  • 11 голосов
  • 2 ответа
  • 0 просмотров
2 ответа

Я добавил это, но это просто делает его выпадать внизу ... Я пробовал Object-fit - но это ничего не делает

я есть CSS-макет сетки с кучей областей и фотоконтейнером. Я не знаю как: контролировать размер фотографии, чтобы она находилась в пределах сетки сохраняйте ширину фотографии на уровне 100% (таким образом, равную его контейнеру) и ...

Задан 07 Sep 2017, 07:46 от martin
  • 2 голосов
  • 1 ответ
  • 0 просмотров
1 ответ

 для таблиц поддержки браузера и, что более важно, протестируйте свой код в разных браузерах самостоятельно.

аюсь создать простую CSS-сетку, используя собственные свойства CSS Grid. Это работает, как я хотел, за исключением того, что я хочу создать служебный класс, ...

Задан 14 May 2017, 09:11 от eivindml
  • 6 голосов
  • 3 ответа
  • 0 просмотров
3 ответа

Версия, совместимая с IE, будет выглядеть так:

ю, что есть похожие вопросы, но здесь конкретно спрашивают, как это сделать с помощью CSS Grid Layout.Итак, у нас есть эта базовая настройка сетки:HTML (с бо...

Задан 09 Apr 2017, 00:57 от Daniel Tonon
Page 1 of 2
1 2