Microsoft — мировой лидер в области ПО и ИТ-услуг
185,27
рейтинг
26 марта 2012 в 14:45

Разработка → Введение в CSS3 Grid Layout. Работаем с сетками tutorial

Update: Часть сведений в данной статье устарели. Рекомендую свежие материалы на css-live.ru.

Введение


intuition game grid

Модуль CSS3 Grid Layout — это один из самых интересных, на мой взгляд, модулей в семействе CSS3. Официальная история модуля в виде черновика спецификации насчитывает сегодня чуть менее года. О предварительном анонсе еще с названием CSS Grid Alignment на TPAC 2010 Владимир Юнев писал еще в декабре 2010. Надо также отметить, что с чуть другим названием и несколько отличным синтаксисом, но с той же сутью, он был заявлен в качестве WD еще в 2007г. Сегодня работы по доводке модуля идут полным ходом, предварительная реализация уже есть в Internet Explorer 10 и есть надежда, что поддержка новых возможностей также появится в будущих версиях других популярных браузеров.

Зачем нужен Grid Layout?


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

В отличие от старых табличных подходов, основанных на использовании table, здесь не замусоривается семантика документа и представление четко отделено от содержания. В отличие от различных вариаций блочной верстки со становящимися при сколь-нибудь сложной структуре безумными и многоэтажными float'ами в сочетании с вручную просчитанными отступами, здесь описание стилей становится тривиально простым и прозрачным. В отличии от абсолютного позиционирования с привязкой к координатам, здесь сохраняется гибкость. В отличие от популярных сегодня css/js-библиотек для разметки по сетке путем указания соответствующих классов (взять хоть те же bootstrap или yui css grids), здесь не замусоривается привязка классов.

Сплошное удовольствие! Осталось только дождаться широкой поддержки :) Впрочем, если вы планируете делать приложения в стиле Metro для Windows 8 на html/js, ключевые возможности, описываемые в модуле CSS3 Grid Layout, уже работают — и можно двигаться вперед, используя удобные и практичные механизмы.


Основы


Чтобы быстрее разобраться с тем, как работает Grid Layout, давайте сразу же начнем с примера. Представьте себе, что вам нужно решить классическую задачу верстки трехколоночного макета с примерно таким содержимым:

<section>
    <header>Title</header>
    <nav>Menu</nav>
    <article>Content</article>
    <aside>Notes</aside>
    <footer>Footer</footer>
</section>


которое необходимо разнести на три колонки примерно вот так:

smaple grid layout

Это классическая задача, поэтому я не буду останавливаться на том, как она решается в случае использования уже традиционных подходов для многоколоночной блочной верстки. Давайте посмотрим, что можно сделать с помощью Grid Layout (я пропускаю браузерные префиксы в примерах, однако, на практике их нужно добавлять — для IE это -ms-).

Вот пример кода на CSS:
section {
    display: grid;
    grid-columns: 150px 1fr 200px;
    grid-rows: 50px 1fr 50px;
}

section header {
    grid-column: 2;
    grid-row: 1;
}

section nav {
    grid-column: 1;
    grid-row: 2;
}

section article {
    grid-column: 2;
    grid-row: 2;
}

section aside {
    grid-column: 3;
    grid-row: 2;
}
                        
section footer {
    grid-column: 2;
    grid-row: 3;
}


В самом простом варианте все, что нужно сделать, сводится к тому, чтобы указать в контейнере (section), что содержимое внутри него нужно располагать по сетке и задать виртуальную сетку, используя свойства grid-columns и grid-rows (чуть ниже я расскажу о том, какие значения они принимают). Далее для каждого элемента внутри достаточно сказать, где он должен располагаться.

using grid layout sample

И это все! Итого:

  1. Виртуальная сетка: grid-columns и grid-rows в контейнере
  2. Размещение элемента: grid-column и grid-row.


Теперь давайте разбираться в деталях и дополнительных возможностях.

Виртуальная сетка


Треки: строки и столбцы


Для создания виртуальной сетки, по которой в дальнейшем размешаются элементы, необходимо описать треки сетки (Grid Tracks) — строки и столбцы внутри сетки:

#grid {
    display: grid;
    grid-columns: 150px 1fr; /* два столбца */
    grid-rows: 50px 1fr 50px; /* три строки */
}


Линии сетки


Треки располагаются между линиями сетки (Grid Lines), которые, в свою очередь, находятся справа-слева и сверху-снизу от каждого трека:
grid lines

