SlideShare uma empresa Scribd logo
1 de 88
Baixar para ler offline
Пора начинать
фыркать*
* Grid Layout
1 фыр = 1 fr = 1 fraction
неизвестный художник
Piet Mondrian –
Composition with Large
Blue Plane, Red, Black,
Yellow, and Gray
1921 год – Холст, масло
Jen Simmons –
Responsive Mondrian
2017 год – HTML, CSS
Обо мне
5
Сергей Попов
- Фронтенд разработчик
- Верстаю 7 лет
- Организую moscowcss
План
6
- Почему Grid Layout?
- Самое интересное
7
Почему вообще Grid Layout?
8
Мощно!
9
Гибко!
10
Масштабно!
11
«Можно вообще всё»
12
О них вообще везде!
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
ГРИДЫ!
ГРИДЫ!
ГРИДЫ!
ГРИДЫ!
ГРИДЫ!
ГРИДЫ!
ГРИДЫ!
ГРИДЫ!
ГРИДЫ!
ГРИДЫ!
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
Почему сейчас?
Сальвадор Дали – Постоянство памяти 1931 год
Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)
А если серьёзно?
Они уже здесь - март
34
Они уже здесь – май
35
36
Они уже здесь – май
37
Они уже здесь – июнь
Что есть посмотреть?
- Доклад Вадима Макеева «Можно вообще всё. Раскладка

по гриду»
- A Complete Guide to Grid
- Grid by Example
- Статьи по Grid Layout на CSS-Live
- Сайт с примерами раскладки от Jen Simmons
- Работа с Grid Layout в Firefox 52 DevTools
- …
38
Хватит читать!
Начинайте использовать
Самое интересное!
- Grid Template Areas
- Grid auto-flow
40
Grid Template Areas
41
Grid Template Areas
header
sidebar
content
footer
42
Grid Template Areas
header
sidebar
content
footer
43
=>
Grid Template Areas
<=
> 940px< 940px 44
Grid Template Areas
<=
> 940px45< 640px
Делаем
Илья Репин – Бурлаки на Волге 1873 год
Илья Репин – Бурлаки на Волге 1873 год47
Илья Репин – Бурлаки на Волге 1873 год48
Илья Репин – Бурлаки на Волге 1873 год49
Илья Репин – Бурлаки на Волге 1873 год50
Илья Репин – Бурлаки на Волге 1873 год51
Илья Репин – Бурлаки на Волге 1873 год52
Илья Репин – Бурлаки на Волге 1873 год53
Илья Репин – Бурлаки на Волге 1873 год54
Илья Репин – Бурлаки на Волге 1873 год55
Илья Репин – Бурлаки на Волге 1873 год56
Илья Репин – Бурлаки на Волге 1873 год57
Илья Репин – Бурлаки на Волге 1873 год58
Илья Репин – Бурлаки на Волге 1873 год59
Grid auto-flow
60
Grid auto-flow
61
grid-template-columns: 

1fr 1fr 1fr 1fr 1fr;
grid-template-rows:
auto;
grid-auto-flow:
dense;
1 2 3 4 5
6 7 8 9
1 2 3 4 5 6
Grid auto-flow
62
nth-child(3) {
grid-column: 1 / 6;
}
1 2 4 5 6
7 8 9
1 2 3 4 5 6
3
Grid auto-flow
63
nth-child(2, 6, 9) {
grid-column:
auto / span 2;
}
1 2 4 5
6 7
1 2 3 4 5 6
3
8
9
Grid auto-flow
64
nth-child(7, 8) {
grid-row:
auto / span 2;
}
1 2 4 5
6
7
1 2 3 4 5 6
3
8
9
Делаем
Ван Гог – Две женщины на вересковой пустоши 1883 год
Ван Гог – Две женщины на вересковой пустоши 1883 год
Ван Гог – Две женщины на вересковой пустоши 1883 год
Ван Гог – Две женщины на вересковой пустоши 1883 год68
Ван Гог – Две женщины на вересковой пустоши 1883 год69
Ван Гог – Две женщины на вересковой пустоши 1883 год70
Ван Гог – Две женщины на вересковой пустоши 1883 год71
Ван Гог – Две женщины на вересковой пустоши 1883 год72
Ван Гог – Две женщины на вересковой пустоши 1883 год73
Ван Гог – Две женщины на вересковой пустоши 1883 год74
Ван Гог – Две женщины на вересковой пустоши 1883 год75
Ван Гог – Две женщины на вересковой пустоши 1883 год76
Ван Гог – Две женщины на вересковой пустоши 1883 год
Но проблемы-то есть?
- Баги
- Спецификация
- Мобильные браузеры
- Десктопные браузеры
78
Мобильные браузеры грустят подтягиваются
79
Десктопные браузеры
80
Или динозавры –
или Гриды
Pixar – Хороший динозавр 2015 год
ИЛИ
Pixar – Хороший динозавр 2015 год
83
@supports (display: grid) {
.grid { display: grid; }
}
@supports not (display: grid) {
.grid { display: flex; }
}
Support of supports()
84
Если и этого вам
кажется мало
Pixar – Хороший динозавр 2015 год
float вам
в руки
Мария Kurara – Поплавок 2015 год
«…чтобы сделать первые шаги
в Grid Layout, достаточно
знать лишь часть» –
Chris Wright
http://css-live.ru/articles/znakomstvo-s-css-grid-layout.html
Спасибо за внимание!
Вопросы?
twitter: sergeytovarov
facebook: sergeytovarov

