Comments 74
UFO just landed and posted this here
Да, будем ждать поддержки сего чуда в других браузерах, ибо проприетарные свойства — не есть гуд.
Проприетарные свойства — это нестандартные свойства, реализованные в том или ином браузере.
В данном случае свойства стандартные и открытые для реализации в других браузерах, в частности, спецификация включает описание алгоритмов для расчета отдельных параметров. Обсуждение всего этого великолепия идет абсолютно открыто в рабочей группе CSS.
В данном случае свойства стандартные и открытые для реализации в других браузерах, в частности, спецификация включает описание алгоритмов для расчета отдельных параметров. Обсуждение всего этого великолепия идет абсолютно открыто в рабочей группе CSS.
Вы правы, когда нибудь мы доживем до этого. А пока /me ушел верстать под ie6…
Добавьте в статью информацию о том, какие браузеры уже это поддерживают
Судя по этой ссылке — работает только в IE10. Что ожидаемо. Хотя если появится в остальных — было бы здорово.
Круто! По похожему принципу происходит размещение элементов в XAML (в контейнере Grid), так что тем, кто знаком с WPF/Silverlight все должно быть очень привычно.
На мой взгляд, все, чего не хватает связке HTML/CSS — это нормальной системы layout'ов. То, о чем написано в этой статье, было бы прекрасно. К сожалению, это не мейнстрим, причем далеко не мейнстрим, и нигде не поддерживается, так что пока ждем лучших времен :)
«Чтобы быстрее разобраться с тем, как работает Grid Layout, давайте сразу же начнем с ...»
Предлагаю начать с того, что у пользователей IE в Windows Vista и Windows XP всё это никогда не будет работать, и на этом, собственно, можно закончить статью.
Предлагаю начать с того, что у пользователей IE в Windows Vista и Windows XP всё это никогда не будет работать, и на этом, собственно, можно закончить статью.
Когда дойдёт до реализации во всех браузерах, про XP уже все забудут. :)
Хотя, конечно, хочется верить в чудо, что это случится раньше…
Хотя, конечно, хочется верить в чудо, что это случится раньше…
IE6 сколько уже лет хоронят, а он всё никак до конца не умрёт. XP с IE 8 будет умирать ещё дольше.
Что же до реализации, то с современными темпами развития стоит вебкиту или геко ввести поддержку этого черновика, остальные за скорее всего за месяцы подтяутся.
Что же до реализации, то с современными темпами развития стоит вебкиту или геко ввести поддержку этого черновика, остальные за скорее всего за месяцы подтяутся.
ИЕ6 скорее мёртв, чем жив. На него же даже Гугл положил большой и волосатый (поиск-то работает, то куча сервисов — или вообще никак, или в урезанном виде). Если сайт не для Китая, то можно со спокойной душой забить. Лично я и на ИЕ7 обычно забиваю.
Интересно, почему такая важная фича как grid layout обходится стороной всеми браузеарми кроме ИЕ. За ИЕ я, конечно, безумно рад, но всё же…
Интересно, почему такая важная фича как grid layout обходится стороной всеми браузеарми кроме ИЕ. За ИЕ я, конечно, безумно рад, но всё же…
Я бы сказал, что одна из самых важных! Больше половины костылей/хаков для HTML+CSS из за отсутствия человеческой системы лэйаутов и гридов.
Какого черта нормальное позиционирование + растягивание + масштабирование элемента реализуется через какое-то невообразимое количество разных хитростей, css-хаков, отрицательных паддингов, зашкаливающих margin-ов, абсолютным позиционированием с указанием запредельной высоты, и вставкой всего этого в элемент с overflow-hidden, магией с обтеканием (float) и переносом (clear) и все равно решение будет «недостаточно гибким». И все это вместо возможности (как в проприетарных MXML или XAML) указать точные циферки и все.
Какого черта нормальное позиционирование + растягивание + масштабирование элемента реализуется через какое-то невообразимое количество разных хитростей, css-хаков, отрицательных паддингов, зашкаливающих margin-ов, абсолютным позиционированием с указанием запредельной высоты, и вставкой всего этого в элемент с overflow-hidden, магией с обтеканием (float) и переносом (clear) и все равно решение будет «недостаточно гибким». И все это вместо возможности (как в проприетарных MXML или XAML) указать точные циферки и все.
знали бы Вы как я злился на отсутствие поддержки IE6, когда потерял гуглофон в Китае, а единственной найденной кафешкой управлял отель и стоял на всех компьютерах только IE6, с запрещенным скачиванием файликов :)
хотя в корпоративную почту меня еще пустили и дали сменить пароли и проч., а вот на всяких домашних ящиках увы и ах, нет!
и мне по большому счету было наплевать на то какой там ui красивый и удобный — мне нужно было лишь сменить пароль и только. даже если бы верстка поехала.
хотя в корпоративную почту меня еще пустили и дали сменить пароли и проч., а вот на всяких домашних ящиках увы и ах, нет!
и мне по большому счету было наплевать на то какой там ui красивый и удобный — мне нужно было лишь сменить пароль и только. даже если бы верстка поехала.
Возможно, вы удивитесь еще раз! Но они это реализовали именно потому… что другие браузеры этого не сделали! А вовсе не потому, что они вдруг полюбили кроссбраузерность, кроссплатформенность, общедоступные стандарты или вообще решили, что пора стать хорошими!
Как я понял, этот grid layout мелкомягкие сами и изобрели, а потом успешно пропихнули в стандарты. :) Всё это «ж-ж-ж» неспроста.
Но объяснять добавление grid layout’а исключительно желанием добавить уникальных для ИЕ фич будет не совсем корректно: какой-никакой, а это стандарт, с жёстко описанными алгоритмами. Когда ИЕ10 выйдет, фича уже давно будет в других браузерах. Старыми грязными тактиками с вендорными фичами здесь и не пахнет.
Но объяснять добавление grid layout’а исключительно желанием добавить уникальных для ИЕ фич будет не совсем корректно: какой-никакой, а это стандарт, с жёстко описанными алгоритмами. Когда ИЕ10 выйдет, фича уже давно будет в других браузерах. Старыми грязными тактиками с вендорными фичами здесь и не пахнет.
Тьфу-тьфу-тьфу, но ИЕ6 таки отмирает. Похоже, физически — вместе с компами, на которых он был установлен. Ему 11 год уже пошел, всё же.
Вот она, вёрстка моей мечты!!! :-)
Когда-то вёрсткой мечты были блоки.
Ещё раньше мечтой был CSS.
Интересно, а что будет после grid?
Ещё раньше мечтой был CSS.
Интересно, а что будет после grid?
… которая отличается от старых добрых таблиц только тем, что информацию о расположении элементов перенесли туда, где ей и положено быть — в CSS. Не прошло и 15 лет, как наконец-то довели html-версту до ума.
Новое — это хорошо забытое старое, да;)
Новое — это хорошо забытое старое, да;)
Всё-таки несколько новых фич относительно старых таблиц есть: шаблоны для повторения, сложнее логика вычисления размеров (min, max и др.), несколько блоков в одной ячейке, плюс фишки из далёкого будущего (именованные ячейки, шаблоны в виде строк).
Но таки да, это старые-добрые таблицы. Вернулись к истокам.
Но таки да, это старые-добрые таблицы. Вернулись к истокам.
Это к сожалению никак не таблицы. И воспроизвести «резиновость» таблиц не удастся.
Уникальность таблиц состоит в том что каждая ячейка это устанавливает так называемый BFC — block formatting context. Т.е. в условиях overflow:visible сродержимое ячеек друг на друга «не залазит». Здесь же — легко.
Уникальность таблиц состоит в том что каждая ячейка это устанавливает так называемый BFC — block formatting context. Т.е. в условиях overflow:visible сродержимое ячеек друг на друга «не залазит». Здесь же — легко.
Размеры ячеек в Grid Layout могут подстраиваться под контент.
Да? А как? Например есть #grid из одного столбца/колонки:
И у него пара-тройка children. Под какой контент и как оно будет подстраиваться?
#grid1x1 {
grid-rows: 1gr
grid-columns: 1gr
}И у него пара-тройка children. Под какой контент и как оно будет подстраиваться?
А в чем смысл делать сетку из одного столбца и одной строки?
А так вы можете указать размер, например, в виде max-content.
А так вы можете указать размер, например, в виде max-content.
Это для примера.
В одном placeholder Grid Layout допускает несколько элементов. Как они будут подстраиваться? Или как грид их будет подстраивать? Как сказать
все элементы в этом placeholder должны иметь одинаковую ширину и эта ширина должна быть не меньше max-width самого широкого?
А вообще смыслов таблиц из одной ячейки может быть много.
Например иногда имеет смысл написать так:
тогда ширина pre будет равна самой широкой строки ибо table/cell фактически ведет себя как если бы он объявлен как
В одном placeholder Grid Layout допускает несколько элементов. Как они будут подстраиваться? Или как грид их будет подстраивать? Как сказать
все элементы в этом placeholder должны иметь одинаковую ширину и эта ширина должна быть не меньше max-width самого широкого?
А вообще смыслов таблиц из одной ячейки может быть много.
Например иногда имеет смысл написать так:
pre { display:table-cell; }тогда ширина pre будет равна самой широкой строки ибо table/cell фактически ведет себя как если бы он объявлен как
width:max-content > Как сказать все элементы в этом placeholder должны иметь одинаковую ширину и эта ширина должна быть не меньше max-width самого широкого?
Если я правильно понял вопрос, надо при определении колонки сказать, что ее ширина должна быть max-content, либо minmax(max-content, 1fr).
Если я правильно понял вопрос, надо при определении колонки сказать, что ее ширина должна быть max-content, либо minmax(max-content, 1fr).
max-content это ширина самой колонки, но никак не элементов в ней. Ширина элементов определяется в CSS свойствами min/max-width, width и box-sizing. Соответсвенно высота min/max-height и height.
Еще раз: Grid Layout разрешает разместить несколько элементов внутри одного placeholder. Скажем мы поместили три таких элемента.
Как сказать «все три этих элемента должны иметь ширину равную ширине этого placholder, и быть расположенными один за одним вертикально занимая всю высоту этого placeholder»?
Еще раз: Grid Layout разрешает разместить несколько элементов внутри одного placeholder. Скажем мы поместили три таких элемента.
Как сказать «все три этих элемента должны иметь ширину равную ширине этого placholder, и быть расположенными один за одним вертикально занимая всю высоту этого placeholder»?
В ячейку запихиваем один блок, а в него кладём обычные дивы, не?
Так вы скажите элементам внутри колонки, чтобы у них ширина была 100% — они займут все пространство в колонке (только надо отступы учитывать).
Если внутри ячейки нужно внутреннее деление, то подозреваю, что тут либо внутреннюю сетку нужно делать, либо тот же flexbox использовать.
Ну либо, как написано выше — в ячейку кладем один блок, а внутрь него дивы, высоту которых делаем, скажем 33% с копейками.
Если внутри ячейки нужно внутреннее деление, то подозреваю, что тут либо внутреннюю сетку нужно делать, либо тот же flexbox использовать.
Ну либо, как написано выше — в ячейку кладем один блок, а внутрь него дивы, высоту которых делаем, скажем 33% с копейками.
Какое-то очень-преочень натянутое и избыточное решение для простого трехколоночного макета С МИНИМАЛЬНОЙ ВЫСОТОЙ СТОЛБЦОВ 100%, они ведь это имели в виду?
То все фигня. Это будет поддерживатся однозначно не скоро. А сейчас лучше не мечтать, а идти верстать страницы со всякими 960grid, bootstrap и т.д.
Почему однозначно нескоро? Видится мне, что grid layout — это тот же table layout, только немного по-другому записанный и с парой дополнительных фич. Реализовать основу (grid, columns, rows, column, row, span — как в ИЕ) — это плёвое дело. Добавить align и разобраться с z-index. Со всякими min/max может быть веселуха, но без них на первых порах можно спокойно прожить.
Скоро будет, скоро. Браузеры морально не смогут себе позволить, чтобы ИЕ их так серьёзно обходил. :)
Скоро будет, скоро. Браузеры морально не смогут себе позволить, чтобы ИЕ их так серьёзно обходил. :)
а ведь ты был прав… прошло 4 года, а гриды пока массово не используют. Да и поддержка в браузерах еще не полная, хотя и реализована на 99%.
Стоит бы отметить что grid layout это не position:static размещение, а вариация position:absolute|fixed.
Собственно grid layout можно воспрозвести руками и сейчас задав position:fixed всем элементам. Управляя left/top/right/bottom можно воспроизвести start/end/stretch позиционирование. Но position:fixed хотя бы можно управлять z-index.
Собственно grid layout можно воспрозвести руками и сейчас задав position:fixed всем элементам. Управляя left/top/right/bottom можно воспроизвести start/end/stretch позиционирование. Но position:fixed хотя бы можно управлять z-index.
UFO just landed and posted this here
таки налезают
Ну во первых by design элементы могут рисоваться поверх соседей.
А во вторых представим себе grid с такими вот columns:
и скажем в первой колонке оказался элемент с width:300px или min-width:300px.
Или юзер выставил шрифт поболее и content width стала больше чем 150px.
Результат будет не сильно привлекательный.
Основной недостаток(?) Grid Layout состит в том что он использует т.н. placeholder model — поверхность разбивается на placeholders — виртуальные прямоуголники в которых уже помещаются реальные элементы. Причем как-то совершенно грустно и не по CSS-овски. Скажем есть внутри элемент с width:100%. Этот width он отнсительно чего расчитывается? Про placeholder'ы CSS box model ничего не знает.
Таблицы же используют строго position:static layout. Вся поверхность конейнера заполнена реальными DOM элементами. При этом контент соседних ячеек друг на друга не залазит. Ибо каждая ячейка это BFC.
Мой flow:«template» использует table model. Собственно под капотом там table engine и используется. Т.е. layout и размеры определяются по правилам таблиц, это вот:
Описывает таблицу в которй первый child занимает полный ряд (первую и вторую колонку) а второй и третий соответсвенно живут во втором ряду.
Размеры как я уже сказал — по принципу tables — с учетом min/max-width и пр.
А во вторых представим себе grid с такими вот columns:
grid-columns: 150px 1fr 200px;и скажем в первой колонке оказался элемент с width:300px или min-width:300px.
Или юзер выставил шрифт поболее и content width стала больше чем 150px.
Результат будет не сильно привлекательный.
Основной недостаток(?) Grid Layout состит в том что он использует т.н. placeholder model — поверхность разбивается на placeholders — виртуальные прямоуголники в которых уже помещаются реальные элементы. Причем как-то совершенно грустно и не по CSS-овски. Скажем есть внутри элемент с width:100%. Этот width он отнсительно чего расчитывается? Про placeholder'ы CSS box model ничего не знает.
Таблицы же используют строго position:static layout. Вся поверхность конейнера заполнена реальными DOM элементами. При этом контент соседних ячеек друг на друга не залазит. Ибо каждая ячейка это BFC.
Мой flow:«template» использует table model. Собственно под капотом там table engine и используется. Т.е. layout и размеры определяются по правилам таблиц, это вот:
#container {
flow: "1 1"
"2 3";
}Описывает таблицу в которй первый child занимает полный ряд (первую и вторую колонку) а второй и третий соответсвенно живут во втором ряду.
Размеры как я уже сказал — по принципу tables — с учетом min/max-width и пр.
и скажем в первой колонке оказался элемент с width:300px или min-width:300px.
Или юзер выставил шрифт поболее и content width стала больше чем 150px.
Результат будет не сильно привлекательный.
Тут уж надо решить: или ширина определяется колонками grid-columns (и ширина у блоков auto или в процентах меньше 100%), или блоками (и в grid-columns прописаны minmax с учётом min/max-content). Какой смысл делать одним способом и портить другим?
Скажем есть внутри элемент с width:100%. Этот width он отнсительно чего расчитывается?
Относительно ячейки.
dev.w3.org/csswg/css3-grid-layout/#calculating-the-size-of-grid-items
Note that percentage lengths specified on a Grid item resolve against the dimensions of the Grid cell (i.e. the Grid cell serves as the containing block for the Grid item).
Во первых width:auto для разных блоков означает разные вещи.
width:auto для таблицы это нечто близкое к min(100%, max-content).
Для floats это shrink-to-fit. Для простых блоков это нечто третье.
А во вторых смысл ситуации «юзер выставил шрифт поболее и content width стала больше чем 150px.» очевиден и ситуация вельми часто наблюдается.
Особенно когда этот grid будут пытаться втиснуть в трех-пиксельный экран мобильного браузера.
Т.к. grid layout допускает overflow:
«If the ‘min-content’ size of the Grid item’s box is greater than the size of its Cell, it will overflow the bounds of its Cell in a direction determined by its alignment»
то в общем и целом разницы между система гвоздями прибитых position:absolute элементов и те же элементы но в grid нет.
width:auto для таблицы это нечто близкое к min(100%, max-content).
Для floats это shrink-to-fit. Для простых блоков это нечто третье.
А во вторых смысл ситуации «юзер выставил шрифт поболее и content width стала больше чем 150px.» очевиден и ситуация вельми часто наблюдается.
Особенно когда этот grid будут пытаться втиснуть в трех-пиксельный экран мобильного браузера.
Т.к. grid layout допускает overflow:
«If the ‘min-content’ size of the Grid item’s box is greater than the size of its Cell, it will overflow the bounds of its Cell in a direction determined by its alignment»
то в общем и целом разницы между система гвоздями прибитых position:absolute элементов и те же элементы но в grid нет.
UFO just landed and posted this here
Grid — это, конечно, прекрасно. Но синтаксис разочаровывает. Избыточен и неуклюж.
Вместо отдельных свойств grid-columns и grid-rows должно быть одно свойство grid-layout. А колонки и строки разделяться могут слешем. Ну или grid-layout мог бы быть универсальным свойством по отношению к эти двум (как, например, соотносятся font-size и font-family к универсальному свойству font).
То же самое касается свойств, указывающих позицию блоков: grid-column и grid-row. Универсальное свойство: grid-position. С растяжением ячеек тоже всё неладно. Гораздо нагляднее указывать прямо в свойстве grid-position первую и последнюю ячейку протяженности.
Текущий синтаксис:
А как хотелось бы:
Достоинства:
1) Код короче, следовательно, легче читается
2) Не спутаешь очень похожие grid-column и grid-columnS (а также grid-row и grid-rowS)
3) При использовании grid-column-span и grid-crow-span не так очевидно, какая ячейка будет конечной (в моем варианте указывается первая и последняя ячейка)
Вместо отдельных свойств grid-columns и grid-rows должно быть одно свойство grid-layout. А колонки и строки разделяться могут слешем. Ну или grid-layout мог бы быть универсальным свойством по отношению к эти двум (как, например, соотносятся font-size и font-family к универсальному свойству font).
То же самое касается свойств, указывающих позицию блоков: grid-column и grid-row. Универсальное свойство: grid-position. С растяжением ячеек тоже всё неладно. Гораздо нагляднее указывать прямо в свойстве grid-position первую и последнюю ячейку протяженности.
Текущий синтаксис:
#grid {
display: grid;
grid-columns: 150px 1fr 200px;
grid-rows: 50px 1fr 50px;
}
#cell {
grid-column: 2;
grid-column-span: 2;
grid-row: 2;
grid-row-span:2;
}А как хотелось бы:
#grid {
display: grid;
grid-layout: 150px 1fr 200px / 50px 1fr 50px;
}
#cell {
grid-position: 2..3 / 2..3;
}Достоинства:
1) Код короче, следовательно, легче читается
2) Не спутаешь очень похожие grid-column и grid-columnS (а также grid-row и grid-rowS)
3) При использовании grid-column-span и grid-crow-span не так очевидно, какая ячейка будет конечной (в моем варианте указывается первая и последняя ячейка)
Также хотелось бы поругать grid-column-align и grid-row-align. Опять же нужно универсальное свойство grid-align. Далее, мне не нравятся значения start и end. Использование вместо них top (bottom) и left (righ) будет лучше, потому что:
1) Это нагляднее
2) Будет лучше сочетаться с синтаксисом других свойств, например, background-position.
3) На мой взгляд, если разработчику в блоке с арабским текстом понадобиться прибить блок справа, то он просто напишет right — какие проблемы?
1) Это нагляднее
2) Будет лучше сочетаться с синтаксисом других свойств, например, background-position.
3) На мой взгляд, если разработчику в блоке с арабским текстом понадобиться прибить блок справа, то он просто напишет right — какие проблемы?
Ах да, Template Layout — это рак, ИМХО. И зачем Grid его приютил?
«display: grid» избыточно, потому что «grid-columns / grid-rows» может быть только у грида — можно вообще убрать. Так как гридов не должно быть много, а значения свойств (особенно при использовании именования) будут длиннее имён свойств, то большой экономии не вижу.
Краткую запись на замену спанам собираются добавить, это упомянуто в статье (будет как у вас, но без точек).
Насчёт grid-position совершенно согласен, делать на два отдельных свойства смысла мало. Не знаю, зачем так сделали.
Краткую запись на замену спанам собираются добавить, это упомянуто в статье (будет как у вас, но без точек).
Насчёт grid-position совершенно согласен, делать на два отдельных свойства смысла мало. Не знаю, зачем так сделали.
UFO just landed and posted this here
Это должно было быть в CSS 1.0.
Почему в 2012 году нормальные инструмены для верстки по сетке, поддерживаются только одиним, да и то не вышедшим браузером — для меня загадка.
Почему в 2012 году нормальные инструмены для верстки по сетке, поддерживаются только одиним, да и то не вышедшим браузером — для меня загадка.
Первая реакция — «мечта!». Вторая более скептическая. По сути та же таблица — ширина верхних ячеек зависит от ширины нижних, высота левых от высоты правых. При не столь очевидной табличности макета придётся вводить фиктивные ширины и высоты, которые будут использоваться где-то в спанах, но ни разу сами по себе. А значит те же мучения при вставке строки или столбца.
Больше радуют «черновые» возможности, прежде всего привязка к линиям. Но тоже не айс. Вот именованные бы линии, чтобы от вставки ещё одной вся вёрстка не лезла.
Больше радуют «черновые» возможности, прежде всего привязка к линиям. Но тоже не айс. Вот именованные бы линии, чтобы от вставки ещё одной вся вёрстка не лезла.
Текущий уровень поддержки CSS3 Grid браузерами различных версий можно посмотреть тут:
caniuse.com/#search=grid
На конец марта 2012 выглядело так:
Результат неутешительный. :( Но хоть Microsoft в кои-то веки делом занялся.
caniuse.com/#search=grid
На конец марта 2012 выглядело так:
Результат неутешительный. :( Но хоть Microsoft в кои-то веки делом занялся.
Как я понял, ИЕ неслучайно оказался первым. Идею с гридами в CSS3 сами мелкомягкие и пропихнули. :)
Спустя два года:
Ситуация 2017-го: CSS Grid Layout Module Level 1 — W3C Candidate Recommendation, 9 February 2017
Для тех, кто будет изучать css-grid-1 не по спецификации, а по этой статье, следует учитывать, что свойства grid-rows и grid-columns удалены из спецификации.
Используются только grid-template-rows и grid-template-columns
Поддержка спецификации на текущий момент
Для тех, кто будет изучать css-grid-1 не по спецификации, а по этой статье, следует учитывать, что свойства grid-rows и grid-columns удалены из спецификации.
Используются только grid-template-rows и grid-template-columns
Поддержка спецификации на текущий момент
Sign up to leave a comment.
Введение в CSS3 Grid Layout. Работаем с сетками