Чтобы задать, как именно элемент будет размещен по сетке, необходимо указать, к какой линии по вертикали и горизонтали он будет привязан:

#item {
    grid-column: 2;
    grid-row: 2;
}


grid item positioning

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

Растяжение на несколько ячеек


Чтобы растянуть элемент на несколько ячеек сетки, можно использовать свойства grid-row-span и grid-column-span:
#item {
    grid-column: 2;
    grid-column-span: 3;
    grid-row: 2;
    grid-row-span:2;
}


grid spanning

По умолчанию, оба свойства установлены в значение 1, что соответствует растяжению доступного пространства от указанной линии до следующей (+1).

Повторяющиеся треки


Часто бывает так, что предполагаемая для использования сетка содержит какой-то характерный шаблон:

#grid {
    display: grid;
    grid-columns:  24px 120px 24px 120px 24px 120px 24px 120px 24px;
    grid-rows: 1fr 24px 1fr 24px 1fr 24px;
}


grid tracks pattern

Было бы удобным описывать такие сетки в более компактном и прозрачном виде — и такая возможность есть! Пример выше можно описать так:

#grid {
    display: grid;
    grid-columns:  24px (120px 24px)[4];
    grid-rows: (1fr 24px)[3];
}


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

===

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

Единицы измерения


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

При описании ширины колонок и высоты строк (размеров треков) можно использовать следующие единицы и значения:
  • линейные размеры — стандартные единицы указания длины, определенные в модуле CSS3 Values and Units, например, pt, px, em, vw и т. д.;
  • проценты — размер трека в процентах от размеров контейнера с сеткой (хотя если высота или длина сетки зависит от контента, результат будет неопределенным);
  • доли (fraction) — неотрицательное число с последующей единицей измерения fr, размер каждой доли берется пропорциональным указанному числу (см. подробнее ниже);
  • max-content — ключевое слово для указания максимальной длины из максимальных длин элементов в треке;
  • min-content — ключевое слово для указания максимальной длины из минимальных длин элементов в треке;
  • minmax(min, max) — задает диапазон значений (принцип работы можно описать как minmax(p, q) = max(p, min(fill-available, q))
    — максимум из нижнего порога и минимума доступного пространства и верхнего порога);
  • auto — ключевое слово, эквивалентное minmax(min-content, max-content).


Доли


Давайте попробуем разобраться, как работают доли (fraction value)? Сетка занимает некоторое пространство по ширине и высоте. Оно может зависеть от контента, быть жестко фиксированным или занимать все доступное пространство во внешнем контейнере. Далее, при описании треков части колонок и строк вы можете явно задать, какого размера они должны быть, для еще какой-то части вы можете указать, что их длина зависит от контента.

Теперь, если из доступной длины, отведенной под сетку по вертикали или горизонтали, вычесть сумму всех таких явных или «контентных» длин, оставшееся пространство распределяется между остальными треками пропорционально указанным в них долях (размер доли, деленный на сумму всех таких долей):

fractions sample

На примере выше это три столбца c ширинами в соотношении 2:1:1 и две строки с высотами в соотношении 5:2.

Пример


В черновике спецификации приводится такой комплексный пример, позволяющий увидеть всю эту схему с разными типами значений сразу:
#grid {
    display: grid;
    grid-columns: 100px 1fr max-content minmax(min-content, 1fr)
}


Здесь определяются следующие линии (треки, они же колонки в данном случае):
  1. Стартовая первая линия.
  2. Линия в 100px от первой.
  3. Еще одна линия на расстоянии 1/2 оставшегося после всех рассчетов пространства — от второй линии.
  4. И еще одна линия, чье расстояние от третьей равно максимальному из размеров контента элементов в колонке.
  5. Наконец, последняя линия, расположенная от четвертой на расстоянии, равном либо минимальной длине элементов в колонке, либо 1/2 оставшегося пространства, смотря, что больше.


Тут есть еще небольшой нюанс относительно учета долей, которые оказались внутри функции minmax: они учитываются в общей сумме долей только если обозначены в максимальной позиции. Доли, обозначенные в минимальной позиции, считаются равными 0px. Подробнее тонкости рассчета смотрите в спецификации.

===
Следующим шагом мы попробуем разобраться, как элементы размещаются между линиями сетки (внутри ячеек).

Привязка элементов