Mais conteúdo relacionado

Mais de Ontico

Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...Ontico
 
ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)
ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)
ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)Ontico
 
MySQL Replication — Advanced Features / Петр Зайцев (Percona)
MySQL Replication — Advanced Features / Петр Зайцев (Percona)MySQL Replication — Advanced Features / Петр Зайцев (Percona)
MySQL Replication — Advanced Features / Петр Зайцев (Percona)Ontico
 
Внутренний open-source. Как разрабатывать мобильное приложение большим количе...
Внутренний open-source. Как разрабатывать мобильное приложение большим количе...Внутренний open-source. Как разрабатывать мобильное приложение большим количе...
Внутренний open-source. Как разрабатывать мобильное приложение большим количе...Ontico
 
Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...
Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...
Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...Ontico
 
Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...
Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...
Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...Ontico
 
Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)
Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)
Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)Ontico
 
И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)
И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)
И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)Ontico
 
Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)
Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)
Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)Ontico
 
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)Ontico
 
100500 способов кэширования в Oracle Database или как достичь максимальной ск...
100500 способов кэширования в Oracle Database или как достичь максимальной ск...100500 способов кэширования в Oracle Database или как достичь максимальной ск...
100500 способов кэширования в Oracle Database или как достичь максимальной ск...Ontico
 
Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...
Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...
Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...Ontico
 
Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...
Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...
Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...Ontico
 
Как мы учились чинить самолеты в воздухе / Евгений Коломеец (Virtuozzo)
Как мы учились чинить самолеты в воздухе / Евгений Коломеец (Virtuozzo)Как мы учились чинить самолеты в воздухе / Евгений Коломеец (Virtuozzo)
Как мы учились чинить самолеты в воздухе / Евгений Коломеец (Virtuozzo)Ontico
 
Java и Linux — особенности эксплуатации / Алексей Рагозин (Дойче Банк)
Java и Linux — особенности эксплуатации / Алексей Рагозин (Дойче Банк)Java и Linux — особенности эксплуатации / Алексей Рагозин (Дойче Банк)
Java и Linux — особенности эксплуатации / Алексей Рагозин (Дойче Банк)Ontico
 
Как построить кластер для расчета сотен тысяч high-CPU/high-MEM-задач и не ра...
Как построить кластер для расчета сотен тысяч high-CPU/high-MEM-задач и не ра...Как построить кластер для расчета сотен тысяч high-CPU/high-MEM-задач и не ра...
Как построить кластер для расчета сотен тысяч high-CPU/high-MEM-задач и не ра...Ontico
 
Отказоустойчивая архитектура фронтальной системы банка / Роман Шеховцов, Алек...
Отказоустойчивая архитектура фронтальной системы банка / Роман Шеховцов, Алек...Отказоустойчивая архитектура фронтальной системы банка / Роман Шеховцов, Алек...
Отказоустойчивая архитектура фронтальной системы банка / Роман Шеховцов, Алек...Ontico
 
libfpta — обгоняя SQLite и Tarantool / Леонид Юрьев (Positive Technologies)
libfpta — обгоняя SQLite и Tarantool / Леонид Юрьев (Positive Technologies)libfpta — обгоняя SQLite и Tarantool / Леонид Юрьев (Positive Technologies)
libfpta — обгоняя SQLite и Tarantool / Леонид Юрьев (Positive Technologies)Ontico
 
Синхронизация данных из PgSQL в Tarantool / Вениамин Гвоздиков (Calltouch)
Синхронизация данных из PgSQL в Tarantool / Вениамин Гвоздиков (Calltouch)Синхронизация данных из PgSQL в Tarantool / Вениамин Гвоздиков (Calltouch)
Синхронизация данных из PgSQL в Tarantool / Вениамин Гвоздиков (Calltouch)Ontico
 
