CSS Grid руководство изучение принципов работы с сеткой для начинающих


Содержание материала:

CSS Grid руководство: изучение принципов работы с сеткой для начинающих

CSS-гриды пришли! С марта 2020-го их поддерживают все основные браузеры. В свете этой хорошей новости я решил выкроить немного времени, чтобы лучше понять, как их использовать. Изучение далось мне ощутимо тяжелее, чем я рассчитывал — модуль CSS Grid Layout вводит порядка 17 новых понятий. Пытаться охватить их все было как-то слишком, так что я стал дробить материал на части, поясняя их заметками и примерами, которыми я и собираюсь поделиться. Это ни в коей мере не исчерпывающее руководство. Возможно, оно даже не на 100% фактически верно. Но оно должно дать достаточно информации, чтобы сложить в уме схему, как работают CSS-гриды, и начать верстать на них.

Терминология

Прежде чем начать верстать на гридах, нужно выучить несколько новых терминов. Грид-контейнер — элемент, к которому применили display: grid . Все его непосредственные потомки — грид-элементы.

Определяя грид, мы указываем, сколько рядов и колонок нам нужно. Затем система грид-раскладки генерирует нумерованные линии, которые делят грид по горизонтали и по вертикали. Это грид-линии. Пространство между двумя соседними грид-линиями называется грид-полосой. Это по сути собирательный термин для колонок и рядов.

Нумерованные линии грида можно использовать при размещении элементов. Грид-полоса — пространство между любыми двумя линиями в гриде (точнее, между любыми двумя соседними линиями — прим. перев.).

Грид-ячейка — наименьшая единица в гриде. Это пересечение ряда и колонки. По смыслу она очень похожа на ячейку таблицы.

Грид-область — пространство, образованное пересечением 4 грид-линий. Другими словами, это набор из одной и более соседних грид-ячеек. Важно: грид-области могут быть только прямоугольными. Нельзя делать Т- или Г-образные грид-области. Мне почему-то первым делом захотелось именно этого.

Грид-элементы могут охватывать одну или более ячеек — по рядам или по колонкам — это и есть грид-область.

Определяем грид

Есть много разных способов задать грид. Я собираюсь сосредоточиться на базовом сценарии: 4 колонки на 5 рядов. grid-template-rows с grid-template-columns позволяют задавать число и размер рядов и колонок соответственно. Можно перечислять полосы, как показано в примере ниже.

Простейший грид с 4 колонками и 5 рядами. Ряды определены с помощью grid-template-rows , а колонки — с помощью grid-template-columns .

Грид готов! Не самый полезный из возможных гридов, но всё-таки грид. В примере выше у каждого ряда высота 20px, а у каждой колонки ширина 20px. Единственное, что тут стоит отметить — то, что grid-template-rows и grid-template-columns позволяют определить грид-полосы. Затем браузер генерирует грид-линии автоматически. Эти линии невидимы. Они помогают располагать элементы в гриде, но не влияют на дизайн визуально. Но всё же возможность видеть эти линии крайне полезна при отладке. К счастью, в Firefox есть встроенный грид-инспектор, который визуализирует нам грид (ура!).

В этом примере размеры полос в гриде фиксированы. Это так по-модному называется то, что у рядов и/или колонок фиксированная ширина. Следовательно, грид останется одного и того же размера независимо от размера контейнера.

Гибкие гриды

Можно определить и грид с гибкими размерами полос. Или даже с фиксированными и гибкими полосами одновременно! (См. пример ниже.) Значения в процентах тут относятся к процентам от грид-контейнера.

Гибкий грид, где мы намешали разных единиц для размеров полос — пиксели, проценты, единицы вьюпорта и em-ы.

Единица fr

Давайте взглянем на еще один пример гибкого грида. Тут мы по-прежнему будем делать сетку 4х5, но нам надо, чтоб ряды и колонки растягивались и заполняли весь контейнер. Для этого мы воспользуемся единицей fr .

На этом месте у вас, возможно, готов вырваться вопрос: какую-какую единицу?

Гибкий грид с 4 колонками и 5 рядами. Его гибкость обеспечена заданием рядам и колонкам значения 1fr .

У нас новая единица! Единица fr представляет собой долю доступного пространства в грид-контейнере. Вы писали когда-либо flex: 1 , flex: 2 , и т.д.? Вот и это работает точно так же. Можно задавать размеры полос как соотношение свободного места, напр. 1fr 2fr .

На заметку: можно задавать размеры полос в единицах длины, процентах или fr .

Интервалы

Грид не будет настоящим гридом без интервалов между полосами. Для этого предусмотрены свойства grid-column-gap и grid-row-gap , либо их сокращение grid-gap . Интервалы в гриде создаются только между полосами. Перед первой полосой или после последней полосы интервалов нет.

Важно: даже если между двумя соседними полосами есть интервал, это всё равно одна грид-линия.

Гибкий грид 4х5 с интервалами (зазорами). Интервалы можно делать свойством grid-gap .

Размещение грид-элементов

Теперь, когда мы определили грид, давайте рассмотрим некоторые варианты того, как можно размещать в нем элементы. Во многом сродни флексбоксам, размещение в гриде не зависит от порядка элементов в разметке. Это позволяет создавать сложные раскладки, которые можно полностью перестраивать с помощью медиавыражений. Подробнее об этом чуть дальше. Пока сосредоточимся на неких основах.

Размещение элементов в гриде довольно похоже на абсолютное позиционирование. Только мы указываем не координаты в единицах длины, а начальную и конечную грид-линии.

Можно разместить элемент в гриде с помощью grid-column-start , grid-column-end и grid-row-start , grid-row-end .

Грид-линии автоматически пронумерованы. Начиная с 1 для крайней верхней и крайней левой линий. Эти номера мы используем при объявлении grid-column-start / grid-column-end и grid-row-start / grid-row-end . Можно считать и с конца. Для этого начинаем с -1 для крайней правой и крайней нижней линий. Наконец, можно указывать линии с помощью того, сколько полос должен занять элемент. Например, grid-row-end : span 3 означает, что номер конечной линии — начальная грид-линия + 3 полосы.

Внизу — пример на CodePen, показывающий несколько разных стилей размещения. Обратите внимание, что грид-элементы могут перекрываться. Для управления порядком наложения можно использовать свойство z-index .

Автоматизируем всё, что можно

Под конец я хочу продемонстрировать еще пару понятий на примерах. Я хочу воспроизвести эту сетку товаров с сайта Aldo. Вот что здесь надо отметить:

  • На больших экранах ( > 60em ) это сетка 4х5
  • В ней размещены 13 элементов
  • Некоторые элементы занимают по 2 колонки и/или 2 ряда
  • У всех картинок пропорции 1000 : 1270
  • Между ячейками интервал в 1rem , а по периметру грида отступ тоже в 1rem
  • Максимальная ширина грида ограничена до 60em

Грид также меняется в определенных контрольных точках. На средних устройствах (от 30em до 60em ) он сокращается до 3 колонок, а на маленьких устройствах ( ) — до двух. Наконец, нам нужно сохранять пропорцию 1000 : 1270 между размерами рядов и колонок.

Грид с товарами в стиле Aldo. 2 колонки на маленьких устройствах, 3 на средних и 4 — на больших.

Определяем размеры рядов и колонок

До сих пор мы определяли грид с помощью чего-то типа grid-template-columns: repeat(4, 1fr) and grid-template-rows: repeat(5, 1fr) . Из-за пропорции в 1000 : 1270 мы больше так не можем. Вместо этого нам понадобится немного математики, чтобы найти размеры рядов и колонок. Мы можем воспользоваться для этого CSS-переменными и calc. Рассчитать ширину колонок и высоту рядов можно по этой формуле:

Контрольная точка Ширина грида Интервалы + внутр. отступ Число колонок
По умолчанию (до 30em) 100vw (1 + 2)rem 2
min-width: 30em and
max-width: 60em
100vw (2 + 2)rem 3
min-width: 60em 60em (3 + 2)rem 4

Итак, в случае по умолчанию w >. Чудесно! Давайте соберем всё вместе. Начнем с определения значения по умолчанию в :root. Затем в каждой контрольной точке пересчитаем width и обновим свойство grid-template-columns .

Автоматические ряды

В предыдущем примере кода вы могли обратить внимание на grid-auto-rows: var(—height) . Это дает браузеру команду автоматически генерировать ровно столько рядов, сколько нужно, чтобы уместить все элементы. Так что если мы добавим еще элементов, он добавит еще рядов, и наоборот. Значение grid-auto-rows — то, какой высоты ряды нам нужны.

Пример на CodePen ниже показывает, как будет выглядеть наш грид на данный момент. Откройте его в режиме редактирования, чтобы увидеть, как работает расширение и сужение окна, а также что происходит при добавлении и удалении

На заметку. Вы обратили внимание, что нам не пришлось размещать элементы в гриде?! Если не указывать положение, то браузер размещает элементы в гриде автоматически. Это называется авторазмещением.

