Что такое грид в программировании
Перейти к содержимому

Что такое грид в программировании

  • автор:

Метод grid

Grid является одним из трех менеджеров геометрии в Tkinter (другими являются уже рассмотренный ранее Pack, а также Place). У всех виджетов есть соответствующий данному менеджеру метод grid . «Grid» с английского переводится как «сетка», однако по смыслу правильнее говорить о таблице.

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

При размещении виджетов методом grid родительский контейнер (обычно это окно) условно разделяется на ячейки подобно таблице. Адрес каждой ячейки состоит из номера строки и номера столбца. Нумерация начинается с нуля. Ячейки можно объединять как по вертикали, так и по горизонтали.

Ячейки и их адреса

На рисунке пунктир обозначает объединение ячеек. Общая ячейка в таком случае обозначается адресом первой.

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

Размещение виджета в той или иной ячейке задается через аргументы row и column , которым присваиваются соответственно номера строки и столбца. Чтобы объединить ячейки по горизонтали, используется атрибут columnspan , которому присваивается количество объединяемых ячеек. Опция rowspan объединяет ячейки по вертикали.

Пусть надо запрограммировать такой GUI:

Пример интерфейса

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

Подготовка к использованию менеджера геометрии Grid

Теперь пишем код:

from tkinter import * root = Tk() Label(text="Имя:").grid(row=0, column=0) Entry(width=30).grid(row=0, column=1, columnspan=3) Label(text="Столбцов:").grid(row=1, column=0) Spinbox(width=7, from_=1, to=50).grid(row=1, column=1) Label(text="Строк:").grid(row=1, column=2) Spinbox(width=7, from_=1, to=100).grid(row=1, column=3) Button(text="Справка").grid(row=2, column=0) Button(text="Вставить").grid(row=2, column=2) Button(text="Отменить").grid(row=2, column=3) root.mainloop()

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

Выполнив приведенный выше программный код, получим:

Результат размещения виджетов методом grid

Похоже, но не совсем то, что хотелось. Теперь на помощь должны прийти другие свойства метода grid . У него, также как у pack , имеются атрибуты для задания внешних и внутренних отступов ( padx , pady , ipadx , ipady ).

Кроме этого есть атрибут sticky (липкий), который принимает значения направлений сторон света (N, S, W, E, NW, NE, SW, SE). Если, например, указать NW, то виджет прибьет к верхнему левому углу ячейки. Виджеты можно растягивать на весь объем ячейки ( sticky=N+S+W+E ) или только по одной из осей ( N+S или W+E ). Эффект от «липучки» заметен, только если виджет меньше ячейки.

from tkinter import * root = Tk() Label(text="Имя:")\ .grid(row=0, column=0, sticky=W, pady=10, padx=10) Entry()\ .grid(row=0, column=1, columnspan=3, sticky=W+E, padx=10) Label(text="Столбцов:")\ .grid(row=1, column=0, sticky=W, padx=10, pady=10) Spinbox(width=7, from_=1, to=50)\ .grid(row=1, column=1, padx=10) Label(text="Строк:")\ .grid(row=1, column=2, sticky=E) Spinbox(width=7, from_=1, to=100)\ .grid(row=1, column=3, sticky=E, padx=10) Button(text="Справка").grid(row=2, column=0, pady=10, padx=10) Button(text="Вставить").grid(row=2, column=2) Button(text="Отменить").grid(row=2, column=3, padx=10) root.mainloop()

Применение опций padx, pady и sticky метода grid

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

from tkinter import * def rem(): global l1_flag if l1_flag == 1: l1.grid_remove() l1_flag = 0 else: l1.grid() l1_flag = 1 def forg(): global l2_flag if l2_flag == 1: l2.grid_forget() l2_flag = 0 else: l2.grid(row=1) l2_flag = 1 root = Tk() l1_flag = 1 l2_flag = 1 l1 = Label(width=5, height=3, bg='blue') l2 = Label(width=5, height=3, bg='green') b1 = Button(bg='lightblue', command=rem) b2 = Button(bg='lightgreen', command=forg) l1.grid(row=0) l2.grid(row=1) b1.grid(row=2) b2.grid(row=3) root.mainloop()

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

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

Практическая работа

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

Результат разметки интерфейса методом grid

Курс с примерами решений практических работ: pdf-версия

X Скрыть Наверх

Tkinter. Программирование GUI на Python

Верстаем в сетке

Разбираем, как можно расположить текст и фото в CSS Grid.