Теперь, когда элементы «привязаны» к линиям сетки, возникает естественный вопрос: а как же они располагаются между линиями?

alignment to lines

Привязка элементов к границам ячейки контролируется с помощью свойств grid-column-align и grid-row-align. Для управления можно использовать следующие значения:
  • start
  • end
  • center
  • stretch

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

alignment to lines samples

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

Управление слоями


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

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

grid items overlaping

Чтобы управлять порядком отображения таких слоев, текущая версия спецификации расширяет возможности z-index, позволяя управлять слоями элементов внутри сетки.

Замечание: в предыдущей версии спецификации, на которую опирается текущая версия IE10 (platform preview 5), для этих целей было определено отдельное свойство grid-layer, чтобы не конфликтовать с z-index, однако, далее в процессе обсуждений в рабочей группе это решение было пересмотрено.

Пример использования:


#grid {
    display: grid;
    grid-columns: (1fr)[3];
    grid-rows: (1fr)[4];
}

#A {
    grid-column:1;
    grid-row:3;
    grid-column-span:2;
}

#B {
    grid-column:1;
    grid-row:1;
    grid-row-span:2;
    /* grid-layer: 10; */
    z-index:10;    
    margin-top:10px;
}

#C {
    grid-column:1;
    grid-row:1;
    grid-column-span:2;
    margin-left:50px;
}

#D {
    grid-column:2;
    grid-row:3;
    grid-row-span:2;
    grid-column-span:2;
    margin:10px 0 0 10px;
}

#E {
    grid-column:2;
    grid-row:2;                
    /* grid-layer: 5; */
    z-index:5; 
    margin: -20px;
}


grid layers sample

css3 grid library


Чтобы начать работать с сетками в браузерах, (еще) не поддерживающих модуль CSS Grid Layout, можно воспользоваться js-библиотекой eCSStender и расширением CSS3 Grid Alignment, обеспечивающими поддержку следующих свойств:
  • display: grid
  • grid-columns & grid-rows
  • grid-column & grid row
  • grid-column-span & grid-row-span

Пример работы можно посмотреть тут.

Немного о будущем, или какие еще возможности описаны в модуле


Наконец, давайте немного приоткроем двери в будущее и подглядим, какие еще возможности готовятся в модуле CSS3 Grid Layout.

Учтите, что на сегодня упоминаемые ниже возможности только описаны в черновике спецификации, но еще не имеют поддержки среди выпущенных браузеров (включая предварительные версии). Они также могут измениться в будущем в зависимости от реакции сообщества и рекомендаций рабочей группы CSS.

Указание конечной линии для привязки элемента


Опционально для привязки элемента к сетке можно указать не только начальную, но и конечную линию.

#item {
    grid-column: 2;
    grid-row: 2 4;
}

grid lines with end option

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

Именованные линии сетки


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

#grid {
    display: grid;
    grid-columns: "nav" "first" 150px "content" 1fr "last"; 
    grid-rows: "header" 50px "content" 1fr "footer" 50px; 
}

Далее при описании привязки элементов можно ссылаться на эти имена:

#menu {
    grid-column: "nav";
    grid-row: "content";
}

#header {
    grid-column: "content";
    grid-row: "header";
}

#article {
    grid-column: "content";
    grid-row: "content";
}


named grid lines

Также спецификация вводит 4 заранее именованных линии — вертикальные и горизонтальные start и end, фактически, обрамляющие всю сетку. Это полволяет, к примеру, расположить элемент «от второго столбца и до последнего», не задумываясь об общем количестве столбцов.

#menu {
    grid-column: 1;
    grid-row: start end;
}

#footer {
    grid-column: 2 end;
    grid-row: 3;
}


start and end grid lines

Именованные ячейки и шаблоны


Еще один способ размещения элементов по сетке заключается в использовании шаблонов, позволяющих описать виртуальную структуру блоков:
#grid {
     display: grid;
     grid-template: "ln"
                    "ma"
                    "ba"
                    "ff";

     grid-columns: auto minmax(min-content, 1fr); 
     grid-rows: auto minmax(min-content, 1fr) auto auto;
}


grid template sample

При этом для размещения элемента с прявязкой к той или иной виртуальной ячейке достаточно сослаться на нее соответствующим правилом:

#article {
     grid-cell: "a";
}


Такой подход оказывается особенно удобным, если в зависимости от различных условий, например, разрешения экрана, вам нужно менять расположение элементов и даже переделать саму сетку. В подобной ситуации Grid Layout хорошо сочетается с Media Queries:

@media (orientation: portrait) {
    #grid {
        display: grid;
        grid-template: "ln"
                       "ma"
                       "ba"
                       "ff";

        grid-columns: auto minmax(min-content, 1fr); 
        grid-rows: auto minmax(min-content, 1fr) auto auto;
    }
}

@media (orientation: landscape) {
    #grid {
        display: grid;
        grid-template: "ln"
                       "ma"
                       "mb"
                       "sf";

        grid-columns: auto minmax(min-content, 1fr); 
        grid-rows: auto minmax(min-content, 1fr) auto auto;
    }
}

#article {
     grid-cell: "a";
}


grid template for landscape

Обратите внимание, что привязка самой статьи к именованной ячейке при этом не меняется. (Ручки уже чешутся начать использовать, однако, ждем, когда это все реализуют в браузерах.)

Заключение


Я постарался дать в статье обзор ключевых возможностей модуля CSS3 Grid Layout. Надеюсь, они вдохновляют вас не менее, чем меня. :)

Напомню, что модуль продолжает развиваться, редакторы собирают отзывы от внешнего сообщества и внутри рабочей группы CSS. На действующую реализацию основного функционала можно посмотреть в Internet Explorer 10. Несколько интересных примеров можно найти на ietestdrive.com: The Grid System и Hands On: CSS3 Grid Layout:

Hands On: CSS3 Grid Layout

Также еще раз отмечу, что возможности Grid Layout, уже поддерживаемые движком IE10, также можно использовать при разработке приложений в стиле Metro на HTML/JS для Windows 8.
Автор: @kichik
Microsoft
рейтинг 185,27
Microsoft — мировой лидер в области ПО и ИТ-услуг