Элементы на несколько полос

Как я отметил ранее, некоторые элементы охватывают несколько полос. Для этого мы можем использовать прием с grid- -end: span . Картинки у нас охватывают одно и то же число полос при всех размерах экранов. Но вот информация о товаре охватывает 3 колонки на средних экранах и 2 колонки в остальных диапазонах. Поэтому мы применяем к ним wide-2 wide-3-m . Остальные элементы используют wide-2 tall-2 .

Хотите узнать больше об автоматическом размещении? Вот потрясающие туториал и наглядный пример Рэйчел Эндрю.

Плотная упаковка

У нас есть грид. Мы воспользовались авторазмещением, чтобы расположить в нем элементы, и некоторые элементы занимают по нескольку колонок и рядов. Так что, задача решена? Не совсем. Если вы посмотрите пример на CodePen выше в режиме редактирования, вы заметите, что в некоторых контрольных точках в гриде появлятся дырки.

Это из-за того, что по умолчанию авторазмещение использует разреженный (sparse) алгоритм упаковки, который может оставлять дырки в раскладке. Хорошая новость в том, что мы можем переключиться на плотный (dense) алгоритм упаковки, который заставляет браузер оглядываться назад и заполнять все пустые ячейки в раскладке.

Вот и всё! Внизу — окончательная версия. И вот еще один пример, использующий авторазмещение и плотную упаковку для отображения музыкальных альбомов.

Заключение

Задумайтесь на миг об открывшихся возможностях. Подумайте о сколь угодно безумных раскладках, которые мы теперь можем построить. Не приходит на ум ни одна? Не беда. Заскочите в лабораторию раскладок Джен Симмонс за кое-какими идеями. CSS Grid Layout наверняка здорово повлияет на веб-дизайн. Множество макетов, от которых вы отказывались, потому что их нельзя было реализовать на CSS, запросто могут оказаться возможны благодаря CSS-гридам.

Что дальше? Вы знали, что грид-линии можно именовать? Вы знали, что можно выравнивать элементы в полосах с помощью свойств align and justify ? А что можно указывать размеры в виде диапазонов «от и до» с помощью minmax ? Еще столько всего предстоит открыть! Я знаю, это может показаться слишком необъятным. Продвигайтесь понемногу. Верстайте. Экспериментируйте. Нельзя мгновенно понять сразу всё, это нормально.

960 Gr >

  • Сайтостроение
  • Статьи
  • Веб-дизайн

Когда я впервые столкнулся с 960 Grid System, я был чрезвычайно взволнован тем, как просто с ее помощью можно реализовать сложные макеты.

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

При наличии такого количества кодов, разве можно просто создать макет?

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

Мы рассмотрим конкретно 960 Grid System , однако после прочтения этого руководства, вы увидите, что большинство других систем сеток очень похожи, и вам будет проще с ними работать после того, как вы поймете несколько основных принципов.

Дизайн на базе сетки

Прежде чем перейти к специфике 960 Grid System , давайте кратко рассмотрим дизайн на основе сетки в целом. Эта идея, конечно, не возникла с появлением Интернета. На самом деле, она происходит от одного из старейших и фундаментальных принципов проектирования: выравнивания.

Наш мозг привык упрощать вещи, чтобы их легче было понять. Именно поэтому мы стараемся навести порядок в вещах, которые кажутся хаотичными. Поэтому мы и видим изображения лиц в лунных кратерах.

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

Рассмотрим два макета страниц, которые представлены на рисунке ниже:

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

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

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

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

Дело в том, что сетки являются одним из самых простых и мощных способов создать порядок на странице. Они могут казаться холодными и жесткими, но помните, что они являются очень эффективными и действенными, к тому же они могут быть достаточно гибкими, если вы не боитесь, что ваше воображение увязнет во всех элементах, необходимых для организации структуры.

Зачем нужна система сеток?

960 Grid System – как и другие подобные инструменты – обеспечивает быстрый и простой способ создания макетов на основе сетки с помощью CSS. Это делается путем предоставления протестированных на совместимость с браузерами и оптимизированных предустановленных размеров столбцов, в которых вы можете размещать контент.

До CSS3, не так то и просто было разбить веб-страницу на столбцы, не прибегая к утомительным математическим вычислениям.

Например, если у вас есть контейнер шириной в 1000 пикселей, и вы хотите разделить его на три столбца, то это будет 333 и 1/3 пикселя на столбец (не лучшее число). Кроме того, столбцы должны быть разделены, иначе их содержимое сольется – значит нужно добавить отступ.

Если к этому добавить отступ в 10 пикселей с каждой стороны каждого столбца, мы должны дополнительно вычесть по 20 пикселей от ширины каждого столбца. Это дает нам 3 столбца примерно по 313 пикселей в ширину и с отступом в 10 пикселей с каждой стороны (даже в этом случае получается 999 пикселей, а не 1000).

Хотите создать 4 столбца чуть ниже? Тогда вы должны начать весь процесс подсчетов с начала и вычесть 80 пикселей отступа от 1000 пикселей общей ширины, а затем 920 пикселей разделить на 4, чтобы получить ширину столбцов в 230 пикселей.

Наконец, если вы хотите добавить боковую панель, которая будет иметь ширину в одну треть ширины страницы, вы должны создать столбец в 750 пикселей для контента и еще один в 250 пикселей для боковой панели, затем вычесть 40 пикселей отступа, чтобы получить ширину одного столбца 730 пикселей и 230 пикселей – ширину другого.

Уже запутались?

Как и многие веб-дизайнеры до вас. Это, конечно, не высшая математика, но это и не то, что вы хотите делать снова и снова, каждый раз, когда беретесь за новый проект.

Решение? Найти кого-то другого, кто разберется с этими сумасшедшими вычислениями ширины столбцов, забьет их в CSS-документ и позволит вам скачать его бесплатно. (Этим человеком оказался Натан Смит , создатель 960 Grid System ).

960 Grid System

960 Grid System – это простой способ создавать макеты сайтов с использованием сетки, которая имеет ширину 960 пикселей:

Причина, почему в качестве базовой ширины выбраны 960 пикселей, заключается в том, что число 960 дает возможность для создания большого количества вариантов разбивки на столбцы и отступы, используя при этом только целые числа. И эти варианты прекрасно вписываются в большинство расширений экранов.

960 GS выпускается в двух основных вариантах: сетка с 12 столбцами и сетка с 16 столбцами (возможно подключение 24-разрядной версии, для тех, кому нужен экстремальный контроль дизайна).

В версии из 12 столбцов, самый узкий столбец имеет ширину 60 пикселей. Ширина каждого следующего столбца увеличивается на 80 пикселей.

Таким образом, доступные размеры ширины столбцов составляют: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 пикселей:

В 16-разрядной версии самый узкий столбец имеет ширину 40 пикселей, и каждый следующий столбец становится шире на 60 пикселей.

Таким образом, доступные размеры ширины столбцов составляют: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 пикселей:

Сессии CSS классов

Когда вы смотрите на приведенные выше диаграммы, то каждую из темно-синих горизонтальных полос можно рассматривать в 960 Grid System , как класс CSS.

Чтобы создать объект в структуре вашей страницы, ширина которого соответствует ширине одного из этих блоков, нужно просто присвоить ему в div надлежащий класс – вот и все!

Классы имеют показательные названия в соответствии с их размерами сgrid_1 — самый узкий класс CSS, grid_12 – самый широкий (в версии с 16 столбцами самый широкий класс – grid_16 ).

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

Эта система названий позволяет невероятно просто за считанные секунды составлять сложные макеты. Для того чтобы заполнить всю ширину страницы используется хитрая уловка. Суть ее заключается в том, что сумма номеров выбранных классов должна равняться 12 в 12-разрядной версии и 16 в 16-разрядной версии.

Например, в версии с 12 столбцами, если у вас есть 3 блока текста, которые вы хотите разместить бок о бок в 3 столбца, просто присвойте класс gr >

Аналогично, присвоив класс CSS grid_4 в версии с 16 столбцами, можно легко создать макет из 4 столбцов (4+4+4+4=16):

Чтобы быть уверенными, что вы использовали соответствующие классы, не забудьте разместить элементы 12-разрядной версии внутри div с классом container_12, а классы 16-разрядной версии внутри div с классом container_16 .

Если вы никогда до этого не работали с 960 GS, я рассчитываю, что прямо сейчас у вас вырвется восклицание на манер « Вот оно как! », которое будет относиться к тому, насколько просто манипулировать макетом с помощью этой системы.

Push Me, Pull Me

960 Grid System позволяет независимо перемещать элементы, перетаскивая их вдоль горизонтального края. Это достигается с помощью классов CSS push и pull .

Рассмотрим два примера, приведенные на рисунке ниже. Первый пример является макетом, состоящим из 4 столбцов, использующим только класс grid_3 .

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