Хранимые процедуры в NoSQL СУБД на примере Tarantool / Денис Линник (Mail.Ru)
Хранимые процедуры в NoSQL СУБД на примере Tarantool / Денис Линник (Mail.Ru)Хранимые процедуры в NoSQL СУБД на примере Tarantool / Денис Линник (Mail.Ru)
Хранимые процедуры в NoSQL СУБД на примере Tarantool / Денис Линник (Mail.Ru)Ontico
 

Mais de Ontico (20)

Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
 
ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)
ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)
ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)
 
MySQL Replication — Advanced Features / Петр Зайцев (Percona)
MySQL Replication — Advanced Features / Петр Зайцев (Percona)MySQL Replication — Advanced Features / Петр Зайцев (Percona)
MySQL Replication — Advanced Features / Петр Зайцев (Percona)
 
Внутренний open-source. Как разрабатывать мобильное приложение большим количе...
Внутренний open-source. Как разрабатывать мобильное приложение большим количе...Внутренний open-source. Как разрабатывать мобильное приложение большим количе...
Внутренний open-source. Как разрабатывать мобильное приложение большим количе...
 
Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...
Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...
Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...
 
Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...
Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...
Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...
 
Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)
Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)
Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)
 
И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)
И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)
И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)
 
Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)
Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)
Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)
 
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
 
100500 способов кэширования в Oracle Database или как достичь максимальной ск...
100500 способов кэширования в Oracle Database или как достичь максимальной ск...100500 способов кэширования в Oracle Database или как достичь максимальной ск...
100500 способов кэширования в Oracle Database или как достичь максимальной ск...
 
Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...
Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...
Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...
 
Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...
Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...
Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...
 
Как мы учились чинить самолеты в воздухе / Евгений Коломеец (Virtuozzo)
Как мы учились чинить самолеты в воздухе / Евгений Коломеец (Virtuozzo)Как мы учились чинить самолеты в воздухе / Евгений Коломеец (Virtuozzo)
Как мы учились чинить самолеты в воздухе / Евгений Коломеец (Virtuozzo)
 
Java и Linux — особенности эксплуатации / Алексей Рагозин (Дойче Банк)
Java и Linux — особенности эксплуатации / Алексей Рагозин (Дойче Банк)Java и Linux — особенности эксплуатации / Алексей Рагозин (Дойче Банк)
Java и Linux — особенности эксплуатации / Алексей Рагозин (Дойче Банк)
 
Как построить кластер для расчета сотен тысяч high-CPU/high-MEM-задач и не ра...
Как построить кластер для расчета сотен тысяч high-CPU/high-MEM-задач и не ра...Как построить кластер для расчета сотен тысяч high-CPU/high-MEM-задач и не ра...
Как построить кластер для расчета сотен тысяч high-CPU/high-MEM-задач и не ра...
 
Отказоустойчивая архитектура фронтальной системы банка / Роман Шеховцов, Алек...
Отказоустойчивая архитектура фронтальной системы банка / Роман Шеховцов, Алек...Отказоустойчивая архитектура фронтальной системы банка / Роман Шеховцов, Алек...
Отказоустойчивая архитектура фронтальной системы банка / Роман Шеховцов, Алек...
 
libfpta — обгоняя SQLite и Tarantool / Леонид Юрьев (Positive Technologies)
libfpta — обгоняя SQLite и Tarantool / Леонид Юрьев (Positive Technologies)libfpta — обгоняя SQLite и Tarantool / Леонид Юрьев (Positive Technologies)
libfpta — обгоняя SQLite и Tarantool / Леонид Юрьев (Positive Technologies)
 
Синхронизация данных из PgSQL в Tarantool / Вениамин Гвоздиков (Calltouch)
Синхронизация данных из PgSQL в Tarantool / Вениамин Гвоздиков (Calltouch)Синхронизация данных из PgSQL в Tarantool / Вениамин Гвоздиков (Calltouch)
Синхронизация данных из PgSQL в Tarantool / Вениамин Гвоздиков (Calltouch)
 
Хранимые процедуры в NoSQL СУБД на примере Tarantool / Денис Линник (Mail.Ru)
Хранимые процедуры в NoSQL СУБД на примере Tarantool / Денис Линник (Mail.Ru)Хранимые процедуры в NoSQL СУБД на примере Tarantool / Денис Линник (Mail.Ru)
Хранимые процедуры в NoSQL СУБД на примере Tarantool / Денис Линник (Mail.Ru)
 

Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)