Представлен стандарт CSS Grid Alignment Level 3

    image

    Два дня назад я представил на Хабре задачу по компоновке силами CSS. Задача привлекла небольшое внимание разработчиков и было представлено несколько разных решений, в том числе такие, которые практически точно решают задачу.

    Пообещав представить оригинальное решение я немного слукавил, потому что это решение представляет собой использование нового стандарта W3C CSS Grid Alignment Level 3, который был представлен в начале ноября на мероприятии TPAC 2010.

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

    CSS Grid Alignment Level 3

    Вначале стоит пояснить, что это за стандарт. CSS Grid Alignment Level 3 представляет собой новую модель компоновки предложенную в рамках стандарта CSS3. По идее новый стандарт должен предложить упрощенный, стандартизированный путь для построения различных, в том числе сложных, моделей компоновки веб-страниц.

    Если вы взгляните на варианты решения задачи предложенной мной, то увидите массу хаков и использование операторов CSS не по их прямому назначению. Для решения применялись float: left, отрицательные значения margin, position: relative, overflow: hidden. Для разработчиков это стало настолько привычным делом, что я уверен многие считают такие решения при построении модели компоновки страницы нормальным делом.

    Однако, я думаю многим хотелось бы увидеть с развитием веб-стандартов более простые, интуитивные пути решения задачи. И CSS Grid Alignment Level 3 предлагает один из таких путей. Рассмотрим пример:

    ScreenClip(17)

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

    ScreenClip(18)

    Чтобы вы делали для решения этой задачи компоновки без нового стандарта? Расчет процентов, работа с margin, float и т.д. Новый стандарт предлагает совершенно другой стиль.

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

    Кроме того, обратите внимание, что с новым стандартом CSS Grid Alignment Level 3 вам нет необходимости соблюдать порядок следования вложенных блоков, компоновка не зависит от порядка тегов в разметке.

    Адаптация под свободное место

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

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

    ScreenClip(19)

    Код в этом случае будет следующим:

    ScreenClip(20)

    Обратите внимание на grid-row-align и grid-column-align – это возможность указать выравнивание блока внутри сетки.

    Что такое fr и minmax?

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

    Например, minmax(300px, 500px). Это абсолютные значения функции. Большую гибкость дают относительные min-content и max-content, которые принимают значения минимальной ширины элемента в блоке и максимальной.

    Еще больше гибкости дает использование новой величины измерения – фракции. Фракция – это доля от свободного места среди всех блоков претендующих на это место. То есть есть таких блоков два, то 1fr у блока – это половина от свободного места.

    Таким образом, следующий пример говорит нам что в сетке должно быть 4 колонки:
    1. 100 пикселей
    2. одна доля от свободного места
    3. ширина нужная для максимального контента
    4. гибкая колонка с минимальной шириной в минимальный контент, максимальной – в одну долю от свободного места
    ScreenClip(21) 

    Так как в разделении свободного места участвуют две колонки 2 и 4, то для второй будет предложена половина свободного места после вычета 100 пикселей первой колонки и ширины максимального контента в третьей колонки.

    Независимость от исходного HTML

    В тексте стандарта рассматривается пример, который показывает важность независимости результата компоновки от порядка следования блоков в разметке HTML. Например, два варианта ниже – результат смены CSS, но не разметки HTML.

    ScreenClip(22) ScreenClip(23)

    Подробности этого смотрите в разделе 2.3 Source Independence.

    Решение задачи

    Как же выглядит решение задачи представленной мной ранее с помощью нового стандарта?

    image

    На самом деле – очень наглядно и изящно:

    ScreenClip(24)

    Рассмотрим что здесь определяется:
    1. определяется сетка с 2 колонкам и 2 строками, причем и строки и колонки должны занимать равные доли относительно свободного места;
    2. для блока А говорится, что он располагается в первой колонке с растяжением до второй, во второй строке. Плюс, блок А должен выравниваться по низу строки;
    3. для блока В говорится, что он располагается в первой колонке первой строки, причем ему присваивается номер слоя = 10;
    4. для блока С говорится, что он располагается во второй колонке первой строки, причем выравнивается по верху строки, плюс к нему применятся отрицательное значение margin;
    5. для блока D говорится, что он располагается во второй колонке второй строки, причем выровнен по правому краю колонки и верху строки;
    6. для блока E говорится, что он располагается в первой колонке первой строки при этом растягивается на две строки и две колонки, при этом выравнивается по центру колонок и центру строк. Кроме того, ему присваивается номер слоя = 5.
    Сравните это решение, которое оперирует исключительно терминами компоновки с решением, которое предлагается сегодня с манипуляциями явными значениями процентов целого ряда свойств left, top, margin и других, установкой position, float и overflow. На мой взгляд все стало гораздо лучше.

    Заключение

    Стандарт CSS Grid Alignment Level 3 пока выложен в первой черновой редакции. Его даже нельзя попробовать, поскольку пока нет реализаций в браузерах. Но на мой взгляд, этот стандарт выглядит реально полезным нововведением, который решает явные проблемы, с которыми сталкиваются веб-разработчики сегодня.

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

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 111

      –1
      По-моему верстать блоками таблицу, это всё равно что верстать таблицей блоки.
      PS У table, tr и td display:block уже давно можно установить…
        +26
        вы не поняли? это не для того, чтобы верстать таблицу блоками. это для того, чтобы создавать разметку страницы.
        вообще, давно надо было придумать подобный стандарт, ато эти костыли с флоатами, позициями и дисплеями на самом деле ужасные.
        хотя все попытки до этого были на самом деле в меру отвратительными
          +2
          За деревьями можно не увидеть леса.
          То, о чём говорил aavezel имхо.
          Откройте примеры ну скажем в Chrome и ужаснитесь. Про мобильные браузеры и прочую кроссбраузерность лучше и не думать. Вот глядя на такое думаешь — уж лучше бы он таблицами верстал.

          А стандарт CSS Grid Alignment Level 3 конечно интересен. Возможность тасовать местами блоки, прозрачно и наглядно задавать размеры в CSS это просто замечательно. Но когда это будет работать во всех браузерах так-же надёжно как таблицы? Ведь grid это всего-лишь сетка… табличная сетка.
          +2
          Таблица, которая table — элемент для использования в текстовых блоках, а не в представлении. И display:block — ещё более грязный хак.
          0
          ну, неплохо на самом деле
          • UFO just landed and posted this here
              +2
              Представлен не стандарт, а editor's draft, то есть черновик, который после длительного обсуждения (мы все знаем как быстро делаются дела в w3c) возможно (!) станет официальной рекомендацией.
              Не только после длительного обсуждения, но и только после того, как, по крайней мере, будет две независимых реализации предложенного стандарта.
            +1
            Представлен, то представлен. А какие браузеры поддерживают?
              +2
              Его[Стандарт] даже нельзя попробовать, поскольку пока нет реализаций в браузерах.
                +1
                раздел «Заключение» в топике
                  0
                  Да это понятно. Но сколько времени пройдет, пока они его опрувят да выложат. Да и пока разработчики браузеров подключат. Думаю можно забыть лет на 10
                    0
                    вот так всегда(
              0
              Идея хороша, но вот синтаксис пока кажется сложноватым. Возможно, просто нужно привыкнуть.
                +3
                Кто верстал таблицами, больших затруднений не испытает :)
                  +2
                  затруднения испытают те, кто использовал таблицы для табличных данных
                  0
                  да что тут сложного, по моему все предельно понятно — посмотрите еще раз последний пример.
                  +3
                  а зачем код вставлен картинками?
                    0
                    да и еще без подсветки
                      0
                      он взят из черновика стандарта, можно копипастить оттуда, только пока смысла в этом все равно нет
                        +1
                        ну всё-равно читать приятнее. да и при обсуждении скопировать можно.
                        –1
                        А чем его подсветить, по-вашему?
                          +9
                          <source code="css">
                          

                          /* css is here */
                          elem {
                              background : red;
                              color      : black;
                          }
                          

                          </source>
                          <source code="html">
                              <!-- HTML CODE IS HERE -->
                          </source>
                          
                            0
                            Ну да, отлично подсвечивает комментарии и теги, т.е. то, чего в приведенном коде нету вообще.
                              +3
                              зато оно копируется, нормально изменяется размер колёсиком мышки и устанавливается такой шрифт, который лучше всего смотрится на моём компьютере.

                              а какие преимущества у картинки?
                        +1
                        Потому, что он всё равно вам не пригодится :)
                          0
                          ну ведь не получится теперь скопировать кусок кода, кинуть другу в аську и сказать: «смотри, хрень какую придумали!»
                            +1
                            Скопируйте отсюда: webstandardsdays.ru/2010/06/26/pres/layout/ — там много всякой хрени )
                              0
                              Ну это придерательство, можно и адрес поста дать.
                                0
                                придираюсь я, или нет, но зачем вставлять код картинками, а не текстом? хотя бы одно преимущество.
                          +10
                          Ложка дорога к обеду. Они с этим стандартом опоздали лет так на 10. Хотя несомненно он облегчит жизнь верстальщикам.
                            0
                            Из всех предложений вариант могилевского, т.е. этот, по-моему, самый крутой.
                              0
                              Очень интересно. В предвкушении.
                                +1
                                2012 год, MS IE10 поддерживает CSS Grid Alignment Level 3, MS Expression Blend 6 среди типов проектов имеет «Web-page» и кнопочку Save as HTML…
                                  +2
                                  "… а в декабре того же года по предсказанию цивилизации Майя случается конец света."
                                  ага, так и будет.
                                    +1
                                    На самом деле ИМХО этот формат очень четко отражается на модель описания колонок в XAML…
                                      0
                                      Это у вас Reflection русского языка
                                        0
                                        Это как? %)
                                          +1
                                          Ну… с первого захода я не понял, что вы хотели написать «на такой формат описания табличной модели разметки очень чётко ложится модель описания колонок в XAML» :)
                                            0
                                            Не написать, а донести мысль. Извините.
                                      +1
                                      Напоминает 99 год и FrontPage :)
                                        +1
                                        Да вы оптимист. Я думаю будет так: «IE14 — Новейший инновационный браузер от Microsoft: CSS3(99%) CSS4(24%), grid(98%), HTML5(100%), HTML6(0%)».
                                          +10
                                          CSS2 (81%)
                                            –9
                                            шутка не смешная, CSS2 поддерживается на 100% в ie8
                                              +11
                                              но это не значит, что он будет поддерживаться в ie14, в этом и шутка ;)
                                                +1
                                                принято :-)
                                                +3
                                                Например, свойство «text-shadow», входящее в CSS2, к сожалению, так до сих пор ИЕшечкой и не поддерживается. Так что всё-таки не на 100%, как бы этого ни хотелось.
                                                  +1
                                                  Формально говоря, в CSS2.1 text-shadow нет.

                                                  reference.sitepoint.com/css/text-shadow
                                                  text-shadow was originally specified in CSS2 but removed from CSS2.1. It’s currently also included in the CSS3 Text module.
                                                    +1
                                                    О как. Не знал об этом, спасибо :)
                                                  +1
                                                  CSS2 ни одним браузером на 100% ещё не поддерживается, даже на уровне бумаги, я уже не говорю про реальность.
                                              0
                                              Какая-то у вас несмешная шутка вышла. Пройдите по ссылке: www.w3.org/TR/css3-grid/
                                              Посмотрите кто автор.
                                                +1
                                                Микрософтовцы :)

                                                Ну фигля, надо же HTML5 хотя бы до уровля первого Silverlight-а дотянуть :)
                                              0
                                              2012 год,… веб-разработчикам всё ещё приходится ставить костыли в код для IE6.
                                              Извините, что разрушил построенную вами идилию.
                                              0
                                              Это очень полезная плюшка. С этим можно будет легко строить модульную сетку.
                                              • UFO just landed and posted this here
                                                  +4
                                                  CSS Grid Alignment Level 3
                                                  dev.w3.org/csswg/css3-grid-align/

                                                  Editors:
                                                  Alex Mogilevsky, Microsoft Corporation
                                                  Phil Cupp, Microsoft Corporation
                                                  Markus Mielke, Microsoft Corporation
                                                  Daniel Glazman, Disruptive Innovations

                                                  Есть сомнения, что IE не будет поддерживать…
                                                  • UFO just landed and posted this here
                                                      0
                                                      И не забываем, что на XP максимум можно поставить IE8.
                                                      • UFO just landed and posted this here
                                                        –2
                                                        Именно поэтому я не пользуюсь addEventListener, все равно в IE ниже девятки его нет, а ее на XP поставить нельзя. Array.indexOf я тоже презираю по этой причине.
                                                        А совсем недавно я видел машину, на которой стоят IE4.0 и возможности поставить что-то новее нет. С тех пор я не использую ajax.
                                                          +2
                                                          Осталось только посмотреть на Lynx и забыть про CSS и JavaScript.
                                                            0
                                                            =) Как знал, что топик надо было публиковать до этого комментария.
                                                            Все равно никогда не буду пользоваться тегом irony и попсовой картинкой.
                                                    0
                                                    Очень просто и красиво, ещё бы браузеры данную спецификацию поддерживали одинаково…
                                                      0
                                                      я так понимаю, что после введения стандарта работать будет только в новых браузерах. для старых так и придется костыли использовать.
                                                        +1
                                                        это можно сказать про любое нововведение в принципе
                                                          0
                                                          Это нововведение, ИМХО, легко эмулируется через behavior.
                                                          0
                                                          Довольно неплохо, решает много проблем.
                                                          А то эти танцы с float бубном задолбали.
                                                            +1
                                                            А как правильно тогда размеры блоков указывать? В тех же процентах?
                                                            В решении не увидел
                                                              –3
                                                              размеры задаются сеткой либо являются резиновыми
                                                                0
                                                                ну вот в данном примере сетка имеет размеры 1fr. Тогда и блоки такие же должны были получится. Разве нет?
                                                                  –3
                                                                  а. ну да, пример не показывает размеров блоков. естественно вы можете задавать их как хотите. блок А впрочем не имеет установленных размеров, а вот у D скорее всего задана ширина (высота определяется содержимым)
                                                              +1
                                                              Читая вспомнил как раньше верстал таблицами. Принцип тот же, просто разметка проще и логика в css перенесена. Новое это хорошо забытое старое.
                                                                +2
                                                                Это невменяемый звиздец. Терраинформатика уже несколько лет борется за то, чтобы ввести нормальные вменяемые способы layout'а, которые вырыжаются ровно в двух новых свойствах: %%units и flow. Но у w3c свой путь, который отрицает всякую логику.

                                                                  –2
                                                                  Согласен, на первый взгляд у терраинформатики невменяемый звиздец.
                                                                  У них явная сетка, у микрософта — неявная. При неоднозначном отношении к микрософту вообще, этот проект спецификации — крутой.
                                                                    +1
                                                                    Это у МСа неявная сетка? :))))))

                                                                    #grid{ display: gird, grid-columns:… } — это неявная сетка? :)))

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

                                                                    А w3c еще прелагает www.w3.org/TR/css3-flexbox/, www.w3.org/TR/css3-multicol/ новую единицу gr в www.w3.org/TR/css3-grid/

                                                                    Не говоря уже о страшном страхе под названием www.w3.org/TR/css3-layout/

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

                                                                    И все ради того, что на 99% покрывается введением вменяемых %% и flow
                                                                      +1
                                                                      Разумеется типы сеток я перепутал :)
                                                                      Но это не отменяет того, что предложенный проект спецификации от микрософта лучше.
                                                                      У него есть серьезное преимущество (которое в корне отличает его от таблиц, так что ничего не вид сбоку:) — располагать элементы на странице можно абсолютно независимо от их расположения в исходном коде. Если на странице не нужен один из блоков, то явная сетка даже не заметит, что он не приехал в коде.
                                                                      Что-то мне подсказывает, что если бы это предложение внесла другая компания, реакция бы сильно отличалась.
                                                                        0
                                                                        > У него есть серьезное преимущество (которое в корне отличает его от таблиц, так что ничего не вид сбоку:) — располагать элементы на странице можно абсолютно независимо от их расположения в исходном коде.

                                                                        Согласен

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

                                                                        У меня остались бы такими же :) Я тут краем глаза давно слежу за развитием событий (даже периодически почитываю публичную рассылку w3c). Там творится трэш и угар — каждый тянет одеяло на себя, а бОльшая часть народа вообще, кажется, с другой планеты.

                                                                        На фоне всего этого конкретно данное преложение — еще торжество разума (во всяком случае тут виден практический подход к проблеме)
                                                                    0
                                                                    Надо почитать. Их мысли меня зацепили.
                                                                      0
                                                                      У автора есть несколько здравых идей, но, несмотря на то, что он является приглашенным экспертом w3c, он лишь один из многих
                                                                    –1
                                                                    зачем ввели grid-layer, когда есть z-index?
                                                                    представляю, сколько проблем добавится с абсолютным позиционированием элементов, когда с ним и так то не очень гладко.

                                                                    и еще, попытка динамического добавления строк обречена на провал — придется пересчитывать все grid-row у всех нижележащих ячеек, причем делать это в css/style?!

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

                                                                    лучше бы ввели выражения в css, тогда модульные сетки можно было бы программировать на цсс, находясь в рамках традиционной блочной модели.
                                                                      +2
                                                                      Вы ничего не поняли из статьи.
                                                                      0
                                                                      Как будет вести себя блок, у которого указана ширина max-content и содержащий абзац текста?

                                                                      А вообще красиво (по сравнению и с table, и с float и прочими хаками), но я бы предпочёл прямое задание каждой ячейки сетки, а не grid-row-span (может аллергия на таблицы сказывается :) ).

                                                                      Жаль, что непонятно когда это будет поддерживаться, в IE9, по-моему, не увидим :(
                                                                        0
                                                                        афигенно! отпадает необходимость в хитрых фреймворках основанных на модульных сетках, остается только спросить у дизайнера какой модуль он брал, прописать его в стилях и вуа-ля… Печально что ждать такой песни еще очень долго (
                                                                          +1
                                                                          Не фонтан. Очень много вопросов возникает, так как этот стандарт вообще меняет логику верстки. Неизвестно как и на что он будет влиять, неизвестно как будут дела обстоять с разными браузерами. Будет какой-нибудь косячок в отображении одного из браузеров и вся разметка поедет. И непонятно чем float неугодил. Разметку блоков как на первом примере я накидаю за пару минут. Да, css будет побольше, зато никаких заморочек, никаких проблем с кроссбраузерностью. CSS Grid Alignment Level 3 имхо может пригодиться только для всяких извращений, как в задачке, опубликованной ранее, но так изгаляться с позиционированием блоков приходится крайне редко. То есть пример синтетический и не показывает практическую необходимость нового стандарта.
                                                                            +2
                                                                            Вы консерватор.
                                                                              0
                                                                              >И непонятно чем float неугодил.

                                                                              Для меня главный минус использования float и прочих современных «хаков» — зависимость html кода от сетки модулей, не решается задача разделения содержания и его представления. Думаю предпоследнюю картинку с резиновой вёрсткой весьма затруднительно будет сверстать в виде шести div'ов в произвольном порядке прямо под body, особенно в случае резиновой вёрстки для каждого блока в обоих направлениях, так чтобы первый и второй варианты получались только сменой css.
                                                                                0
                                                                                А зачем это нужно?
                                                                                Зачем вообще людям размещать блоки не по порядку?

                                                                                Если уж разделять представление от содержания, тогда уж легче данные начать хранить не в HTML-е
                                                                                  0
                                                                                  Чтобы перетащить блок в другое место на экране, не трогая его в html коде, в частности полезно при создании скинов.

                                                                                  Хранить не в html? А в чём? XML+XSLT также потребует связанных html+css
                                                                              0
                                                                              Действительно, всё достаточно просто и понятно. Но всё равно где-то должно быть "..., но" и у этого способа.
                                                                                0
                                                                                совместимость…
                                                                                +3
                                                                                Если бы не юзернейм автора, не догадался бы, что топик про IE!)) Отличная маскировка :D
                                                                                  0
                                                                                  ок, ждем js-хаков реализующих данный стандарт хотя бы начерно, а там и браузеры подтянуться…
                                                                                    0
                                                                                    На РИТ-2010 есть хороший доклад по всем трём предложениям по layout в CSS3:

                                                                                    +1
                                                                                    К сожалению, очередная красивая, но неприменимая на практике фантазия.
                                                                                    Допустим даже, вот прямо завтра 1-2-3 передовых браузера включат поддержку такой разметки — и что? Как быть со старыми?

                                                                                    В последнее время идёт такая тенденция, что на совсем уж старых уродцев (типа IE6) какбэ можно подзабить. И понять разработчиков можно — все тупо устали с ними бороться, подчас тратя на совместимость с одним экспонатом кунсткамеры больше времени, чем на всю остальную вёрстку. Имею богатый личный опыт… Но тут подзабить не выйдет!

                                                                                    Лично я сейчас придерживаюсь такой политики: страницы для старых браузеров не вылизываю до блеска, на некритичные деффекты декора не обащаю внимания. То есть где-то рамка, тенька, градиентик не работает — это нестрашно. Но чтобы полностью ломалась структура страницы — это недопустимо. Страница может страдать только в плане декора и плюшек, но должна оставаться полностью читабельной и функциональной.

                                                                                    Делать две параллельные версии шаблонов (новые и старые) и грузить нужные в зависимости от браузера? Накой нам двойная работа?
                                                                                      +1
                                                                                      Тут с Вами нельзя не согласиться.
                                                                                      Ценность того, что мы видим, не в том, что завтра этим можно будет пользоваться. Этого не будет. Ценность в том, что работа идёт, CSS совершенствуется и когда-нибудь это появится во всех актуальных браузерах. Хуже было бы, если бы сейчас ничего не разрабатывали оправдываясь тем, что никто из браузеров в ближайшее время это не реализует а значит никому это и не надо. Жаль как-то они медленно работают и не всегда выбирают востребованные вещи. Имхо переменные в CSS давно бы уже все реализовали, если бы они были своевременно стандартизированы.
                                                                                      0
                                                                                      Стандарт очень упростит работу верстальщикам, вот только сколько будем ждать от всех браузеров полноценную поддержку этих стандартов, одному богу известно
                                                                                        +2
                                                                                        Может быть повторю уже сказанное, но:

                                                                                        — Новость от 26 октября: web-standards.ru/news/274/
                                                                                        — Это авторский черновик, который а) является пересмотром старого черновика CSS Grid Positioning б) никем не поддерживается в) сильно изменится до тех пор, пока достигнет статуса рекомендации
                                                                                        — Существует большая проблема обратной совместимости, поскольку этот черновик не предусматривает использования экстра-разметки, и даже если два браузера начнут его поддерживать, то для трёх остальных будет взрыв макета. Надеюсь, что после первых реализаций появятся JS-костыли, имитирующие работу этих свойств.

                                                                                        …но всё это нисколько не мешает нам радоваться тому, насколько круто всё будет лет через пять.
                                                                                          0
                                                                                          Дайте два!
                                                                                            0
                                                                                            я вот таки не понял где определяется ширина блока D?
                                                                                              –1
                                                                                              его цвет и размер шрифта, а так же padding там тоже не указаны. это сделано для того, чтобы показать как работает компоновка, считайте что задано некое фиксированное значение ширины
                                                                                              0
                                                                                              Я относительно давно знаком со всемы черновиками организации компоновки (grid, flex, layout).
                                                                                              Предудущая инкарнация grid (которая CSS Grid Positioning) как-то немного уступала другим, особенно flex.
                                                                                              Но новая версия (CSS Grid Alignment) смотрится явно интереснее. Все очень предельно просто и понятно. И данный подход решает 99% задач. Ближайший конкурент flex не решает, к примеру, независимость содержимого от представления (нельзя свободно тасовать блоки).
                                                                                                +1
                                                                                                Забыл добавить, что зато flexible box поддерживается в Gecko и Webkit! А grid еще нигде ((
                                                                                                  +1
                                                                                                  Это очень важный момент, т.к. для продвижения к утверждению спецификации требует наличие двух независимых имплементаций.
                                                                                                0
                                                                                                Мне как программисту, которому всегда была не очень интересна дивовая вёрстка с хаками-перехаками, это нововведение будет ооочень полезно.

                                                                                                Правда, работа верстальщика теперь будет не так нужна? Не завидую, бедным…
                                                                                                  +1
                                                                                                  Есть ли разумное объяснение столь несуразному синтаксису стандарта? Нельзя ли было вместо
                                                                                                  grid-column-align: end; grid-row-align: start
                                                                                                  придумать просто
                                                                                                  grid-align: top right
                                                                                                    –1
                                                                                                    а если я напишу grid-align: right top? потому и выбрали «start» и «end» чтобы можно было применять в обоих направлениях. что касается общего синтаксиса типа: grid-align: start start, то я думаю, что он будет реализован
                                                                                                      +1
                                                                                                      > а если я напишу grid-align: right top?

                                                                                                      Работать будет нормально (по аналогии с backround-position)
                                                                                                    0
                                                                                                    Черт. Я хочу учиться верстать не сейчас, а когда такое введут

                                                                                                    Only users with full accounts can post comments. Log in, please.