Имейте в виду, что вы можете перетаскивать блоки куда угодно. Если бы я захотел перетащить элемент из двух столбцов, я бы реализовал класс push_2 , и так далее.

Система push/pull глубоко затрагивает структуру страницы в HTML-документе.

Например, представьте, что в приведенном ниже примере мы вводим имя сайта в логотипе и помещаем его в первый элемент на странице.

Логотип является одним из важнейших элементов сайта, и вы хотели бы, чтобы он присутствовал в качестве первого пункта HTML-разметки. В тоже время, чтобы визуально он выводился в центре страницы.

Чтобы визуально расположить элемент логотипа между двумя текстовыми столбцами, вы должны использовать следующий HTML-код:

В результате выводимый макет будет выглядеть следующим образом:

После перетаскивания:

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

Полностью пустые пространства

Вы будете часто сталкиваться с ситуацией, когда вам нужно создать в макете пустое пространство (негативное пространство — это отличный инструмент управления дизайном).

Чтобы достичь этого, для блоков div применяются классы prefix и suffix . Их реализация очень похожа на реализацию классов push и pull.

Например, чтобы оставить пустое пространство, которое будет по ширине равно одному столбцу, используйте перед элементом класс prefix_1 или после элемента класс suffix_1 :

Как видите, в приведенном выше примере используется класс suffix_3 , чтобы создать после него пустое пространство шириной в три столбца.

Начало и конец

И в заключении я хочу дать вам немного информации о классах alpha (« первый «) и omega (« последний «), которые должны применяться к любым элементам сетки, которые являются дочерними для других сеток.

Очевидно, что класс alpha будет применяться к первому дочернему элементу, а класс omega к последнему.

По существу, эти классы задают границы зоны, в которой вы можете размещать модули сетки внутри других модулей.

Подводя итоги

Получив эти новые знания, теперь вы должны чувствовать себя экспертом 960 Grid System .

Базовые принципы системы включают в себя всего 5 концепций, которые вы должны помнить:

  • используйте класс container_12 для версии системы с 12 столбцами и container_16 для версии с 16 столбцами;
  • используйте классы grid_1 , grid_2 , grid_3 и т.д., чтобы установить ширину столбцов. Если вы хотите заполнить горизонтально всю ширину страницы, убедитесь, что сумма номеров классов равняется 12 или 16 соответственно ( grid_4 + grid_2 + grid_6 = 12);
  • используйте классы push и pull , чтобы самостоятельно размещать элементы на странице, независимо от их положения в документе разметки;
  • используйте классы prefix и suffix , чтобы создавать пустые пространства в макете;
  • используйте классы alpha и omega , чтобы установить границы для любых вложенных элементов сетки.

В 960 Grid System используется также сброс CSS. Это опциональный файл, в основе которого лежит популярный набор сброса CSS Эрика Мейера . Если он вам понравится, используйте его. Если нет, отправьте его в корзину!

Ресурсы 960 Grid System

Теперь, когда вы являетесь экспертом веб-дизайна на основе сетки и 960 Grid System , вот несколько инструментов и ресурсов, с которыми вы можете ознакомиться, чтобы еще больше разобраться в этой теме.

Fluid 960 Grid System

Замечательная адаптивная версия 960 GS ! Плавающие веб-макеты позволяют скорректировать структуру, чтобы она соответствовала странице. В них применяются некоторые действительно сложные коды, но если вы используете эту систему, она будет делать всю тяжелую работу за вас:

The 1KB CSS Grid

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

Variable Grid System

Простой и гибкий конструктор CSS сеток на базе 960 Grid System :

Grid-Based Design Gallery

Если вы скептически относитесь к 960 Grid System и к тому, что дизайн на основе сетки может предложить вам как веб-дизайнеру, ознакомьтесь с этой галереей макетов. Как видите, приложив немного фантазии и изобретательности, вы получаете просто безграничные возможности:

Typogridphy

Цитата с официального сайта: « Typogridphy – CSS фреймворк, разработанный, чтобы предоставить веб-дизайнерам и разработчикам интерфейсов возможность быстро создавать привлекательные сеточные макеты типографского качества »:

Tiny Fluid Grid

Это конструктор сеток для адаптивной версии описанной выше системы 1KB Grid System :

За рамки сетки

Стоит признать, даже со всеми возможностями, предлагаемыми сеточными системами наподобие 960 GS , до сих пор существует ряд ограничений. Никто не говорит, что все веб-сайты должны создаваться на основе сетки – это приведет к застою творчества и отсутствию развития новых макетов страниц.

Кроме того, поэкспериментировав с 960 GS , вы увидите, что существует множество способов выйти за рамки системы, что заставит вас переосмыслить свои проекты.

960 Grid System — и другие подобные ей системы – лишь обеспечивают прочную основу тех многих случаев, когда, создавая сайт, вы не стремитесь придумывать какой-либо революционный дизайн, а просто хотите передать информацию понятно и логично, в таком виде, с которым знакомо большое количество пользователей.

Ваши мысли по поводу сеточных систем?

Оставьте свой комментарий и расскажите нам, какую сеточную систему вы предпочитаете, а также была ли вам полезна приведенная нами информация. Какие преимущества вы видите в сеточных системах, какие недостатки? Поделитесь своими мыслями с нами.

Данная публикация представляет собой перевод статьи « The 960 Grid System Made Easy » , подготовленной дружной командой проекта Интернет-технологии.ру

Все про grid. Наиболее полное руководство по css grid.

Все про grid. Наиболее полное руководство по css grid.

Здравствуйте! В этой статье я хотел бы обобщить все те свойства grid layout, которые были рассмотрены в предыдущих уроках по верстки на grid. Система grid позволяет задавать направление элементам на странице сразу в 2-х направлениях в отличие от того же Flexboxa где можно задавать только в одном направлении.

Терминология CSS Grid

Прежде чем мы начнем разбираться со свойствами Grid layput давайте познакомимся с некоторыми терминами верстки на гридах.

Контейнер сетки

Контейнер представляет из себя родительский элемент к которому применено свойство display: grid. Например:

В примере в качестве контейнера используется div с классом container.

Элемент сетки

Каждый вложенный элемент в родительский является элементом сетки. Например:

В примере каждый div с классом item будет являться элементом сетки.

Линии сетки

Это разделительные линии которые проведены между всеми элементами в сетке. Они могут быть как горизонтальные так и вертикальные.

Трек сетки

Представляет из себя некое пространство между двумя линиями сетки.

Ячейка грида или сетки

Это пространство между двумя соседними клетками в сетке.

Область сетки.

Эта область ограниченная 4-мя линиями в сетке грид.

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

Содержание

Свойства для контейнера

Свойства для дочерних элементов

Свойства для родительского элемента сетки (контейнера).

display

Задает сетку для родительского элемента. Принимает следующие значения:

  • grid — формирует сетку как грид
  • inline-grid — делает инлайновую сетку на практике это свойство редко применяется
  • subgrid — используется в том случае если ваш элемент также является и вложенным элементом в другой сетки, то при задании этого свойства размеры будут взяты у родительского элемента а не буду определять собственный.

И особенно хочется отметить, что в гридах не будут работать свойства float, clear, vertical-align.

grid-template-columns grid-template-rows

Собственно задают строки и столбцы сетки, то есть определяют размер сетки. Можно задавать как фиксированные значения в px, % так и в относительных единицах, определяющих количество свободного пространства в сетки — fr. Также можно для удобства именовать линии сетки.

А вот пример с именованными линиями грид.

Да кстати повторяющиеся части вы всегда сможете заменить с помощью функции repeat().

С помощью свойства fr можно задать для элемента, чтобы он занимал все свободное пространство. Свободное пространство будет вычислено после подсчета всех фиксированных размеров, а при отсутствии таковых оно будет равномерно перераспределено между всеми элементами.

grid-template-areas

Позволяет для вашего шаблона задать именованные области, которые описаны для дочерних элементов с помощью свойства grid-area. Значения:

  • name — имя области
  • . — точка означает что ячейка пустая
  • none — область не задана

Пример создаст сетку из 4 колонок и 3 строк. 1-я строка будет состоять из области header, во 2-й строке будут 2 ячейки main, пустая ячейка и ячейка sidebar и 3-я строка будет полностью состоять из footer.

У каждой строки должно быть одинаковое количество ячеек.

grid-template

Представляет собой сокращенное свойство от свойств grid-template-rows, grid-template-columns, grid-template-areas. Значения:

  • none — установит все 3 свойства в их начальное значение
  • subgrid — установит grid-template-rows и grid-template-columns в subgrid, а grid-template-areas в начальное значение.
  • grid-template-rows/grid-template-columns — задает значения для строк и столбцов сетки грид соответственно

grid-column-gap grid-row-gap

Задает отступы между элементами в сетке. Значения:

  • size — размер отступа для элементов.

Следует заметить, что отступы задаются только между колонками и строками, но не задаются для внешних краев элементов сетки.

grid-gap