Комментарии (73)

  • +10
    > Осталось только дождаться широкой поддерки :)
    • –7
      Да, будем ждать поддержки сего чуда в других браузерах, ибо проприетарные свойства — не есть гуд.
      • +4
        Проприетарные свойства — это нестандартные свойства, реализованные в том или ином браузере.

        В данном случае свойства стандартные и открытые для реализации в других браузерах, в частности, спецификация включает описание алгоритмов для расчета отдельных параметров. Обсуждение всего этого великолепия идет абсолютно открыто в рабочей группе CSS.
        • 0
          Да, вы совершенно правы. Просто не знаю, как назвать таковые свойства в одно слово. Вот и ляпнул.
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Точно. Спасибо.
    • 0
      Вы правы, когда нибудь мы доживем до этого. А пока /me ушел верстать под ie6…
      • 0
        сочувствую.
  • +2
    Добавьте в статью информацию о том, какие браузеры уже это поддерживают
    • 0
      Судя по этой ссылке — работает только в IE10. Что ожидаемо. Хотя если появится в остальных — было бы здорово.
      • 0
        в баг трекере Webkit висит таск, может и реализуют.
  • +1
    Круто! По похожему принципу происходит размещение элементов в XAML (в контейнере Grid), так что тем, кто знаком с WPF/Silverlight все должно быть очень привычно.
  • +3
    На мой взгляд, все, чего не хватает связке HTML/CSS — это нормальной системы layout'ов. То, о чем написано в этой статье, было бы прекрасно. К сожалению, это не мейнстрим, причем далеко не мейнстрим, и нигде не поддерживается, так что пока ждем лучших времен :)
    • +1
      Еще нормальные контролы нужны!
      • 0
        Верно, но это сложнее. Хотя бы все HTML5-ные инпуты сделали нормальными. Форматы ввода данных ведь не поменяются.
  • –10
    «Чтобы быстрее разобраться с тем, как работает Grid Layout, давайте сразу же начнем с ...»
    Предлагаю начать с того, что у пользователей IE в Windows Vista и Windows XP всё это никогда не будет работать, и на этом, собственно, можно закончить статью.
    • +1
      Когда дойдёт до реализации во всех браузерах, про XP уже все забудут. :)

      Хотя, конечно, хочется верить в чудо, что это случится раньше…
      • –3
        IE6 сколько уже лет хоронят, а он всё никак до конца не умрёт. XP с IE 8 будет умирать ещё дольше.

        Что же до реализации, то с современными темпами развития стоит вебкиту или геко ввести поддержку этого черновика, остальные за скорее всего за месяцы подтяутся.
        • +4
          ИЕ6 скорее мёртв, чем жив. На него же даже Гугл положил большой и волосатый (поиск-то работает, то куча сервисов — или вообще никак, или в урезанном виде). Если сайт не для Китая, то можно со спокойной душой забить. Лично я и на ИЕ7 обычно забиваю.

          Интересно, почему такая важная фича как grid layout обходится стороной всеми браузеарми кроме ИЕ. За ИЕ я, конечно, безумно рад, но всё же…
          • +4
            Я бы сказал, что одна из самых важных! Больше половины костылей/хаков для HTML+CSS из за отсутствия человеческой системы лэйаутов и гридов.

            Какого черта нормальное позиционирование + растягивание + масштабирование элемента реализуется через какое-то невообразимое количество разных хитростей, css-хаков, отрицательных паддингов, зашкаливающих margin-ов, абсолютным позиционированием с указанием запредельной высоты, и вставкой всего этого в элемент с overflow-hidden, магией с обтеканием (float) и переносом (clear) и все равно решение будет «недостаточно гибким». И все это вместо возможности (как в проприетарных MXML или XAML) указать точные циферки и все.
            • 0
              теоретически можно указать всему position: absolute и наслаждаться циферками.
          • 0
            знали бы Вы как я злился на отсутствие поддержки IE6, когда потерял гуглофон в Китае, а единственной найденной кафешкой управлял отель и стоял на всех компьютерах только IE6, с запрещенным скачиванием файликов :)
            хотя в корпоративную почту меня еще пустили и дали сменить пароли и проч., а вот на всяких домашних ящиках увы и ах, нет!
            и мне по большому счету было наплевать на то какой там ui красивый и удобный — мне нужно было лишь сменить пароль и только. даже если бы верстка поехала.
            • 0
              В данном случае похоже злиться не нужно будет. Просто будут идти все блоки страниц в нормальном потоке сверху вниз.
            • 0
              так это вам на китайцев злиться надо.
          • 0
            Возможно, вы удивитесь еще раз! Но они это реализовали именно потому… что другие браузеры этого не сделали! А вовсе не потому, что они вдруг полюбили кроссбраузерность, кроссплатформенность, общедоступные стандарты или вообще решили, что пора стать хорошими!
            • 0
              Как я понял, этот grid layout мелкомягкие сами и изобрели, а потом успешно пропихнули в стандарты. :) Всё это «ж-ж-ж» неспроста.

              Но объяснять добавление grid layout’а исключительно желанием добавить уникальных для ИЕ фич будет не совсем корректно: какой-никакой, а это стандарт, с жёстко описанными алгоритмами. Когда ИЕ10 выйдет, фича уже давно будет в других браузерах. Старыми грязными тактиками с вендорными фичами здесь и не пахнет.
              • 0
                Речь вовсе не о проприетарщине, а о пиаре! Внедрение новой фичи — это информационный повод для проповедников пятого веба написать что-то в свой блог. Просто МС, впервые за долгие годы, оказался на таком перегретом рынке и вынужден действовать старыми добрыми конкурентными способами.
                • 0
                  Вы так говорите, как будто пиар — это плохо.

                  У мелкомягких пиар ещё вполне приятный, с очевидными плюшками. Вы вспомните, как сначала ФФ, потом Хром впихивали всем подряд на всех сайтах. Мне, как пользователю Оперы и веб-разработчику, у кого установлены все браузеры, от этого тошно. Ненавижу.
        • 0
          Тьфу-тьфу-тьфу, но ИЕ6 таки отмирает. Похоже, физически — вместе с компами, на которых он был установлен. Ему 11 год уже пошел, всё же.
  • +2
    Вот она, вёрстка моей мечты!!! :-)
    • 0
      Когда-то вёрсткой мечты были блоки.

      Ещё раньше мечтой был CSS.

      Интересно, а что будет после grid?
      • 0
        Ничего не будет. А зачем? Верстка текста — это не та задача, которую нужно вечно допиливать, расширять и углублять.
        Когда полностью реализуют всё, что планируют в html5 и css3 — это будет универсальный монстр на все случаи жизни, от простеньких текстов до интерфейсов любых программ и 3D-игр.
        • +4
          html5 и css3 — это будет универсальный монстр на все случаи жизни

          HTML4 и CSS2 не с такой же идеей создавались? :)
    • 0
      … которая отличается от старых добрых таблиц только тем, что информацию о расположении элементов перенесли туда, где ей и положено быть — в CSS. Не прошло и 15 лет, как наконец-то довели html-версту до ума.
      Новое — это хорошо забытое старое, да;)
      • +1
        Всё-таки несколько новых фич относительно старых таблиц есть: шаблоны для повторения, сложнее логика вычисления размеров (min, max и др.), несколько блоков в одной ячейке, плюс фишки из далёкого будущего (именованные ячейки, шаблоны в виде строк).

        Но таки да, это старые-добрые таблицы. Вернулись к истокам.
        • +1
          Это к сожалению никак не таблицы. И воспроизвести «резиновость» таблиц не удастся.
          Уникальность таблиц состоит в том что каждая ячейка это устанавливает так называемый BFC — block formatting context. Т.е. в условиях overflow:visible сродержимое ячеек друг на друга «не залазит». Здесь же — легко.

          • 0
            Размеры ячеек в Grid Layout могут подстраиваться под контент.
            • +1
              Да? А как? Например есть #grid из одного столбца/колонки:

              #grid1x1 { 
                grid-rows: 1gr
                grid-columns: 1gr
              }


              И у него пара-тройка children. Под какой контент и как оно будет подстраиваться?
              • 0
                А в чем смысл делать сетку из одного столбца и одной строки?

                А так вы можете указать размер, например, в виде max-content.
                • 0
                  Это для примера.

                  В одном placeholder Grid Layout допускает несколько элементов. Как они будут подстраиваться? Или как грид их будет подстраивать? Как сказать
                  все элементы в этом placeholder должны иметь одинаковую ширину и эта ширина должна быть не меньше max-width самого широкого?

                  А вообще смыслов таблиц из одной ячейки может быть много.
                  Например иногда имеет смысл написать так:

                  pre { display:table-cell; }


                  тогда ширина pre будет равна самой широкой строки ибо table/cell фактически ведет себя как если бы он объявлен как width:max-content
                  • 0
                    > Как сказать все элементы в этом placeholder должны иметь одинаковую ширину и эта ширина должна быть не меньше max-width самого широкого?

                    Если я правильно понял вопрос, надо при определении колонки сказать, что ее ширина должна быть max-content, либо minmax(max-content, 1fr).
                    • 0
                      max-content это ширина самой колонки, но никак не элементов в ней. Ширина элементов определяется в CSS свойствами min/max-width, width и box-sizing. Соответсвенно высота min/max-height и height.

                      Еще раз: Grid Layout разрешает разместить несколько элементов внутри одного placeholder. Скажем мы поместили три таких элемента.

                      Как сказать «все три этих элемента должны иметь ширину равную ширине этого placholder, и быть расположенными один за одним вертикально занимая всю высоту этого placeholder»?
                      • 0
                        В ячейку запихиваем один блок, а в него кладём обычные дивы, не?
                      • 0
                        Так вы скажите элементам внутри колонки, чтобы у них ширина была 100% — они займут все пространство в колонке (только надо отступы учитывать).

                        Если внутри ячейки нужно внутреннее деление, то подозреваю, что тут либо внутреннюю сетку нужно делать, либо тот же flexbox использовать.

                        Ну либо, как написано выше — в ячейку кладем один блок, а внутрь него дивы, высоту которых делаем, скажем 33% с копейками.
  • –8
    Какое-то очень-преочень натянутое и избыточное решение для простого трехколоночного макета С МИНИМАЛЬНОЙ ВЫСОТОЙ СТОЛБЦОВ 100%, они ведь это имели в виду?
  • –5
    То все фигня. Это будет поддерживатся однозначно не скоро. А сейчас лучше не мечтать, а идти верстать страницы со всякими 960grid, bootstrap и т.д.
    • 0
      Почему однозначно нескоро? Видится мне, что grid layout — это тот же table layout, только немного по-другому записанный и с парой дополнительных фич. Реализовать основу (grid, columns, rows, column, row, span — как в ИЕ) — это плёвое дело. Добавить align и разобраться с z-index. Со всякими min/max может быть веселуха, но без них на первых порах можно спокойно прожить.

      Скоро будет, скоро. Браузеры морально не смогут себе позволить, чтобы ИЕ их так серьёзно обходил. :)
    • 0
      а ведь ты был прав… прошло 4 года, а гриды пока массово не используют. Да и поддержка в браузерах еще не полная, хотя и реализована на 99%.
  • 0
    Стоит бы отметить что grid layout это не position:static размещение, а вариация position:absolute|fixed.

    Собственно grid layout можно воспрозвести руками и сейчас задав position:fixed всем элементам. Управляя left/top/right/bottom можно воспроизвести start/end/stretch позиционирование. Но position:fixed хотя бы можно управлять z-index.

    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        image
        таки налезают
      • +1
        Ну во первых by design элементы могут рисоваться поверх соседей.
        А во вторых представим себе 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 и пр.

        • 0
          и скажем в первой колонке оказался элемент с 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).
          • 0
            Во первых 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 нет.

            • 0
              Но вы можете явно сказать, что размеры колонки могут зависеть от размера содержимого, раз уж вы рассчитываете, что иногда, например, из-за увеличенного шрифта контент может вылезти за рамки.

              Если так, то вы можете явно указать, к примеру, что ширина колонки должна быть minmax(150px, max-content).
        • НЛО прилетело и опубликовало эту надпись здесь
  • +3
    Grid — это, конечно, прекрасно. Но синтаксис разочаровывает. Избыточен и неуклюж.

    Вместо отдельных свойств 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 не так очевидно, какая ячейка будет конечной (в моем варианте указывается первая и последняя ячейка)
    • 0
      Также хотелось бы поругать grid-column-align и grid-row-align. Опять же нужно универсальное свойство grid-align. Далее, мне не нравятся значения start и end. Использование вместо них top (bottom) и left (righ) будет лучше, потому что:
      1) Это нагляднее
      2) Будет лучше сочетаться с синтаксисом других свойств, например, background-position.
      3) На мой взгляд, если разработчику в блоке с арабским текстом понадобиться прибить блок справа, то он просто напишет right — какие проблемы?
    • 0
      Ах да, Template Layout — это рак, ИМХО. И зачем Grid его приютил?
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          У него крайне чужеродный синтаксис.

          Скорее всего, новый вариант будет заменой тому черновику. Вообще странно, что этот Grid уже несколько раз протаскивают с разными названиями: Grid Alignment, Grid Positioning, Grid Layout…
    • 0
      «display: grid» избыточно, потому что «grid-columns / grid-rows» может быть только у грида — можно вообще убрать. Так как гридов не должно быть много, а значения свойств (особенно при использовании именования) будут длиннее имён свойств, то большой экономии не вижу.

      Краткую запись на замену спанам собираются добавить, это упомянуто в статье (будет как у вас, но без точек).

      Насчёт grid-position совершенно согласен, делать на два отдельных свойства смысла мало. Не знаю, зачем так сделали.
    • 0
      А потом писать нечто типа такого?
      $("#some-element").css(«grid-position», change_end($("#some-element").css(«grid-position»), 3))
  • +2
    Это должно было быть в CSS 1.0.
    Почему в 2012 году нормальные инструмены для верстки по сетке, поддерживаются только одиним, да и то не вышедшим браузером — для меня загадка.
  • +1
    Первая реакция — «мечта!». Вторая более скептическая. По сути та же таблица — ширина верхних ячеек зависит от ширины нижних, высота левых от высоты правых. При не столь очевидной табличности макета придётся вводить фиктивные ширины и высоты, которые будут использоваться где-то в спанах, но ни разу сами по себе. А значит те же мучения при вставке строки или столбца.

    Больше радуют «черновые» возможности, прежде всего привязка к линиям. Но тоже не айс. Вот именованные бы линии, чтобы от вставки ещё одной вся вёрстка не лезла.
  • 0
    Текущий уровень поддержки CSS3 Grid браузерами различных версий можно посмотреть тут:
    caniuse.com/#search=grid

    На конец марта 2012 выглядело так:
    image

    Результат неутешительный. :( Но хоть Microsoft в кои-то веки делом занялся.
    • +1
      Как я понял, ИЕ неслучайно оказался первым. Идею с гридами в CSS3 сами мелкомягкие и пропихнули. :)
    • +1
      Спустя два года:
      image
      • 0
        Не убедили, видать. :)
      • 0
        В 32 лисе добавили экспериментально, включается через layout.css.grid.enabled
        • 0
          В хроме кстати оказывается теперь тоже есть экспериментально и тоже выключено по умолчанию. Видимо обкатывают.
      • 0
        Спустя ещё почти год: «всё совсем печально», а IE — «частичная поддержка под грузом обратной совместимости»…
        • НЛО прилетело и опубликовало эту надпись здесь

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

Самое читаемое Разработка