Комментарии 52
Конечно интересно! Про полифилы ещё бы пару слов.
Добрый день.
Спасибо за отзыв. Хорошо, сделаем. Добавлю пункт "Полифилы, Progressive Enhanced для CSS Grid Layout" в следующую статью.
Наконец-то в браузере появятся нормальные лейауты! FlexBox вместе с GridLayout покрывают практически всю необходимость разметки в приложениях.
А вообще, как-то странно: именно производители "того самого браузера" изначально предложили и пилили спецификацию GridLayout, теперь же хуже всех ее поддерживают.
Теперь можно использовать спецификацию CSS Grid Layout без флагов в следующих браузерах: Firefox 52, Chrome 57, Opera 44, Safari 10.1. Какой из браузеров остался позади, думаю, вы догадываетесь. Точнее он поддерживает старую версию спецификации.
Вот если бы ещё все остальные браузеры умерли, а оставшиеся единомоментно проапгрейдились до вышеуказанных версий, было бы совсем отлично. А так всё равно придётся писать кучу флагов для совместимости.
Добрый день.
А так всё равно придётся писать кучу флагов для совместимости.
Да, есть такое. Но можно завтавить машины страдать. И там получается не такая уж и большая куча )
http://caniuse.com/#search=flex — поддерживают все современные браузеры
http://caniuse.com/#search=grid — некоторые версии не поддерживают
я думаю еще год и можно будет спокойно юзать grid для любого проекта… имхо
Для узконишевых проектов (с технически продвинутой аудиторей) гриды можно будет применять уже в этом году.
А вот для широких масс, думаю, придется ждать еще минимум года 2, если не больше. Хвост эксплореров, опер мини и тому подобного будет волочиться ещё долго.
Добрый день, Руслан.
Спасибо за интересный вопрос. Отвечу сначала как сделать так, чтобы высота header'a и footer 'a зависела от контента. Довольно просто, задайте значение auto или можно использовать функцию minmax() со следующими значениями minmax(auto, 10vh). что в свою очередь будет означать: максимам по высоте будет 10vh минимум auto (по контенту).
Вот так почему то работает: grid-template-rows: 0fr auto 0fr;
Конечно работает) Браузер умный и пытается посчитать значение. Тут можно почитать про алгоритм. Если в кратце, то браузер пытается высчитать гипотетическое значение 0_О. Не делайте так ) Вы заставляете страдать браузер.
Добрый день.
Да, вы правы. Таких статей хватает. У меня был соблазн написать сразу большую сложную статью. Но я от этой идеи отказался. Потому как даже такие простые штуки как grid-template-columns/grid-template-rows скрывают у себя под капотом очень много сложного. Говорю из своего опыта. Нужно с ними для начала разобраться, постоить с помощью этих штук не один макет, а потом двигаться к таким крутым вещам, как auto-fill, auto-fit, auto-flow, grid-auto-flow, grid-auto-rows, grid-auto-columns и т.д. Также важно понимать как работают алгоритмы расчетов значений, чтобы представлять, что вы получите на выходе.
И только после этого, можно делать что-то сложное.
Статей про такие простые вещи много, потому что каждый, кто начинал сам разбираться с CSS Grid Layout спецификацией находил для себя что-то непонятное, новое, что не было описано во всех предыдущих статьях. Ну и в итоге делился своим опытом в виде статьи. Я не считаю это плохо.
На старые браузеры можно и нужно класть болт. Доля IE около 5% вместе с Edge. А вот процент людей с плохим зрением или ограниченными возможностями куда выше. Позаботьтесь лучше о них, а не о тех кто не может нормальный браузер себе поставить.
Вы бы хоть скриншоты прикладывали для тех, у кого ваши примеры не работают.
Не знаю, чего все так носятся с этими гридами. Сила флексбоксов в переносах при переполнении, из-за чего раскладка может динамически меняться, подстраиваясь под размер контейнера (а контейнер — далеко не только окно браузера). А возможность "не менять хтмл" — уже давно не актуальна, так как сейчас страницы собираются из компонент по шаблонам и шаблон — такой же равноправный код компонента, как и стили и скрипты.
Добрый день, Дмитрий.
Вы бы хоть скриншоты прикладывали для тех, у кого ваши примеры не работают.
Возможно вы и правы. Думаю, что те кто читают эту статью и у них не завелись примеры, то у них есть developer edition версия браузера. Плюс ко всему, можно включить флаги, и тогда полюбому заведется.
А возможность "не менять хтмл" — уже давно не актуальна, так как сейчас страницы собираются из компонент по шаблонам и шаблон — такой же равноправный код компонента, как и стили и скрипты.
Ну тут не соглашусь. Шаблон я так понимаю из html собирается. Я слабо себе представляю шаблон, который хоть раз не пришлось менять из-за смены поведения какого-то элемента в этом шаблоне или еще чего-то там.
Сила флексбоксов в переносах при переполнении, из-за чего раскладка может динамически меняться, подстраиваясь под размер контейнера (а контейнер — далеко не только окно браузера).
Гриды тоже это все умеют. Единственная с ними проблема (пока) — поддержка. Это да, очень большая проблема. Но CSS Grid Latout очень крут и он прекрасно решает множество задач и при этом не нужно себе "стрелять в ногу".
К примеру. Мы с коллегами пробовали сделать шаблон на flexbox и на grid. Базовая разметка и код на grid заняли намного меньше места и проблем с ними было меньше. Пример, конечно, из вакуума, но все же.
Вы попробуйте CSS Grid Layout для себя, для фана. Я вас уверяю, результатами останетесь довольны )
Я слабо себе представляю шаблон, который хоть раз не пришлось менять из-за смены поведения какого-то элемента в этом шаблоне или еще чего-то там.
Я и говорю о том, что изменение шаблона — не проблема. Более того, изменения в шаблоне более явные — если вам нужно разместить 4 элемента в 2 строки, то в шаблоне у вас будет ровно это. Если же вы будете раскладывать элементы через css, то придётся раскладывать блоки в уме по тем коэффициентам, что заданы в css. Короче, при компонентном программировании изменение шаблона — вообще не проблема.
Думаю, что те кто читают эту статью и у них не завелись примеры, то у них есть developer edition версия браузера.
А зачем она им? Я вот занимаюсь разработкой веб приложений. Если в моём первом попавшемся браузере примеры не заводятся, значит технология ещё не готова к продакшену. Совсем. А пока не будет готова — её и копать нет особого смысла.
Гриды тоже это все умеют.
Раньше не умели. В статье тоже на этом не акцентировалось внимание. Ну, это замечательно. Хотя, лучше бы расширили возможности флексбокса, чем делать совсем другой display.
Мы с коллегами пробовали сделать шаблон на flexbox и на grid.
Покажете что за шаблон? Я бы тоже поучаствовал.
По поводу шаблона. Ну такое. Спорить не буду. У каждого свои взгляды на это. Как говорится, карандаши на вкус и цвет разные )
А зачем она им?
У меня, например, всегда есть Chrome Canary и FF Developer Edition. Я их использую не для того, чтобы какие-то новые фичи смотреть (хотя и это бывает), а потому что, инструментарий разработчика там намного богаче. В тот же обычный Chrome не выкатывают никакие обновления для разработчиков, пока они не пройдут хорошую обкатку в Canary.
Покажете что за шаблон? Я бы тоже поучаствовал.
Набросал похожий пример (реальный шаблон не могу показать) http://codepen.io/var-bin/pen/yMWoOX К пример, тот же mobile first на grid'ах решается очень изящно. (поизменяйте размеры браузера). Если развить данную тему, взять flexbox, @support, grid'ы, то получиться довольно круто (Progressive Enhancement)
Сила флексбоксов в переносах при переполнении, из-за чего раскладка может динамически меняться, подстраиваясь под размер контейнера
У гридов эта сила тоже есть (auto-fill и auto-fit), при этом при переполнении структура этих самых компонентов остается именно сеткой, с вертикальным и горизонтальным ритмом, без странностей в последней строке, независимо от размеров контента каждого компонента. И при любом размере контейнера эта сетка может использовать доступное пространство оптимальным образом (пример частного случая).
Но в основном с гридами «носятся» потому, что они избавляют от головной боли и хаков в решении первоочередной задачи верстки страниц — размещения и взаиморасположения основных структурных блоков (шапка, меню, сайдбар, подвал и т.п.). До сих пор для этого требовались горы хаков. Даже флексбоксы, хотя и здорово облегчили задачу, не решили ее до конца — с ними по мере загрузки страница перестраивается, блоки перепрыгивают, удаление/добавление блока влияет на поведение остальных ит.д. С гридами же задача решается тривиально, а блоки остаются каждый на своем месте, надежность старых добрых таблиц и гибкость семантической разметки «в одном флаконе». А если еще медиавыражения добавить..:)
И при любом размере контейнера эта сетка может использовать доступное пространство оптимальным образом
Не очень оптимальным — справа в конце остаётся откусанный кусок пространства. Из оптимальных заполнений мне больше импонирует такого рода раскладка, но чтобы она работала нужен специальный рекурсивный компонент, который разобьёт плоскую коллекцию на группы, расставив им правильные коэффициенты.
Даже флексбоксы, хотя и здорово облегчили задачу, не решили ее до конца — с ними по мере загрузки страница перестраиваетс
Это проблема не флексбоксов, а рассмотренного там кривого решения загрузки стилей. Путём разбиения стилей на 2 там добились более быстрого отображения шапки, но более медленного отображения основного контента, что довольно глупо.
А если еще медиавыражения добавить
А они зачем?
можно ли с помощью CSS селектора обратиться к заданному треку?
Например сделать 3ю колонку синей, а 2ю строку — зелёной.
В общем случае пока, к сожалению, нельзя, но рабочая группа CSS уже над этим думает.
В частных случаях, когда все элементы явно привязаны к своим местам в гриде (без алгоритма авторазмещения), можно использовать для этой цели псевдоэлементы ::before и ::after грид-контейнера, растянув их на весь ряд/колонку (как здесь) и поставив их ниже основного контента по z-indexу. Ну или просто задавать фон элементам в тех же правилах, где задается положение...
CSS Grid Layout. Быстрый старт