Сокращенное свойство для grid-column-gap и grid-row-gap. Пример:

Если не задать значение для grid-row-gap, то ему присваивается такое же значение как и для grid-column-gap.

justify-items

Это свойство выравнивает содержимое вдоль оси строки то есть по горизонтали. Значения:

  • start — выравнивает содержимое по левому краю
  • end — выравнивает содержимое по правому краю
  • center — выравнивает содержимое по середине
  • stretch — растягивает элементы равномерно

align-items

Выравнивает содержимое элементов по оси столбцов или по вертикальной оси. Значения:

  • start — выравнивает содержимое по верхнему краю
  • end — выравнивает содержимое по нижнему краю
  • center — выравнивает содержимое по середине
  • stretch — растягивает элементы равномерно по высоте, таким образом они заполняют собой всю ячейку по высоте

justify-content

Выравнивает сетку вдоль оси строки в случае если размер сетки больше размера контейнера, такое может произойти при установки размеров элементам в пикселах, то есть если вы задаете фиксированные размеры для элемента. Значения:

  • start — выравнивает сетку по левой стороне контейнера
  • end — выравнивает сетку оп правой стороне контейнера
  • center — выравнивает сетку по центру контейнера
  • stretch — элементы заполняют всю ширину кониейнера
  • space-around — задает одинаковые отступы между элементами и полуразмерные отступы по краям
  • space-between — задает одинаковое расстояние между элементами без отступов по краям
  • space-evenly — задает одинаковые отступы между элементами и полноразмерные отступы по краям

align-content

Выравнивает сетку вдоль оси столбца в случае если размер сетки больше размера контейнера, такое может произойти при установки размеров элементам в пикселах, то есть если вы задаете фиксированные размеры для элемента. Значения:

  • start — выравнивает сетку по верхней стороне контейнера
  • end — выравнивает сетку оп нижней стороне контейнера
  • center — выравнивает сетку по центру контейнера
  • stretch — элементы заполняют всю ширину кониейнера
  • space-around — задает одинаковые отступы между элементами и полуразмерные отступы по краям
  • space-between — задает одинаковое расстояние между элементами без отступов по краям
  • space-evenly — задает одинаковые отступы между элементами и полноразмерные отступы по краям

grid-auto-columns grid-auto-rows

Определяет размер созданных элементов, в том случае если они создаются не явно. Значения:

  • size — размер элементов в любой доступной едеинице измерения

Чтобы понять как работают эти свойства давайте рассмотрим сетку 2х2.

А теперь представте, что мы с помощью свойств grid-column и grid-row позиционируем элементы следующим образом:

То есть мы указываем элементу .item-2 чтобы он начинался на 5 линии и заканчивался на 6. Поскольку мы ссылаемся на несуществующие линии, то создаются так называемые неявные треки, чтобы заполнить собой пространство. Вот для задания ширины этим трекам и используются свойства grid-auto-columns и grid-auto-rows.

grid-auto-flow

Когда у вас есть элементы в сетке которые вы явным образом не позиционируете явным образом в сетке. Для размещения этих элементов запускается алгоритм авторазмещения, чтобы их разместить. Значения:

  • row — строки заполняются поочередно. Новые строки добавляются при необходимости
  • column — столбцв заполняются поочередно. Новые столбцы добавляются в случае необходимости
  • dense — пустые пространства в сетке заполняются в случае появления более мелких элементов позже

Пусть есть такой HTML:

Определим для них сетку с 5 столбцами и 2 строками. Свойство grid-auto-flow установим в row.

И укажем размещения в сетке только для двух элементов.

В результате получим такую сетку

Если установить grid-auto-flow в значение column, то получим уже такую сетку.

Сокращенное свойство для всех вышеописанных свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow. Это свойство также задает grid-column-gap и grid-row-gap на их значения по умолчанию. Значения:

  • none — задает всем свойствам их значения по умолчанию
  • grid-template-rows / grid-template-columns — задает соотвественно значения для grid-template-rows и grid-template-columns.
  • [ [ / ] ] — задает значения для свойств grid-auto-flow, grid-auto-rows и grid-auto-columns соответственно.

Свойства дочерних элементов

grid-column-start grid-column-end grid-row-start grid-row-end

Определяют местоаоложение элемента в сетке grid-column-start/grid-row-start это линия с которой элемент будет начинаться, а grid-column-end/grid-row-end это линия на которой элемент будет заканчиваться. Значения:

  • line — может быть любым числом, которое ссылается на прономерованную линию
  • span число — элемент, который будет распространяться на некоторое количество ячеек
  • spаn имя — элемент будет распространяться до линии с указанным именем
  • auto — задает автоматическое расположение элементов

grid-column grid-row

Сокращенное свойство для grid-column-start + grid-column-end, и grid-row-start + grid-row-end. Значения:

  • start/end — значения где начинается элемент и где он заканчивается

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

grid-area

Задает название элементу, чтобы можно было на него сослаться с помощью свойства grid-template-areas. Значения:

  • name — задает имя для элемента
  • / / / — можно задавать нумерацию и название линий

justify-self

Позволяет выравнивать содержимое элемента вдоль оси строки. Применяется непосредственно к содержимому элемента. Значения:

  • start — выравнивает содержимое по левому краю
  • end — выравнивает содержимое по правому краю
  • center — выравнивает содержимое по середине
  • stretch — растягивает элементы равномерно

align-self

Позволяет выровнить элемент вдоль столбца. Выравнивается содержимое элемента. Значения

  • start — выравнивает содержимое по верхнему краю
  • end — выравнивает содержимое по нижнему краю
  • center — выравнивает содержимое по середине
  • stretch — растягивает элементы равномерно по высоте, таким образом они заполняют собой всю ячейку по высоте

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Вся документация по свойству grid находится на официальном сайте.

Для быстрого изучения темы рекомендуем пройти 11-ти дневный марафон Grid CSS

display

inline-grid
subgrid

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

Применяется ко: всем элементам.

grid формирует сетку как блок. inline-grid формирует сетку как строчный блок. subgrid если ваш контейнер это ещё и элемент (вложенная сетка), то вы можете использовать это свойство для обозначения того, чтобы размеры строк/колонок были взяты из родительского элемента, а не определяли собственный.

justify-items

start
center
stretch

Выравнивает содержимое вдоль оси строки (в отличии от align-items который выравнивает элементы вдоль оси столбца). Это значение применяется ко всем элементам сетки внутри контейнера.

Наследуется: нет.

Применяется ко: всем элементам.

Значение по умолчанию: legacy.

start выравнивает содержимое по левой стороне области. end выравнивает содержимое по правой стороне области. center выравнивает содержимое по центру области. stretch заполняет всю ширину области (по умолчанию).

align-items

start
center


stretch

Выравнивает содержимое вдоль оси столбца (в отличии от justify-items который выравнивает элементы вдоль оси строки). Это значение применяется ко всем элементам сетки внутри контейнера.

Наследуется: нет.

Применяется ко: всем элементам.

Значение по умолчанию: normal.

start выравнивание элементов по верхней части области. end выравнивание элементов по нижней части области. center выравнивание элементов по центру области. stretch заполняет всю высоту области (по умолчанию).

justify-content

start
center
stretch
space-between
space-around
space-evenly

Это свойство выравнивает сетку вдоль оси строки (в отличии от свойства align-content, которое выравнивает сетку вдоль оси столбца)

Наследуется: нет.

Применяется к: block контейнерам, flex контейнерам и grid контейнерам.

Значение по умолчанию: normal.

start выравнивает сетку по левой стороне контейнера. end выравнивает сетку по правой стороне контейнера. center выравнивает сетку по центру контейнера. stretch масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера. space-around одинаковое пространство между элементами, и полуразмерные отступы по краям. space-between одинаковое пространство между элементами, без отступов по краям. space-evenly одинаковое пространство между элементами, и полноразмерные отступы по краям.

Grid в CSS

CSS Grid Layout — это новое многообещающее явление в мире верстки. Используя Grid, можно построить макеты, которые ранее невозможно было построить в CSS. С ним возможности чуть ли не безграничны. Grid претендует на звание «лучшей системы для вёрстки макетов HTML». В этой статье я попробую разобраться какой он, этот Grid, на вкус и доступно поделиться знаниями с вами.

Grid поддерживается уже почти всеми браузерами, поэтому изучать уже пора!

Grid — это сетка с элементами на ней. Расставлять элементы можно как угодно. Представьте себе шахматную доску и фигуры, Grid контейнер это доска, элементы это фигуры. А дальше ставь как нравится.

Grid — это набор горизонтальных и вертикальных «линий», которые пересекаются между собой и создают сетку из рядов и колонок. Элементы могут быть помещены в сетку, опираясь на номер линии или номер ряда/колонки.

Чтобы разобраться с Грид-сеткой нужно понять из чего конкретно состоит эта сетка. Для этого хорошенько изучите схему ниже и описание к ней.

Схема Grid сетки.