Продолжаем сагу о сетках в CSS. Что мы уже знаем:

  • Сетка (grid) — это один из современных приёмов вёрстки в CSS.
  • Сетку можно поделить на строки и столбцы и задать им любой размер.
  • Можно выделить любую область ячеек, объединить их в один класс и управлять ими как одним целым.
  • Элементами сетки может быть что угодно — текст, фото, видео или любой другой HTML-блок.
  • Сетку можно сделать адаптивной, чтобы страница хорошо смотрелась на экранах любого размера.

Теперь поговорим о том, как размещать контент в ячейках сетки и что для этого нужно. Используем для этого сетку 4 × 4 — каждая ячейка пусть будет по 150 пикселей в высоту и ширину.

   Grid     
Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10
Элемент 11
Элемент 12
Элемент 13
Элемент 14
Элемент 15
Элемент 16

Заполнение блоков по очереди

Самый простой способ добавить что-то в сетку — прописать в блоке , что нам нужно. Например, можем заполнить часть нашей сетки текстом, а часть — картинками:

Код страницы

   Grid body < /*настраиваем шрифт*/ font-family: Arial, Helvetica, sans-serif; >/*общие настройки сетки*/ .grid < /*рисуем зелёные рамки*/ border: 5px solid #d1e231; /*подключаем сетку*/ display: grid; /*формируем по 4 одинаковых строки и столбца*/ grid-template-columns: repeat(4, 150px); grid-template-rows: repeat(4, 150px); >/*внешний вид ячеек*/ .grid > * < /*фоновый цвет*/ background-color: #ffbf94; /*скругление углов*/ border-radius: 5px; /*расстояние от одной границы ячейки до другой*/ margin: 1px; >img < border-radius: 5px; width: 100%; height: 100%; object-fit: cover; >p   

Привет, это журнал «Код!»

Элемент 4
Элемент 5
Элемент 6
Элемент 10

Сейчас все привыкли к тому, что в телефонах много памяти — от 128 гигабайт и выше.

Если телефон поддерживает карты памяти большой ёмкости, то можно вставить туда microSD-карточку

и получить дополнительно хоть терабайт.

Но вы видели те карточки? Они же невероятно малы!

Чтобы картинки у нас подгонялись точно под размер сетки, мы использовали свойство object-fit: cover — оно увеличивает или уменьшает размер картинки так, чтобы она подгонялась под нужное место.

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

(элементы 4,5,6 и 10), текст прижался к краям и выглядит неопрятно.

Работаем с областью

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

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

.oblast-1 grid-column: span 2;
grid-row: span 2;
>

Теперь применим этот класс к нашей картинке:

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

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

.oblast-2 grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 4;
>

Здесь мы говорим браузеру, что область oblast-2 занимает расстояние от первой до третьей линии по горизонтали и от второй до четвёртой по вертикали. Если с линиями пока сложно — почитайте наш вводный материал по сетке, мы там подробно разбираем, что это за линии и откуда они берутся.

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

  

Привет, это журнал «Код!»

Элемент 4
Элемент 5
Элемент 6
Элемент 10

Сейчас все привыкли к тому, что в телефонах много памяти — от 128 гигабайт и выше.

Если телефон поддерживает карты памяти большой ёмкости, то можно вставить туда microSD-карточку

и получить дополнительно хоть терабайт.

Но вы видели те карточки? Они же невероятно малы!

Блок с картинкой стоит в самом конце кода, а сама картинка в сетке — на нужном месте.

А ещё можно сделать один большой блок на всю ширину сетки: объединить 4 ячейки подряд — получится шапка сайта:

.oblast-2 grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 5;
>

Как управлять отдельной ячейкой

Ячейка — это самая маленькая доступная область в сетке. Для этого нужно создать новую область, куда будет входить только эта ячейка, например, так:

.oblast-3 grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
>

Сетка — это универсальный инструмент

В ней можно заверстать что угодно:

  • текст в несколько колонок;
  • галерею с картинками;
  • картинки с поясняющим текстом;
  • видео вперемешку с текстом;
  • рекламные баннеры;
  • полноценный сайт с шапкой, подвалом и боковым меню;
  • что угодно ещё.

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

Текст, иллюстрации и редактура

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами

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

Обложка поста 7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами

Аватарка эксперта Максим Петкевич

Максим Петкевич

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

В заранее определенной гибкой сетке макета мы можем размещать дочерние элементы.

Если мы посмотрим на данные с сайта Can I use то увидим, что CSS Grid Layout на данный момент поддерживается большинством современных браузеров.

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 1

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

Давайте изучим CSS Grid Layout на примере страницы с шестью блоками.

Наш изначальный HTML код будет выглядеть так:

 
A
B
C
D
E
F

CSS код, он нам нужен для красоты и наглядности:

* < /* width и height элементов включают в себя значения полей и границ */ box-sizing: border-box; >.grid-init < max-width: 400px; /* максимальная ширина контейнера */ margin: auto; /* центрирование контейнера на странице */ background-color: lightsteelblue; /* фон */ padding: 10px; /* внутренние отступы */ >.box-init < font-size: larger; /* размер шрифта */ color: #fff; /* цвет текста */ border-radius: 5px; /* скругление углов */ background-color: #2196f3; /* цвет фона */ border: 1px solid black; /* граница блока */ padding: 10px; /* внутренние отступы */ /* выравнивание текста по центру блока с помощью CSS Flexbox */ display: flex; align-items: center; justify-content: center; > 

Наша страница будет выглядеть так:

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 2

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

Свойства display: grid и display:inline-grid

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

.grid

С этого момента контейнер .grid будет являться гридом, визуально разницы мы пока не увидим, для этого нам понадобятся новые свойства которые мы рассмотрим далее. Как же нам понять, какие изменения произошли? Для этого мы можем воспользоваться developer tools браузера хром и с помощью Inspect CSS Grid мы можем посмотреть, что из себя представляет наш грид.

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 3

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

Свойства grid-gap, row-gap и column-gap

Для задания отступов между ячейками грида используется grid-gap . Зададим ему значение в 10px.

.grid

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 4

В свою очередь grid-gap объединяет два свойства:

  1. row-gap — это расстояние между рядами.
  2. column-gap — это расстояние между колонками.

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

.grid

Свойство grid-template-columns

Теперь добавим колонки.

.grid

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 5

Ширину мы можем указывать в любых CSS единицах длины, в процентах и в единицах fr.

fr (от fraction — часть) это новая форма единицы измерения созданная для гридов, которая позволяет добавлять столько колонок, сколько мы захотим, не заботясь о конкретном значении ширины колонки. Свободное место распределяется между такими колонками пропорционально количеству fr.

1fr 1fr 1fr — такая запись означает, что мы создаем 3 колонки одинаковой ширины.

Ширина грида равна 400px. Если мы зададим для grid-template-columns следующие значения: 1.5fr 2fr 1fr , то ширина всех колонок будет равна 1.5fr + 2fr + 1fr= 4.5fr.

Теперь вычислим ширину каждой колонки. Первая колонка будет иметь ширину 1.5fr / 4.5fr * 400px. Что в итоге равно 133px. Соответственно рассчитаем остальные значения.

Вторая колонка 2fr / 4.5fr * 400px = 178px, третья колонка 1fr / 4.5fr * 400px = 89px. Т.е. мы могли задать колонки таким образом:

grid-template-columns: 133px 178px 89px;

В сумме общая ширина равна 400px.

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

Свойство grid-template-rows

Это свойство позволяет добавлять строки в грид.

.grid

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

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 6

Грид-контейнер — элемент, в котором находится сетка грида.

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

Грид-полосы — пространство, которое ограничено парой соседних грид-линий. Бывают вертикальные и горизонтальные.

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

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

Грид-интервалы — пустые пространства между соседними грид-полосами.

Свойства grid-auto-rows, grid-auto-columns и grid-auto-flow

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

Если мы не указываем grid-template-rows , это значит, что в случае надобности строки будут добавляться автоматически и будут неявными.

Высота строки на неявных гридах должна выставляться с помощью свойства grid-auto-rows .

В свою очередь для колонок есть свойство grid-auto-columns которое выставляет ширину колонки.

Свойство grid-auto-flow позволяет указать, что нужно использовать для авто-размещения элементов, строки или колонки. По умолчанию его значение равно row .

Рассмотрим пример, показывающий неявное добавление колонок. Для этого мы зададим grid-auto-flow равным column . Также уменьшим количество явно заданных колонок до двух. В этом примере в последней ячейке пропишем текст FF.

.grid

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 7

Хочу заметить важную вещь, это то что ячейки выстраиваются вдоль колонок, а не строк. A и B в первой колонке, C и D во второй и т.д.

Как видим, третья колонка добавилась автоматически и ее ширина формируется на основе контента в самой широкой ячейке. Давайте укажем ширину для этой колонки.

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 8

Получаем уже привычный нашему глазу грид.

Функция repeat()

Эта функция позволяет сокращать объявление колонок и строк в случае повторяющихся значений.

Например у нас есть такой код.

.grid

Используя функцию repeat мы можем переписать наш код следующим образом.

.grid

Функция minmax(), auto-fill и auto-fit

Рассмотрим пример с использованием этой функции.

.grid

Запись minmax(120px, 1fr) означает, что минимальный размер столбца равен 120px, а максимальный — 1fr.

auto-fill делает наш грид адаптивным, то есть в нем элементы меняют свои позиции с тем, как мы меняем размер окна браузера.

Ширина окна браузера 450px:

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 9

Ширина окна браузера 300px:

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 10

Ширина окна браузера 200px:

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 11

auto-fit в многострочных гридах по своему действию похож на auto-fill . Разница проявляется в однострочных гридах. С auto-fit пустые полосы сжимаются до нуля, т.е. они как будто исчезают.

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

С auto-fill у нас три колонки

grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 12

С auto-fit пустая колонка исчезает

grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 13

Свойства grid-template-areas, grid-area

Есть разные способы создания грид-ячеек и грид-областей. Один из способов — это использование грид-линий, за это отвечают свойства grid-column-start , grid-column-end , grid-row-start и grid-row-end . При таком подходе код довольно сложно читать и в случае серьезного изменения макета, придется переписывать большой объем кода. Поэтому мы рассмотрим второй способ — использование grid-template-areas и grid-area .

Для начала отредактируем наш html-код и используем в нем семантические теги.

 
HEADER
MAIN
SECTION
FOOTER

C помощью grid-area зададим псевдонимы для наших блоков.

.l-header < grid-area: my-header; >.l-nav < grid-area: my-nav; >.l-main < grid-area: my-main; >.l-aside < grid-area: my-aside; >.l-section < grid-area: my-section; >.l-footer

С помощью grid-template-areas определим шаблон страницы.

.grid

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 14

У нас получился грид 3×4 (3 колонки, 4 ряда). Также у нас есть 6 грид-областей.
Мы можем изменить шаблон просто изменив грид-области в grid-template-areas .

Это делается легко и быстро. Давайте попробуем.

.grid

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами 15

Вот и все, мы изменили шаблон, потратив минимум времени!

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

Как создать сетки на CSS Grid Layout

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

Например, с помощью гридов легко создать такой раздел:

Это трёхколоночная сетка с тремя строками. Блок с перфораторами занимает две колонки и два ряда, между элементами заданы равные отступы

Если пока не знаете, в чём разница, прочитайте, когда использовать флексы, а когда гриды.

Как создать сетку на гридах

Чтобы добавить сетку, нужно в стилях родительского элемента написать display: grid . Далее указывается количество столбцов и строк в сетке, задаются их размеры.

Описать количество и размеры столбцов — grid-template-columns .

Описать количество и размеры строк — grid-template-rows .

Например, так создаётся сетка из двух столбцов шириной 200px и двух строк высотой 150px :

.cats

Как задать размеры столбцов и строк

В процентах. Ширина колонки и высота ряда считаются относительно родительского контейнера. Например, grid-template-columns: 50% 50% создаст две одинаковые колонки шириной в половину родительского элемента.

В пикселях. Устанавливает точную ширину столбца или высоту строки — мы так делали в примере с котами: grid-template-columns: 200px 200px .

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

C помощью ключевого слова fr (fraction). Всё пространство в сетке делится на равные доли fr . Например, колонка grid-template-columns: 1fr растянется на всю область родительского контейнера. А если написать grid-template-columns: 1fr 2fr , вы получите две колонки, при этом вторая будет в два раза шире.

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

В этом примере мы создаём четыре колонки. У первой фиксированная ширина, последняя занимает 25% пространства, а вторая и третья делят оставшееся пространство на две равные доли.

Как разместить элементы в гриде

По умолчанию все элементы располагаются в гриде слева направо сверху вниз и занимают одну ячейку сетки. Нумерация считается по линиям, как на картинке:

Сетка из трёх столбцов и двух рядов

Чтобы расположить элемент в сетке, нужно задать ему координаты. Например, первый кот начинается на линии 1 столбца и линии 1 ряда, а заканчивается на линии 2 столбца и линии 2 ряда. Кот в очках начинается на 3 линии столбца и 1 линии строки, а заканчивается на 4 линии столбца и 2 линии строки.

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

Здесь кот в очках находится между линиями столбцов -1 и -2:

Сетка из трёх столбцов и двух строк, но с обратной нумерацией

Стили для расположения элементов в сетке: grid-column и grid-row

grid-column-start и grid-column-end указывают, в каком столбце начинается элемент и в каком заканчивается. Например:

.keks < grid-column-start: 1; grid-column-end: 3; /*Элемент растянется на две колонки с первой по третью линию*/ >

grid-row-srart и grid-row-end указывают, какие строки занимает элемент. Здесь всё, как со столбцами:

.keks < grid-row-srart: 1; grid-row-end: 3; /*Элемент растянется на две строки, с первой по третью линию*/ >

Для этих свойств есть сокращённые записи: grid-column и grid-row . В них можно сразу прописать, на какой линии начинается и заканчивается элемент — это делается через черту, вот так: grid-row: 1/3.

.keks < /*Элемент займёт две строки.*/ grid-row: 1/3 >

Фотография Кекса растянулась на две строки

Свойство grid-area и repeat

Свойствоgrid-area

Писать каждый раз начальные и конечные координаты для столбцов и рядов — долго и не всегда удобно. Но можно сократить запись с помощью свойства grid-area , оно объединяет и заменяет grid-column и grid-row .

Свойство grid-area принимает четыре значения, которые разделяются косой чертой: grid-row-start , grid-column-start , grid-row-end и grid-column-end :

Эта же запись в полном варианте:

Ключевое словоrepeat

Второй способ сократить код — использовать ключевое слово repeat . Оно помогает, когда в grid-template-columns или grid-template-columns нужно создать множество одинаковых колонок или рядов:

С ключевым словом repeat код выглядит так:

В скобках после repeat сначала указывается количество строк или столбцов, а затем через запятую пишется их размер.

Границы и отступы

Границы между элементами задаются с помощью свойства gap . Например, gap: 10px добавит отступы между элементами по бокам и сбоку:

Чтобы задать только боковые отступы, используйте grid-column-gap , а для отступов между рядами — grid-row-gap .

Как изменить порядок элементов

Есть два способа.

Первый — указать расположение элемента с помощью grid-column , grid-row или grid-area . К примеру, у нас есть такой список:

 
Кот Кекс
Кот Барсик
Кошка Василиса
Кот Борис
.grid

На странице он выглядит так:

Поменяем порядок. Сделаем так, чтобы Кекс стал третьим и перешёл на вторую строку. Разметку не меняем, только стили:

.keks < grid-row: 2/3; >

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

Второй способ — использовать свойство order . По умолчанию элементы грида имеют order , равный 0 , но это значение можно менять. Например, вот что произойдёт, если мы добавим «Кексу» order: 1 :

.keks

Элемент переместится в конец:

Где отточить навык работы с гридами

«Старт в программировании» — курс для новичков. Он научит вас создавать страницы, в том числе строить сетки на флексах и гридах. Курс основан на тренажёрах и мастер-классах.

Grid Garden — интерактивная игра, которая поможет понять основы CSS Grid Layout. Вам предстоит поливать грядки с морковью и уничтожать сорняки с помощью гридов.

Раздело CSS Grid Layout — страница на официальной документации MDN. Поможет расширить знания о гридах и не только.

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

Материалы по теме

  • Как создавать адаптивные сетки
  • Флексы для начинающих
  • Как сверстать макет. Пошаговый план

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

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

  • 13 ноября 2023

Знакомство с CSS

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

  • 1 ноября 2023

Увеличение ссылки при наведении

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

  • 13 октября 2023

WOFF больше не нужен

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

  • IE 11, 10, 9, 8, 7, …
  • Chrome 4–35
  • Edge 12 и 13
  • Safari 3–9.1
  • Firefox 2–38
  • Opera 22 и ниже
  • Android 4.4.4 KitKat и ниже (а это
  • Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

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

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

  • 23 сентября 2023

Трясём пароль с помощью CSS

Трясём пароль с помощью CSS

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

Вот что получится в итоге:

  • 7 сентября 2023

Как сделать тёмную тему на сайте

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

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

  • 29 августа 2023

4 способа центрировать текст в CSS

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 

Центрированный текст

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

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

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

  • 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

  • 28 июля 2023

CSS-свойство contain

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

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

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container
  • 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element
  • 13 июля 2023

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *