Учим CSS Grid за 5 минут

[genew]

Класс wrapper в разметке есть, а где классы item?

[sidny_vicious]

Их нужно присвоить элементам в родительском контейнере (детям)

[Kroid]

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

[Skerrigan]

Даю примерно 3 месяца — экспериментальные билды поддержку внесли прошедшей весной-летом. Этой осенью уже идет в релиз-ветках. К новой весне должны обновиться все остальные юзеры.

Моё web-application на них уже построено.

[zelenin]

can i use пишет, то css grid поддерживается всеми десктопными браузерами, кроме IE/Edge.

[Ashot]

https://caniuse.com/#feat=css-grid вообще edge уже полноценно поддерживает. IE 10/11 и старые edge – partial support (с префиксом и по старой спецификации)

[Skerrigan]

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

[zelenin]

какая остальная масса? IE/Edge? не думаю.

[Skerrigan]

Естественно, масса людей — по самым различным причинам так или иначе может затягиваться на какое-то время процесс обновления. А Edge и так поддерживает почти полностью гриды.

[SelenIT3]

Вообще-то экспериментальная поддержка за флагом была еще в 2015-м, а поддержку в релиз-ветках «большая четверка» дружно выкатила еще в марте, в октябре к ним еще присоединились Edge 16 и Samsung Internet 6. Плюс в IE10(!) — Edge 15 своя старая версия за префиксом (без «вкусностей» типа repeat:auto-fill и grid-gap, но во многих простых случаях существенно лучше, чем ничего). «Хромята» типа Я-Браузера (которые canIUse не учитывает, так что к его статистике для экс-СССР можно смело плюсовать еще процентов 5-7) обычно поддерживают то же, что и Хром предпоследней версии — т.е. у них тоже всё хорошо.

Осталась проблема со всякими Операми-в-Мини и UC Browser'ами, до которых гриды могут не дойти и через 2-3 года (но это не проблема, т.к. это мобильные браузеры, а значит, им более чем уместна упрощенная одноколоночная раскладка:) и с совсем уж древними IE, в которых, очевидно, гриды не появятся никогда (но они, во-первых, практически вымерли, а во-вторых, работают на настолько древнем железе, что упрощенная раскладка им тоже скорее поможет, чем повредит, так что и они проблема только для тех, у кого «сайты везде должны выглядеть одинаково»:).

[justboris]

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

У меня есть дашборд, сделанный на CSS-grid. Верстка получилась намного проще и чище, никаких лишних div-ов. Под IE люди тоже заходят и даже не замечают, что здесь не так.

[Yakoot]

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

[punkkk]

Есть очень интересный ресурс по css grid.

[Rosomaha]

Спасибо за ссылку, хорошая игрушка )

[kaktuxis]

Привет! где ты начнешь обучение углубленного кура по CSS Grid?

[b120036833]

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

[klim76]

а что будет если написать так?

.item3 {
    grid-row-start: <b>1</b>;
    grid-row-end: 4;
}