- Колонки с автоматическим подбором размеров в CSS Grid: auto-fill или auto-fit
- Fill или fit? В чем разница?
- Гибкие таблицы на CSS Grid
- Ну покажите уже CSS Grid
- Изменение ширины колонок с помощью Grid
- Колонки фиксированной ширины
- Перемещение и удаление столбцов
- «Почему вы просто не использовали <
>?» - «Почему вы просто не использовали Flexbox?»
- «Почему вы просто не использовали ?»
- «Почему вы просто не использовали table-layout: fixed?»
- «Но вы могли обойтись простыми таблицами!»
- Не переборщите с display: contents
- Наверное, я что-то забыл
Колонки с автоматическим подбором размеров в CSS Grid: auto-fill или auto-fit
Дата публикации: 2018-01-25
От автора: помимо явно заданных размеров колонок в CSS Grid есть еще одна из мощных и удобных функций – это возможность автоматически повторять в CSS колонки и делать автоподстановку элементов в них. Если точнее, то мы можем указать количество колонок в сетке, а браузер будет их адаптивно подстраивать под нас: на маленьких вьюпортах колонок будет меньше, на больших – больше. И не нужно писать медиа запросы и строго прописывать адаптивное поведение.
Все это доступно в всего лишь одной строке CSS – мне это напоминает, как Дамблдор взмахнул своей палочкой дома у Горация и «мебель вернулась на свои места, украшения взмахнули в воздух, подушки набились перьями, рваные книги сами себя отреставрировали и приземлились на полки…».
Такое магическое поведение без подключения адаптивности достигается через функцию repeat() и ключевые слова автоподстановки.
В общем, функция repeat() позволяет повторять колонки сколько угодно раз. Например, если вам нужна 12-ти колоночная сетка, можно написать так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
1fr – эта запись говорит браузеру растянуть пространство между колонок равномерно. То есть мы получаем жидкие и равные по ширине колонки. В таком случае сетка всегда будет растягиваться на 12 колонок, несмотря на ширину. Как вы догадались, это нехорошо. На маленьких экранах контент может сильно сжаться.
Поэтому необходимо задать минимальную ширину колонок, чтобы они не стали очень узкими. Для этого нам понадобится функция minmax().
Но тогда в CSS Grid переполнится строка. Колонки не переедут на новые строки, если ширина вьюпорта недостаточна, чтобы вместить все колонки с новой минимальной шириной. Мы же сказали браузеру повторять колонки 12 раз в строке.
Чтобы колонки переносились можно использовать auto-fit или auto-fill.
Эти ключевые слова говорят браузеру перенести элемент на новую строку, если не хватает ширины, чтобы его вместить без перекрытия. Используемые нами единицы измерения также гарантируют, что в случае, если ширина допускает догрузку столбца, но не полный столбец, то это пространство будет распределено по столбцу или столбцам, которые уже вместились, чтобы на конце строки не оставалось пустого пространства. Исходя из названий, сначала может показаться, что auto-fill и auto-fit противоположны. Но по факту разница в них незначительна.
С auto-fit вы можете получит в конце строки пустое пространство. Но когда и как? Давайте узнаем.
Fill или fit? В чем разница?
На недавнем семинаре по CSS я говорил про разницу auto-fill и auto-fit:
«auto-fill ЗАПОЛНЯЕТ строку максимально возможным числом колонок. Если в строку можно вместить новую колонку, она будет создана с четко заданной шириной, потому что это ключевое слово пытается ЗАПОЛНИТЬ строку максимальным числом колонок. Новые колонки могут быть пустыми, но они все же будут занимать место в строке.
auto-fit ПОДСТРАИВАЕТ доступные на данный момент колонки под пространство, расширяя их, чтобы они могли занять все доступное пространство. Браузер сначала заполняет свободное пространство дополнительными колонками (как auto-fill), после чего пустые колонки сжимаются.»
Сначала может показаться странным, но если разобрать наглядный пример, все станет понятно. Это мы и сделаем с помощью Firefox DevTools Grid Inspector. Этот инструмент поможет нам визуализировать размер и положение элементов сетки и колонок.
Разберем демо ниже.
Колонки заданы через функцию repeat() и имеют минимальную ширину 100px, максимальная ширина 1fr. Колонки будут равномерно расширяться на любое свободное пространство. Для колонок в строке мы будем использовать ключевые слова автоподстановки, и браузер сам позаботиться об адаптивности сетки и переносе колонок на новые строки при необходимости.
Браузер разместит колонки и задаст им размер в первом примере с помощью auto-fill, после чего будет применен auto-fit.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Источник
Гибкие таблицы на CSS Grid
Просмотр списка лидов («холодных» контактов)
Поскольку мы уже запустились, я, наконец, могу рассказать о секретном проекте, над которым работал последние два года. Одна из интересных функций Teamwork CRM — просмотр списка (list view).
Это мощный компонент, который встречается в приложении семь раз. По сути, таблица на стероидах. Я мог бы много рассказать, но не хочу вас утомлять. Сосредоточусь на том, как мы реализовали подобную гибкость с помощью всего нескольких строк CSS (Grid). А именно, как мы выкладываем тяжёлые таблицы данных, как поддерживаем изменение размера столбцов и многое другое.
Во-первых, нужно объяснить контекст, начиная с цели и задачи дизайна этих таблиц. Если это не интересует, не стесняйтесь перейти сразу к технической реализации.
В первую очередь, наше решение позволяет клиентам быстро просматривать списки, например, лиды или контакты, и замечать важные детали. Это не похоже на электронную таблицу Excel — мы лучше справляемся с выкладкой данных, если их очень много.
Абсолютно всё работает в адаптивном гибком дизайне. Мы начинаем с самого узкого варианта и настраиваем макет на основе контента, дизайна и вариантов использования (у нас нет брекпоинтов, ориентированных на устройство).
На минимальной ширине экрана столбцы штабелируются вертикально, занимая всю ширину экрана.
Как выглядит список на узком экране
Гибкие таблицы сделать непросто. Вы можете выбрать из нескольких существующих шаблонов. Подумайте, какую информацию ищут пользователи, и выбирайте с умом.
Как только у нас достаточно пикселей на экране, мы переключаемся на более типичный макет, так что колонки… ну, становятся колонками. Затем в макете не происходит никаких серьёзных изменений, но мы по-прежнему хотим отображать колонки как можно удобнее для клиента.
Предположим, у нас много столбцов (позже рассмотрим, как пользователь может их настроить). Во-первых, таблица должна как минимум заполнить ширину экрана. Во-вторых, ширина столбцов должна определяться их содержимым и типом значений. Например, короткий/длинный текст, дата, номер, URL и т. д. Колонки с датой должны занимать меньше места, чем колонки длинного текста.
У столбцов должна быть минимальная ширина. В результате часто получается таблица, которая прокручивается и по вертикали, и по горизонтали.
Как макет зависит от ширины окна. Извините за дёрганую гифку, позже я приведу несколько интерактивных примеров
Начнём с того, что мы по максимуму используем для таблицы обычный CSS старой школы. Затем улучшаем его с помощью CSS Grid. Потом я покажу, как средствами Grid пользователи изменяют размер столбцов, что было гораздо неудобнее с обычным CSS.
Ну покажите уже CSS Grid
Я не эксперт по CSS Grid, но он мне нравится. Это чрезвычайно мощный и простой инструмент, который реализует сложные макеты с минимальным количеством кода. Здесь я пропущу введение в технологию. Можете прочесть «Новые макеты CSS» Рейчел Эндрю или «Полное руководство по Grid». Когда закончите размышления о том, где же был этот инструмент всю вашу жизнь, возвращайтесь ко мне.
Первым делом применяем display:grid к
| и | , применив display:grid к каждому из них (т. е. сетки внутри сеток), но это не идеально. Каждая сетка |
|---|---|
| и | ). Затем мы используем волшебное правило grid-template-columns для управления элементами сетки. Да, всего одна строка CSS. Например, если у нас колонка даты и колонка URL, получится примерно так: Используем одинаковый минимальный размер для всех колонок, но максимальное значение ( fr ) определяется типом данных столбца. Я пробовал auto и max-content , но мы придумали лучший вариант. Вот упрощенный пример: интерактивная таблица с кодом. Попробуйте изменить размер окна. Изменение ширины колонок с помощью GridКроме того, в наших таблицах можно поменять местами, изменить ширину и скрыть столбцы. Последнее важно, потому что поддерживается очень много колонок с различными типами данных: это свойства самого элемента (например, лидов), свойства связанных элементов (например, компании, связанной с лидом) и кастомные поля. Например, пользователь может создать для контактов настраиваемое поле (дата) под названием «Дата рождения», которое будет отслеживаться в системе для каждого контакта. Поскольку при создании настраиваемого поля выбирается тип «Дата», система будет обрабатывать это поле с учётом такого типа. Сначала объясню, как происходит изменение ширины.
|