Описание Грид сетки

Контейнер — содержит Grid сетку, в которой находятся элементы.

Элементы — HTML элементы внутри сетки. Ими станут HTML элементы первого уровня (прямые дети контейнера). Чтобы элемент появился в сетке, в нем (внутри) элемента должно быть хоть что-то (текст, другие HTML теги). Пустой элемент — это всего лишь ячейка для расположения в нем чего-либо.

Линии — это образные линии (на самом деле никаких линий нет), разделяющие сетку на колонки и ряды, они создают структуру сетки. Линии автоматически нумеруются. Также линиям можно указывать имена, чтобы потом прикреплять к ним элементы по номеру или по имени линии. По сути линия — это номер или имя колонки/ряда. Расстояние между линиями (колонками/рядами) можно указать через grid-gap: , grid-row-gap: , grid-column-gap: .

Ряд/колонка (row/column, track) — все что находится между соседними линиями, т.е. линии разделяют сетку на ряды и колонки.

Ячейка (cell) — место куда будет расположен элемент. Ячейка это пересечение колонки и ряда.

Область (area, поле) — объединение одной или нескольких ячеек в общую ячейку (поле). Это такая большая ячейка также ограниченная линиями. Области можно задать имя, чтобы удобно было помещать туда элементы.

  • Разрыв (gap) — расстояние между рядами и колонками. Разрывает линию на две. Так между линиями, а как следствие и колонками/рядами, ячейками появляется пустое место. Это своего рода margin , border-spacing между ячейками. По умолчанию линия между ячейками всего одна (ячейки слеплены), но если указать разрыв, то мы разорвем линию, и появится расстояние между колонками/рядами, при этом номер или имя линии (колонки/ряда) остается одно.
  • Для включения Grid, любому HTML элементу достаточно присвоить css свойство display:grid; или display:inline-grid; .

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

    Пример создания грид-блока с двумя колками и тремя рядами разных размеров:

    Особенности Grid

    Элементы Grid сетки можно расставлять сразу на несколько полей сетки. Можно менять направление или расположения элементов в сетке. Колонкам и рядам можно давать имена. Можно создавать шаблон сетки и расставлять элементы по шаблону.

    Размеры колонок/рядов. Сетку можно создавать с точными или гибкими размерами колонок/рядов (шириной/высотой). Точные это px , em , % , а гибкие новая единица измерения в grid fr (фракция — свободное место в сетке).

    Расположение элемента. Элементы можно размещать в указанном месте сетки, указав номер колонки/ряда или их имя (если оно есть). Или путем привязки элемента к области Grid (область нужно создать). Если не указать конкретное расположение элемента в сетке, то элемент размещается по умолчанию в первую свободную ячейку: как во flex: по горизонтали (→) или по вертикали (↓). Поведение по умолчанию можно изменить через свойство grid-auto-flow: .

    Выравнивание элементов. Элементы внутри ячейки можно выравнивать по горизонтали/вертикали. Выравнивается вложенный в ячейку элемент, а не сама ячейка. Например, в контейнере есть вложенный элемент первого уровня (это ячейка), внутри него есть «текст» или какой-то «div» (текст или div — это реальный элемент) выравнивание элемента выровняет вложенный в ячейку элемент внутри ячейки (размеры ячейки при этом не изменятся).

    Несколько элементов в одной ячейке. В одной ячейке или области можно разместить несколько элементов. Чтобы указать кто «выше» (важнее) и кто «ниже» (неважный), нужно использовать css свойство z-index: .

  • Расширение сетки. Сколько колонок/рядов имеет сетка обычно указывается сразу, но если разместить элемент за пределами сетки (указать ему номер ряда/ячейки, который выходит за пределы сетки), тогда сетка автоматически расширяется и создаются дополнительные линии (колонки/ряды).
  • меню

    CSS свойства Gr >

    Включает grid свойство для элемента. Под это свойство попадает сам элемент и вложенные в него элементы: затрагиваются только потомки первого уровня — они станут элементами grid контейнера.

    • grid — элемент растягивается на всю ширину и имеет свое полное пространство среди окружающих блоков. Происходит перенос строк в начале и в конце блока.
    • inline-grid — элемент обтекается другими элементами. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.

    grid и inline-grid отличаются тем что по-разному взаимодействуют с окружающими элементами, подобно display:block и display:inline-block .

    Указывают из скольки рядов (строк) и скольки колонок состоит сетка и какие у них размеры. Т.е. указывается сразу два понятия: сколько и какой размер.

    В значении через пробелы указываются размеры: высота ряда (rows) или ширина колонки (columns). Сколько раз будет указан размер, столько будет рядов/колонок.

    размер — это высота ряда или ширина колонки, может быть:

    px, em, %, vh, vw — размер абсолютный (px, pt), относительный (em, vw, vh) или в % от ширины/высоты контейнера.

    fr (фракция — свободное место в сетке) — специальная единица измерения в grid. Свободное место в контейнере делится на фракции, так если одной колонке указать 1fr , а другой 2fr , то вторая будет больше первой в 2 раза и обе они заполнят все свободное пространство. Аналог flex-grow: у флексов. Тут можно также указывать дробные значения: 0.5fr, 2.3fr .

    min-content — наименьший размер контента. Для текста это ширина самого длинного слова или неразрывного фрагмента.

    max-content — наибольший размер контента. Для текста это длина самой большой строки без переносов.

    auto — размер ряда/колонки подстраивается под размеры элементов, так, чтобы уместился самый большой из них. Не дает сжиматься меньше min-width или min-height самого широкого или высокого элемента соответственно. Не дает растягиваться больше, чем max-content . Если в контейнере есть свободное место, то размер может растянуться до конца контейнера.

    fit-content( max ) — функция которой передается макс. размер. Если контент меньше этого размера, ведет себя как auto , если больше, то ограничивает размер ряда/колонки до указанного в параметре max.

    line-name (имя линии) — перед размером можно указать (создать) имя для линии (ряда/колонки). Имя указывается в квадратных скобках [имя] 100px . Также можно указать сразу несколько имен через пробел внутри квадратных скобок: [имя еще_имя] 100px . Символы в имени можно использовать любые, в том числе кириллицу.

  • last-name (последнее имя) — указанное имя станет именем начальной линии ряда/колонки, но ряд/колонка состоит из двух линий (они ведь имеют размер). Так имя линии является именем начала одной колонки (ряда) и именем конца предыдущей колонки (ряда). И так вот заполняется сетка, но в конце остается ряд/колонка и указанное для неё имя это имя только начальной линии этого ряда/колонки, а у конечной линии имени нет. Такое имя последней линии можно указать в конце. Т.е. получается так: [имя] 100px [имя2] 100px [последнее-имя] .
  • У двух этих свойств есть сокращенные записи:

    Примеры:

    Создадим сетку (контейнер) с тремя колонками и тремя рядами последняя колонка и ряд будут иметь одинаковое имя ‘main’

    Если не указать имя, то ряд/колонка автоматом получает два порядковых числовых имени: положительное и отрицательное:

    Укажем конкретные имена (обратите внимание как указывается имя для последней линии):

    Меню может иметь не одно, а несколько имен, этот пример добавляет два имени row1-end и row2-start :

    Если в перечисление размеров колонок есть повторяющиеся части, то можно использовать функцию repeat() :

    Если несколько строк имеют одно и то же имя, на них можно ссылаться по имени и порядковому числу:

    fr позволяет указать размер относительный оставшегося свободного места в контейнере. В этом примере свободное место в контейнере делится на число указанных фракций (у нас 3) и для каждой определяется ширина. Так если ширина контейнера 90px то каждая колонка будет шириной по 30px.

    Свободное пространство высчитывается после того как посчитаны жесткие размеры (включая разрывы). В этом примере размер свободно пространства высчитывается как ширина контейнера минус 50px.

    Позволяет создать визуальный шаблон сетки. В этом свойстве задаются имена ячейкам, а затем элементы привязываются к этим именам через свойство grid-area: указываемое для отдельного элемента.

    Синтаксис шикарен, потому что визуально показывает как выглядит сетка:

    «имя имя2 имя3» — в значении внутри кавычек нужно через пробелы указывать имена. Каждые кавычки с именами будут представлять собой ряд сетки, а имена внутри кавычек задают имена ячейкам внутри этого ряда.

    «имя имя имя2» — если указать одно и тоже имя несколько раз подряд, то имя объединит ячейки и мы получим область (большую ячейку). Объединять ячейки таким способом можно не только внутри ряда, но и между рядами.

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

  • none — область не определена
    • Символы в имени можно использовать любые, в том числе кириллицу.

    Каждый ряд должен иметь одинаковое количество ячеек.

    При использовании этого метода линии (включая последнюю линию) получают имена автоматически. Например, если область называется bar , то имя начальной линии ряда и колонки у этой области будет bar-start , а имя последней bar-end . Это значит, что некоторые линии будут иметь много имен. Например крайняя левая линия из примера ниже (шаблон страницы) будет иметь сразу три имени: header-start , main-start и footer-start .

    Такая же логика работает и наоборот, если линиям указать имена дом-start и дом-end , то все что находится межу этими линиями превращается в область (ячейку) с именем дом .

    grid-template-areas: также можно указывать в первом значении свойств:

    Примеры:

    Шаблон страницы. Создадим сетку с четырьмя колонками и тремя рядами. Весь верхний ряд будет шапкой (header), средний ряд будет контентом (main) и сайдбаром (sidebar), между которыми оставим место (.). И последний рад будет подвалом (footer).

    Размеры и области можно указывать одновременно:

    Позволяет разом указать три свойства: grid-template-rows , grid-template-columns и grid-template-areas .

    Примеры:

    В первом параметре (в рядах) можно указать шаблон (области). 25px — это высота ряда.

    Также можно указывать имена для линий ряда:

    Полное руководство по использованию CSS Grid

    . После создания сетки линии сетки, представленные пунктирными линиями на изображениях, являются автоматически пронумерованы сверху для строк или слева для столбцов. Строкам также присваивается второе отрицательное число относительно их индекса со дна для строк или справа для столбцов.

    Например, первая пунктирная вертикальная линия слева в сетках выше 1 и -5 а третья — 3 и -2 . Эти числа могут использоваться как граничные линии предметов, помещенных в сетку. Строки сетки также могут быть названы путем добавления строки между квадратными скобками в объявлениях свойств, например. grid-template-rows: [1st] 1fr [second-line] 1fr [last] .

    Сетка с минимальной и максимальной высотой, созданной с использованием комбинации блоков px и fr и функции [minmax() ]

    Аналогично Flexbox горизонтальное и вертикальное положение предметов, помещенных в сетку, можно контролировать, установив jus и соответственно, начало центр конец или stretch ,

    То же самое применимо для столбцов сетки и позиций строк в контейнере большего размера, используя выравнивание-содержание и align-content соответственно. Допустимые параметры этих свойств также включают пробел между где дополнительное пространство разделено между столбцами / строками, а также пространство вокруг и пространство равномерно где пространство равномерно распределяется между столбцами / строками с тем же или половиной пространства на концах соответственно. Мы также можем определить align-content и justify-content (в указанном порядке) с использованием места-контента и выравнивающих элементов и с использованием позиций .

    Позиционирование позиций с использованием номеров строк

    Чтобы поместить элемент в сетку, мы можем установить его ] grid-column-start и grid-column-end к номерам вертикальных линий, между которыми элемент должен быть растянут. Для строк свойства: сетка-строка-старт и сетка-строка-конец — и, конечно, числа относятся к горизонтальным линиям.

    Items может содержаться в одной ячейке сетки или растягиваться через несколько столбцов и сеток

    Мы могли бы также использовать стенограммы grid-column и сетки-строки установив их только в начальную линию сетки, в результате чего элемент автоматически растягивается до следующая линия сетки. В соответствии с изображением выше, используя эти методы, item1 можно поместить между вертикальными линиями 2 и 4 и горизонтальными линиями 3 и -1 (последняя линия или первая снизу) и пункт2 с вертикальной линии 3 и горизонтальной линией 1 на следующие линии сетки, используя:

    Чтобы упростить далее, декларации grid-column-start: 2 и конец сетки-столбца: 4 можно объединить вместе как grid-column: 2/4 с тем же значением, что и для строк с использованием строки сетки .

    Оговорка с использованием этих методов размещения заключается в том, что некоторые из объявлений являются несколько неправильными. Например, grid-column-end: 4 и grid-column: 2/4 могут быть неверно истолкованы как означающие «размещение конечных элементов в столбце 4» и «место в столбцах 2» , 3 и 4 ‘соответственно. Это, конечно, не так, поскольку числа представляют собой линии сетки, а не столбцы. Чтобы избежать этого потенциального ловушка, мы можем объявить номер строки стартовой сетки и количество столбцов или строк, которые должен охватывать элемент, используя ключевое слово span.

    Используйте ключевое слово span, чтобы определить количество столбцов или строк, которые вы хотели бы использовать для объекта

    Используя эти методы, мы можем изменить положение item1 между горизонтальными линиями 2 и 4 и вертикальными линиями 1 и 2, и пункт 2, начиная с вертикальной линии 2 и охватывая три столбца и от горизонтальной линии 3, охватывающей две строки (как показано на рисунке выше), используя:

    Верьте или нет, размещение позиций может быть еще более упрощено с помощью свойства сетки что является сокращением для сетки-строки-начала grid-column-start grid-row-end и grid-column-end в этом порядке. Если определены только первые два свойства, элемент будет автоматически помещаться между этими строками и следующими.

    Это свойство сетки также позволяет сочетать номера строк с ключевым словом span. Применяя эти методы, мы можем переместить item1 и item2 как таковые:

    Позиционирование элементов с использованием названий областей

    Хотя использование номеров линий сетки и ключевого слова — отличный способ позиционирования элементов, есть еще более интуитивно понятный и простой способ размещения элементов в сетке. Это связано с использованием свойств сетки и grid-template-areas .

    Чтобы достичь этого, каждый элемент, который должен быть помещен в сетку, должен сначала получить имя, установив его свойство grid-area в строку, которая затем может быть включена в сетку ] [-1959015]. Затем становится возможным определить grid-template-areas с помощью визуальной «карты», в которой строки заключены в кавычки, причем содержимое каждой ячейки сетки представлено строкой, относящейся к сетке -area имена предметов.

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

    Как создать отзывчивый макет с использованием CSS Grid

    CSS Grid можно использовать со средствами массовой информации для реструктуризации элементов на разных размерах экрана без изменения разметки.

    Предположим, у нас есть список элементы, созданные из этой разметки HTML (рисунок 1):

    Используя то, что мы узнали о Grid, до сих пор мы можем применять стили для экранов, размер которых превышает 720 пикселей, используя медиа-запрос (рисунок 2):

    Мы также можем легко переместить и изменить размер элементов для больших экранов, которые более 1000 пикселей, используя другой медиа-запрос (рисунок 3):

    Это еще не все — количество столбцов и строк сетки можно даже изменить, чтобы при необходимости разрешить определенные размеры экрана, переопределив grid-template-columns ] и / или grid-template-rows в медиа-запросах.

    Элементы перекрытия также могут быть достигнуты с помощью CSS Grid. Несколько элементов могут занимать одни и те же ячейки сетки и, следовательно, могут перекрываться друг с другом, используя свойства z-index элементов для управления порядком, в котором они складываются.

    Например, мы можем добавить полупрозрачный элемент с панелью инструментов класса внутри контейнера сетки и поместить его в самый правый столбец, чтобы он перекрывался со всеми другие элементы (рисунок 4):

    Последний вопрос, который мы обсудим, — это расстояние между столбцами и строками или промежутками (рис. 5). Элементы в сетке можно разделить с помощью grid-column-gap или свойства сетки-строки-пробела которые задают размер промежутка между столбцами и строками соответственно. Штриховая ячейка сокращенного свойства может устанавливать оба.

    CSS Grid fallbacks для старых браузеров

    Разметка CSS-сетки свойства ниже мобильных свойств обеспечивают браузеры, которые все еще не поддерживают Grid, будут игнорировать его и отображать мобильную версию. В качестве альтернативы мы можем добавить базовый резервный макет с использованием @supports — запроса, который применяет правила на основе поддержки браузера для конкретной функции CSS. Таким образом, мы можем установить резервный макет для размеров экрана, превышающий 720px:

    Если по какой-то причине вам понадобится этот резерв, который будет показан для Internet Explorer 10 и 11, которые не поддерживают Grid, или, как это ни парадоксально, запрос @supports вы может использовать хорошо известный запрос, который применяет стили только в IE10 и 11:

    Если вам нужна поддержка IE9 и старше, загрузите дополнительную таблицу стилей в HTML с соответствующими стилями, используя:

    Ресурсы CSS Grid

    Для получения дополнительной информации и руководств по CSS-грид-модулю рассмотрим следующие ресурсы.

    MDN web docs
    Как всегда, сайт веб-документации Mozilla Developer Network — отличное место для начала — или постоянного возврата в зависимости от того, насколько сильно ваша память — для ресурсов веб-разработчиков. В его макете страницы сетки CSS, в частности, есть объяснения всех свойств Grid, а также интерактивные примеры для вас.

    Scrimba interactive: CSS Grid tutorial
    Scrimba — это платформа интерактивных курсов кода. Вы можете приостанавливать видео, редактировать код в них и видеть результаты перед возобновлением учебника.

    Игра в грид-сад
    Отличный интерактивный способ обучения коду — это игры. Grid Garden — это онлайн-игра, в которой вы поливаете сад моркови, введя свойства CSS Grid в редактор.

    Эта статья изначально была опубликована в net всемирной бестселлером для веб-дизайнеров и разработчиков. номер 309 или подписываются .

    CSS Gr >

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

    Модуль CSS Grid получил поддержку множества современных браузеров (Safari, Chrome, Firefox) в этом году, так что всем фронтенд разработчикам так или иначе придется освоить эту технологию в брижайшем будущем.

    В этой статье мы быстро пробежимся по основам CSS Grid и не будем зацикливаться на всех тех моментах, о которых вам не нужно беспокоиться, пока вы не ознакомитесь с основами.

    Ваша первая сетка

    Два главных ингридиента CSS Grid – это обертка (wrapper) и элементы, которые она содержит. Обертка – это и есть сетка, а элементы выполняют роль содержимого. Вот пример разметки wrapper’а с шестью элементами:

    Чтобы превратить наш div элемент в сетку нужно всего лишь отобразить его как grid.

    Используем CSS свойство display: grid:

    Но пока что ничего не происходит, потому что мы еще не определились с внешним видом нашей сетки. На данный момент этот код просто накладывает 6 div’ов друг на друга.

    Колонки и ряды

    Чтобы сделать сетку сеткой нам нужно определить колонки (columns) и ряды (rows). Давайте создадим три колонки и два ряда используя свойства grid-template-row и grid-template-column.

    Введя три значения для grid-template-columns, мы получаем сетку, состоящую из трех колонок. Аналогично для grid-template-rows: 2 значения и две строки.

    Значение определяет насколько широкими мы хотим сделать наши колонки (100px) и какой высоты будут наши ряды (50px). Вот результат:

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

    Теперь наша сетка выглядит так:

    Расположение элементов

    Теперь вам необходимо научиться располагать элементы внутри сетки. Здесь во всей красе предстает главная супер-сила CSS Grid – возможность легко и просто создавать разметку страниц.

    Давайте создадим сетку 3х3, используя ту же разметку, что и ранее.

    Вот что получилось:

    Обратите внимание, что мы видим сетку 3х2 вместо 3х3. Это потому, что в нашей сетке всего 6 элементов, и если мы добавим еще 3 элемента, то третий ряд также заполнится.

    Чтобы позиционировать и изменять размеры наших элементов мы используем grid-column и grid-row свойства:

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

    Наверное, вас немного сбивает с толку, почему у нас 4 разделения на колонки, но самих колонок всего 3? Взгляните на эту картинку:

    Когда item1 занял весь первый ряд, он вытеснил остальные элементы вниз.

    А вот таким образом можно записать этот синтаксис в упрощенном виде:

    Чтобы вы полностью поняли концепцию, давайте снова изменим элементы.

    Вот как этот код отобразится на странице. Попробуйте осмыслить этот код, и понять, как он работает. Это не очень сложно.

    Вот и все! Конечно же, в этом руководстве не рассмотрено еще огромное количество концептов CSS Grid, но мы вернемся к ним в следующих туториалах.

    Автор оригинального текста: Per Harald Borgen

    Как начать работу с CSS Gr >АндрейCSS 3, css gr >0

    От автора: больше похоже на мое медленное продвижение в процессе изучения CSS Grid, руководство просто звучит круче. Когда я заканчиваю свой 10-ый CSS Grid pen* (моя 10-я годовщина, если хотите), я думаю, что могла бы также изложить (ха!) некоторые свои мысли. Может быть, кому-то эти заметки пригодятся?

    Начало работы

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

    Вокруг CSS Grid сейчас столько шумихи (и заслуженно); я продолжаю слышать о том, как это здорово, и в итоге это произвело на меня определенное, пугающее впечатление. Я думал, что это будет действительно сложно реализовать, и просто предполагала, что недостаток опыта в кодировании помешает мне понять или использовать концепции правильно.
    Поэтому, когда CSS Grid был выпущен, я даже не смогла заставить себя попробовать его.

    До определенного момента, я была слишком взволнована, чтобы попробовать. Но я знала, что единственный способ заставить себя что-то сделать — это просто погрузиться в это и разобраться.

    Подобно тому, как вы толкаете ребенка в бассейн, чтобы заставить его научиться плавать. Не делайте этого — это страшно и может травмировать ребенка — но я полагаю, что это приемлемая метафора для интересных проектов кодирования. Итак, вооружившись руководством по CSS Grid, я начала свое путешествие!

    1. Хорошо, с чего начать на самом деле

    С 3 основных свойств…

    Дополнительное свойство grid-gap для зазоров.

    Если вы зададите трек сетки с помощью этих объявлений, все прямые дочерние элементы будут перемещаться соответственно по порядку. Простой пример — эта карта бинго…

    … с таким треком сетки:

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

    … в нем используется этот трек сетки:

    Дополнительная полезная информация:

    repeat(x, y) — это всего лишь более простой способ написания кода. Итак, grid-template-rows: 200px 200px 200px auto; можно записать как grid-template-rows: repeat(3, 200px) auto;.

    fr — это новейшая единица. 1fr — это одна часть доступного пространства. Таким образом, если ширина div равна 500px, то repeat(5, 1fr) означает, что 500px будет разделен на 5 равных частей по 100px.

    Значения grid-template-rows и grid-template-columns в значительной степени не ограничены*. Вы можете задать grid-template-rows: 200px 100px 200px 100px 300px 250px 150px; и так далее.

    * На самом деле это не проверено, но я попробовала следующее:

    2. Свойства для дочерних элементов

    Далее идут свойства для дочерних элементов. Вы можете контролировать две важные вещи: а) положение и б) размер элементов.

    Чтобы получить длинный столбец, в котором находится лавовая лампа, необходимо указать следующие свойства:

    … для дочернего элемента.

    Это означает, что вы хотите, чтобы элемент занимал строки 2–3. Это также можно переписать так, grid-row: 2 / span 2, чтобы первая часть была строкой, в которой начинается элемент, а вторая часть — это количество ячеек, которые должен занимать элемент. Работает точно так же для колонок!

    Попутно другие интересные вещи

    Использование grid-auto-flow: dense, которое заставляет дочерние элементы заполнять пробелы, если они подходят им. Простая демо-версия.

    Это мое любимое свойство! Вам не нужно тщательно определять размещение для каждого дочернего элемента; очень удобно для элементов порт-фолио или фотогалерей.

    Перекрывающиеся дочерние элементы

    Я обнаружила эту особенность довольно поздно, что вдохновило мой десятый pen. Вы можете перекрывать элементы и указывать порядок с помощью z-index.

    Здесь перекрываются события календаря с использованием z-index.

    Сложная сетка треков с помощью grid-templates-areas

    Вы можете указать трек сетки, используя имена! Например:

    Для родительского элемента задано:

    Повторение имени означает, что дочерний элемент будет охватывать эти ячейки. В этом примере элемент с именем context будет занимать две ячейки в колонке и иметь ширину (60px + 700px). Именованный элемент pie-image будет занимать два ряда и иметь высоту (300px + 70px). Вы ‘называете’ дочерние элементы, используя свойство grid-area:

    Совет для сложных треков сетки

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

    Отдельное примечание

    Отдельное примечание касается того, чтобы вы не пытались делать что-то подобное.

    Это очень много работы. Самая крутая вещь в CSS Grid — это гибкость, и мне очень нравится использовать для макетов такие значения, как minmax или auto.

    Но чтобы использовать этот подход для того, что я считаю иллюстрацией … скажем, я потратила более 2 часов, пытаясь выровнять вещи правильно и чтобы каждый пиксель находился именно там, где я хочу. Извлеченный урок: дважды подумайте, прежде чем использовать CSS Grid для иллюстраций.

    Ладно, если честно, я не все правильно спланировала. Так что я думаю, совет будет такой — составляйте план перед выполнением.

    Как вы можете начать сами!

    Найдите вдохновение в чем-то и закодируйте это! Многие вещи могут быть преобразованы в эксперимент с CSS Grid.

    Вдохновение в ванной комнате

    Я имею дело с электронными таблицами каждый день

    Но вместо того, чтобы просто говорить, вот список вещей, которые вы можете попробовать:

    Просто: шахматная доска, макет комиксов

    Сложнее: меню ресторана, этикетки для продуктов питания, этикетки для футболок , макеты журналов, автостоянка.

    Сложно: чеки, газеты, панели инструментов, клавиатуры (как инструмент, так и та, на которой вы печатаете)

    Не беспокойтесь о вещах в сложном списке; они не обязательно должны быть сложными, они просто содержат компоненты, которые нужно продумать и спланировать при укладке треков сетки.

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

    Автор: Olivia Ng

    Редакция: Команда webformyself.

    Технология CSS Gr >Технология CSS Grid. Руководство по адаптивной верстке

    Верстка — это создание веб-страниц с помощью специальных языков. Верстка — это также интересная, постоянно меняющаяся область деятельности в создании сайтов. Это процесс перевода макета сайта, созданного дизайнером в графической программе, в HTML-страницу. При этом используются специальные языки, которые для этого предназначены: HTML, CSS, JavaScript. Соответственно, верстальщик — это человек, который занимается кодированием HTML-страницы.

    Верстальщик — это профессия, в которой можно постоянно развиваться, и очень много смежных профессий в веб-разработке неразрывно связаны с версткой.

    CSS Grid – высший пилотаж в верстке

    CSS Grid — это мощная новая технология в верстке. Она позволяет быстро создавать динамические, отзывчивые, современные макеты на чистом CSS. При этом код чище и проще в поддержке, по сравнению с традиционными методами верстки.

    Grid Layout — это новая модель макета, которая обладает мощными способностями контролировать размеры и расположение блоков, а также их содержимого.

    Она представляет собой набор горизонтальных и вертикальных линий, которые образуют сетку, состоящую из рядов и колонок. Технология основана на разделении пространства для макета на столбцы и строки, а также на использовании предсказуемого поведения размеров.

    Grid позволяет точно позиционировать и масштабировать блоки контента в областях сетки, получаемых при пересечении этих столбцов и строк. Таким образом, получаем очень гибкое поведение верстки при адаптации.

    Возможности CSS Grid

    Фиксированные и гибкие размеры полос Фиксированные и гибкие размеры полос

    Вы можете создать сетку с фиксированными размерами полос — например, используя пиксели. Вы также можете создать сетку с гибкими размерами, используя проценты или новую единицу измерения — fr, предназначенную для этой цели

    Расположение элемента Расположение элемента

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

    Создание дополнительных полос для хранения контента Создание дополнительных полос для хранения контента

    С Grid вы можете определить явную сетку с макетом, но спецификация также касается контента, размещенного за пределами объявленной области. При необходимости добавляются дополнительные строки и столбцы

    Управление выравниванием Управление выравниванием

    CSS Grid содержит функции, позволяющие точно, легко и интуитивно понятно контролировать, как именно элементы выравниваются после размещения в области сетки, и как выравнивается весь Grid Layout

    Управление перекрывающимся контентомУправление перекрывающимся контентом

    CSS Grid позволяет поместить в одну ячейку сетки более одного элемента. Также области могут частично перекрывать друг друга. Управление перекрывающимся контентом можно удобно контролировать с помощью свойства z-index

    В видеокурсе находится вся необходимая информация, как для новичков, так и более продвинутых разработчиков, изучив которую, можно начать самостоятельно заниматься версткой сайтов c нуля на достаточно продвинутом уровне.

    Благодаря курсу новички в сжатые сроки могут изучить HTML, CSS и новейшие технологии верстки, чтобы в последующем постепенно начинать верстать более сложные макеты.

    В этом пособии на практике используются самые актуальные в 2020 году и ближайшей перспективе технологии для верстки: Flexbox и CSS Grid. При этом все рутинные процессы автоматизированы при помощи последней версии Gulp 4.

    Введение в CSS Gr > Оригинал: Getting Started with CSS Grid, Robin Rendle

    Это была насыщенная неделя для разработчиков интерфейсов, поскольку CSS Grid попал в последние версии Firefox и Chrome без флага. Правильно: теперь мы можем пойти и поиграться с Grid в двух самых популярных браузерах.

    Но почему CSS Grid имеет большое значение?

    CSS Grid — первая реальная система построения сеток. Она предназначена для размещения контента как в столбцах, так и в строках, и, наконец, дает разработчикам почти неограниченный контроль над элементами на экране. Это означает, что мы можем, наконец, избавиться от многолетних хаков и обходных решений для размещения элементов на веб-странице — в конечном счете это означает, что сложные макеты теперь не только возможно реализовывать, но и легко поддерживать.

    С помощью CSS Grid веб станет гораздо более красивым, чем то, к чему мы привыкли.

    Хорошо, но как работает CSS Grid? Есть много сложных и ужасно подробных руководств, но я думаю, что мы должны начать с самых основ. То, что мы будем делать здесь, является относительно простой задачей размещения букв алфавита на странице.

    Для начала добавим разметку:

    Стилизуем эти буквы с помощью свойств font-size и color и центрируем в блоке с помощью свойств flexbox align-items и justify-content. И да, это правильно! CSS Grid не заменяет свойства flexbox, он дополняет то, что они уже делают. Мы можем использовать многие из этих свойств в сочетании с CSS Grid. Но сейчас вернемся к демонстрации:

    В примере выше у нас есть два простых div’а, расположенных друг под другом, потому что они по умолчанию — display: block. Установим для родительского элемента display: grid:

    Это приведет к следующему:

    Вы можете увидеть, что ничего не произошло. И вы будете правы! В отличие от display: inline-block; или display: inline; не совсем ясно, что происходит, когда мы устанавливаем свойство display в grid. Фактически, чтобы заставить нашу сетку что-то делать, нам сначала нужно задать ей определенное количество столбцов или строк. Выровняем буквы рядом друг с другом в два столбца:

    Давайте разберем эти новые строки кода. Сначала мы создаем два столбца нашей сетки с помощью grid-template-columns. Значение 1fr может показаться странным, если вы никогда его раньше не видели, но это валидная единица измерения в CSS, которая сообщает каждой колонке, что она будет занимать одну часть сетки. В нашем случае это означает, что сетка будет иметь два столбца равной ширины.

    Ура! Оно работает. Видите небольшой зазор между буквами? Это цвет фона, выглядывающий из-под блоков, поскольку мы задали значение свойства grid-column-gap 1px. Обычно задается больший зазор, особенно, для текстовых блоков, но в нашем случае достаточно и одного пикселя.

    А что произойдет, если добавить две новые буквы в разметку? Как это изменит страницу?

    Ну, технически это не изменит сетку — мы уже сказали, что она будет иметь две колонки, поэтому новые буквы будут расположены под ними.

    Странная вещь — почему нет зазора в 1px между буквами A и C или между B и D? Все правильно, свойство grid-column-gap устанавливает зазор только между столбцами. Чтобы исправить это, можно добавить свойство grid-row-gap:

    Теперь наш пример выглядит так:

    Мы создали нашу первую сетку. Но давайте просто изучим наши колонки немного подробнее. Что произойдет, если мы добавим другое значение в свойство grid-template-columns? Например:

    Ну, добавится еще одна колонка, конечно же! Обратите внимание, как мы теперь можем четко видеть фон обертки, потому ничто не закрывает его:

    Если мы изменим значение fr в свойстве grid-template-columns, это создаст так называемую асимметричную сетку. Предположим, что мы бы хотели, чтобы наш первый столбец занимал втрое больше места, чем два других столбца:

    Столбцы A и D стали шире остальных столбцов, как и ожидалось:

    Разве это не мощно? Больше не нужно беспокоиться об отрицательных отступах или идеальных значениях в процентах, чтобы выровнять колонки. Мы можем создавать суперсложные сетки без необходимости делать какие-либо математические вычисления, которые мы были вынуждены делать раньше. Теперь нам просто нужно добавить новое значение в свойство grid-template-columns и вуаля, новый столбец появляется как по волшебству!

    Но как насчет адаптивных сеток, спросите вы? Это действительно так же просто, как изменить свойство в медиа-запросе. Предположим, что мы хотим по умолчанию видеть 2 столбца, на экранах больше 500 пикселей мы хотим 3 столбца, и, наконец, на больших экранах мы разместить все содержимое в 4 столбца. Все, что нам нужно написать, это:

    Откройте демо в отдельной вкладке и убедитесь, что адаптивная магия работает!

    Свойство grid-template-columns намного сложнее, чем показано здесь, но и это отличная отправная точка. Далее мы должны подробнее познакомиться с другим важным свойством в спецификации CSS Grid: grid-template-rows.

    Хорошо, давайте сделаем это. Ниже приведен небольшой фрагмент кода. С учетом того, что вы раньше не сталкивались с CSS Grid, попробуйте догадаться, что делает свойство grid-template-rows:

    Это свойство устанавливает высоту строк и их взаимосвязь друг относительно друга. Если у нас есть две строки, как в нашем предыдущем демо, а последний блок установлен в 3fr, это означает, что высота второй строки всегда будет в три раза больше высоты первой:

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

    Даже благодаря такому небольшому количеству знаний и нескольким новым свойствам мы можем создавать сказочно сложные макеты — асимметричные и адаптивные сетки — это еще не все.

    Весь код в примерах выше выглядит на первый взгляд очень странно. Но с ним теряют актуальность и гигантские CSS-фреймворки, и целый набор старых хаков. CSS Grid позволяет нам взглянуть на пространство внутри браузера совершенно по-новому.

    Нам придется изучить кучу новых свойств и полностью переосмыслить то, что мы знали раньше. Поэтому CSS Grid — это не только спецификация, а целая философия.

    Давайте разбираться вместе!

    Нашли опечатку? Orphus: Ctrl+Enter

    © getinstance.info Все права защищены. 2014–2020

    Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

    Топ-пост этого месяца:  Закрытый раздел с персональным доступом к страницам
    Добавить комментарий