Abr@X@bra.ru
Адаптивные таблицы с помощью CSS Grid
Адаптивные таблицы с помощью CSS Grid

Адаптивные таблицы с помощью CSS Grid

23.01.2019
57
Цель этой статьи - дать представление о CSS Grid и привести некоторые примеры того, как я использую его в своей повседневной работе.

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

Для наглядности приведу небольшой пример того, как просто использовать CSS Grid. Ниже, у нас есть таблица, построенная с вымышленными пользовательскими данными.




Угадайте, сколько строк CSS-кода в этой таблице?



12! Это верно, только 12 строк CSS, и волшебство происходит в строках 2 и 3, именно здесь мы описываем, что элемент HTML с классом сетки должен отображать свое содержимое в виде сетки и иметь 5 столбцов с 1 шириной 1fr. Я также использовал функцию CSS repeat ().

Хорошо, волшебное выражение «1fr» означает, что элемент будет занимать все доступное пространства! И это позволяет нам создавать столбцы в том количестве, сколько нам нужно, и нет необходимости задавать фиксированную ширину!

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

grid-template-columns: 1fr 3fr 2fr 2fr 3fr;

Под этим я подразумеваю:

  • пусть столбец «Id» должен занимать 1 часть доступного пространства;

  • столбцы «Полное имя» и «Электронная почта» должны занимать 3 доли доступного пространства;

  • столбцы «Страна» и «Создано в» должны занимать 2 доли доступного пространства;

Результат:



И мы можем сделать гораздо больше! Если мы хотим работать с фиксированной шириной вместо дроби, мы также можем использовать функцию minmax (). Например, если мы хотим иметь фиксированную ширину в первом столбце, минимум 50 пикселей и максимумом 100 пикселей, код будет выглядеть примерно так:

grid-template-columns: minmax(50px, 100px) 3fr 2fr 2fr 3fr;

И, наконец, окончательный результат следующий:



Хотя наиболее распространенное использование CSS Grid - это создание макетов с помощью grid-template-areas, я также считаю его очень полезным для таблиц!

Идеального инструмента не существует, у каждого инструмента есть свои преимущества и недостатки, поэтому вы должны выбрать тот, который вам удобнее, и решить проблему наилучшим образом!




CSS, CSS Grid, Table
Читайте также:
Css эффект - разорванный текст

Css эффект - разорванный текст

В данном посте, хочу поделиться, как можно сделать очень интересный эффект - разорванного текста с помощью CSS.
Читать
CSS Grid идеально подходит для адаптивной верстки

CSS Grid идеально подходит для адаптивной верстки

Я думаю, что вы уже в курсе, что Grid превосходит Flexbox для создание макетов. Но как насчет адаптивных макетов? Что лу...
Читать
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать