Файл: Практическая работа 8 css grid Layout 17 Grid Layout.docx

Листинг 17.2.17 – Свойство justify-items со значением end





Рисунок 17.2.7 - Свойство justify-items со значением end

• 
  center - выравнивает элемент по центру грид-ячейки (листинг 17.2.18 и рисунок 17.2.8).
  

Листинг 17.2.18 – Свойство justify-items со значением center





Рисунок 17.2.8 - Свойство justify-items со значением center

• 
  stretch - растягивает элемент на всю ширину грид-ячейки (листинг 17.2.19 и рисунок 17.2.9).
  

Листинг 17.2.19 – Свойство justify-items со значением stretch





Рисунок 17.2.9 - Свойство justify-items со значением stretch

17.2.10 Свойство align-items

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

• 
  start - выравнивает элемент по начальной (верхней) линии (листинг 17.2.20 и рисунок 17.2.10).
  

Листинг 17.2.20 – Свойство align-items со значением start





Рисунок 17.2.10 - Свойство align-items со значением start

• 
  end - выравнивает элемент по конечной (нижней) линии.
  
• 
  center - выравнивает элемент по центру грид-ячейки.
  
• 
  stretch — растягивает элемент на всю высоту грид-ячейки.
  

17.2.11 Свойство place-items

Свойство-шорткат для указания значений сразу и для align-items и для justify-items (листинг 17.2.21). Порядок указания свойств должен быть именно таким.

Листинг 17.2.21 – Свойство place-items

17.2.12 Свойство grid

Свойство, позволяющее задать значения всем свойствам сразу. А именно для:

• 
  grid-template-rows
  
• 
  grid-template-columns
  
• 
  grid-template-areas
  
• 
  grid-auto-rows
  
• 
  grid-auto-columns
  
• 
  grid-auto-flow
  

---

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

Возможные значения:

• 
  none - значение по умолчанию. Это ключевое слово сбрасывает значения для всех свойств, входящих в этот свойство.
  
• 
  auto-flow - это ключевое слово даёт браузеру понять, что создавать при необходимости: колонки или ряды. Если auto-flow стоит справа от слэша, то будут создаваться автоматические колонки, если слева, то - ряды.
  
• 
  dense - к ключевому слову auto-flow можно добавить dense. Это укажет браузеру, что элементы должны стараться заполнить свободные ячейки. Важно использовать dense сразу после auto-flow.
  

17.3 Свойства grid-элементов

Примечание: свойства float, display: inline-block, display: table-cell, vertical-align и column-* не дают никакого эффекта, когда применяются к грид-элементам.

17.3.1 Свойства grid-column-start, grid-column-end, grid-row-start, grid-row-end

Определяют положение элемента внутри грид-сетки при помощи указания на конкретные направляющие линии (листинг 17.3.1 и рисунок 17.3.1).

Возможные значения:

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

Листинг 17.3.1 - Свойства grid-column-start, grid-column-end, grid-row-start, grid-row-end




Рисунок 17.3.1 - Свойства grid-column-start, grid-column-end, grid-row-start, grid-row-end
Элемент разместился по горизонтали от второй грид-линии до линии с названием [five], а по вертикали — от линии с именем [row1-start] до линии под номером 3.

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

Свойства-шорткаты для grid-column-start, grid-column-end и grid-row-start, grid-row-end. Значения для *-start и *-end разделяются слэшем.

Можно использовать ключевое слово span, буквально говорящее

---

«растянуться на столько-то». А на сколько именно указывает стоящая за ним цифра (листинг 17.3.2 и рисунок 17.3.2).

Листинг 17.3.2 - Свойства grid-column и grid-row





Рисунок 17.3.2 - Свойства grid-column и grid-row
Элемент начинается с третьей линии по горизонтали и растягивается на 2 ячейки. По вертикали элемент начинается от линии с именем [third-line] и заканчивается у четвёртой линии.

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

17.3.3 Свойство grid-area

Свойство, которое может указывать элементу, какую из именованных областей ему нужно занять, а также служить шорткатом для одновременного указания значений для четырёх свойств: grid-row-start, grid-column-start, grid-row-end, grid-column-end – именно в таком порядке, т.е. сначала указываем оба начала, после – оба конца (листинг 17.3.3).

Листинг 17.3.3 - Свойства grid-area с четырьмя свойствами



Пример с указанием на именованную область (листинг 17.3.4):

Листинг 17.3.4 - Свойства grid-area с именованной областью

17.3.4 Свойство justify-self

С помощью свойства justify-self можно установить горизонтальное выравнивание для отдельного элемента, отличное от выравнивания, заданного грид-родителю (рисунок 17.3.3). Возможные значения аналогичны значениям свойства justify-items.



Рисунок 17.3.3 - Свойство justify-self

17.3.5 Свойство align-self

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



Рисунок 17.3.4 - Свойство align-self

17.3.6 Свойство place-self

Свойство-шорткат для одновременного указания значений свойствам justify-self и align-self.
Возможные значения:

• 
  auto (значение по умолчанию) - стандартное значение, можно использовать для сброса ранее заданных значений.
  
• 
  align-self justify-self - первое значение задаёт значение свойству align-self, второе значение устанавливает значение свойства justify-self. Если указано всего одно значение, то оно устанавливается для обоих свойств. Например, place-self: center отцентрирует элемент по горизонтальной и по вертикальной осям одновременно.
  

---

Дополнительные функции и ключевые слова

Когда вы задаёте размеры колонкам и рядам, вам доступны не только известные единицы измерения (px, vw, rem, % и так далее), но и ключевые слова min-content, max-content, fit-content и auto. И уже упомянутые единицы измерения fr.

Гриды подарили нам ещё одну функцию, позволяющую одновременно задавать минимальный и максимальный размер — minmax(). Например, в случае записи grid-template-columns: minmax(200px, 1fr); колонка займёт 1 часть свободного пространства грид-контейнера, но не меньше 200 пикселей.

Подробнее про ключевые слова min-content, max-content, fit-content и auto вы можете прочитать в статье: https://webformyself.com/min-content-max-content-i-fit-content-v-css/ (русс. яз.).

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

1. 
   A Complete Guide to Grid – URL: https://css-tricks.com/snippets/css/complete-guide-grid/ (англ. яз.)
   
2. 
   Grid Cheatsheet – URL: https://yoksel.github.io/grid-cheatsheet/ (англ.яз.)
   
3. 
   Игра GRID GARDEN – URL: https://cssgridgarden.com/#ru (русс. яз.)
   
4. 
   GRID cheat sheet (наглядное отображение) – URL: https://grid.malven.co/ (англ.яз.)
   

Практическое задание

Примечание. В каждом элементе должны быть использованы CSS-переменные и адаптивность. Контент страницы всегда должен пропорционально умещаться на экране устройств с шириной от 320px до 2560px.
1. Реализовать адаптивность своего сайта по семантическим элементам под различные устройства с помощью Grid Layout. Пример адаптивного макета отображения вашего сайта с помощью Grid Layout представлен на рисунке ниже:

2. При выполнении задания выбрать один из двух предложенных ниже вариантов.

Вариант №1

Создать сетку из 7 блоков при помощи свойства модуля Grid Layout, transition, transform. Добавить плавную анимацию при наведении.

Пример:

До наведения:



После наведения:


Вариант №2

Перестроить созданную ранее галерею под мозаичный вид при помощи свойства модуля Grid Layout, transition, transform. Добавить плавную анимацию при наведении.

Пример:

До наведения:

---

После наведения:


3. Создать форму (или изменить ранее созданную). Использовать свойства модуля Grid Layout, transition, transform. Добавить плавную анимацию при наведении и клике (псевдокласс :focus) и придумать свой дизайн формы.

Пример:

До наведения/клика:



После наведения/клика:



Адаптив (713-2560px):


Адаптив (320-712px):



4. В футере использовать свойства модуля Grid Layout, transition, transform и псевдоэлементы. Добавить плавную анимацию при наведении.

Пример:

Адаптив (1001-2560px):



Адаптив (769-1000px):


Адаптив (320-768px):

---