WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit 
counter

Наши преимущества

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


Регистрация на сайте

CSS Grid Layout

CSS Grid Layout

CSS Grid Layout — новая и мощная система построения макета окна браузера, позволяющая с лёгкостью разделить веб-страницу на столбцы и строки.

Главным отличием Grid от Flexbox является количество измерений (осей). При работе только с последним вам придётся выбирать между осью X и осью Y. Иначе говоря, Flexbox может быть направлен на создание только колонок или только строк.

Однако эти инструменты не конкурируют друг с другом, поэтому можно применять их вместе.

Сегодня большинство браузеров поддерживает Grid. Но Grid новее, чем FlexBox (Bootstrap подерживает FlexBox) , поэтому при использовании GRID больше вероятность того, что возникнут проблемы с совместимостью браузеров. Возможно, какие-то версии браузеров не поддерживают все свойства Grid или поддерживают частично.

Основные понятия

Контейнер (CSS grid container)

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

Контейнер - основа макета. Есть корневой - главный, родительский контейнер. В его ячейки могут быть, в свою очередь, вложены другие элементы - контейнеры.

Элемент-контейнер описывается свойством display: grid (контейнер - блочный элемент) или display:inline-grid (контейнер - строчный элемент).

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

Элемент внутри контейнера (Grid Item)

Дочерний элемент контейнера. Элемент, расположенный определённым образом на сетке-макете, которую задал контейнер. Элементы на сетке можно расположить произвольным образом. Автоматически или вручную. В одной или нескольких ячейках. Задать координаты начала и конца элемента по клеткам или по (поименованным или пронумерованным) разделительным линиям, расположенным между ячейками.

Пример: простой макет

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/css/style.css"> </head> <body> <div id='container0'> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> </div> </body> </html>

Определим один контейнер (#container0) с дочерними элементами (.items1) - колонками автоматического размера и автоматического расположения, с промежутками между ними - 2 px.

#container0 { display: grid; grid-auto-flow: row; grid-gap: 2px; } .items1 { background-color: lightgray; border: 1px dotted red; }

Зададим расположение дочерних элементов - по колонкам.

#container0 { display: grid; grid-auto-flow: column; grid-gap: 2px; } .items1 { background-color: lightgray; border: 1px dotted red; }

Определим вручную ряды для размещения дочерних элементов (grid-template-rows). Зададим высоту каждого ряда в px.

#container0 { display: grid; grid-template-rows: 10px 20px 30px 40px 50px 60px 70px; } .items1 { background-color: lightgray; border: 1px dotted red; }

Разобьём контейнер на 15 ячеек: 5 колонок и 3 ряда.

#container0 { display: grid; grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px 100px 100px; grid-gap: 2px; } .items1 { background-color: lightgray; border: 1px dotted red; }

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

Использованные директивы

grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px 100px 100px;

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

grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(5, 100px);

Добавим стили к первому и последнему дочерним элементам (first-child, last-child), которые заставят элементы занять 5 колонок (целый ряд) в первом и третьем рядах соответственно.

#container0 { display: grid; grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px 100px 100px; grid-gap: 2px; } .items1 { background-color: lightgray; border: 1px dotted red; } .items1:first-child { grid-row: 1 / 2; grid-column: 1 / 6; background-color: red; } .items1:last-child { grid-row: 3 / 4; grid-column: 1 / 6; background-color: red; }

Единицы измерения (CSS grid units)

Для задания размеров ячеек макета (CSS grids), расстояний между ними можно использовать различные единицы ихмерения.

Это могут быть как стандартные для CSS 3 единицы (px, %, em, ...) так и новая единица измерения - fr (fractions).

В примере ниже, внутри контейнера element, колонки распределяются равномерно по ширине окна, причём соотношение их ширины - 1:3:1 , высота рядов задаётся для первого (60px ) и последнего ряда (5em), высота среднего ряда автоматически вычисляется, в соответствии с контентом.

element { display: grid;grid-template-columns: 1fr 3fr 1fr;grid-template-rows: 60px auto 5em;}

Единицы измерения - fr и % похожи. Например, 2 директивы: grid-template-columns: 50% 50%; и grid-template-columns:1fr 1fr; приводят к одинаковым результатам (когда используются только % или только fr ).

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

Директива

grid-template-columns: 100px 50% 50%;

создаст одну колонку 100px и 2 шириной 50% от ширины контейнера (общая ширина = 100% + 100px)

Директива

grid-template-columns: 100px 1fr 1fr;

создаст колонку 100px, поделит оставшуюся ширину на 2 и создаст ещё 2 колонки равной ширины. (общая ширина колонок - 100% от контейнера)

Создание поименованных областей (Named Grid Areas)

В дополнение к тому, что дочерние элементы (grid items) можно размещать по ячейкам сетки (например: grid-column-start: 2;grid-row-start: 2;), можно создавать на сетке поименованные области и размещать контент в них.

Область можно создать директивой:

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end |area_name;

Где:

grid-row-start - ряд, в котором область начинается

grid-column-start колонка, в которой область начинается

grid-row-end - ряд - конец области

grid-column-end - колонка - конец области

area_name - имя области

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

grid-area: area_name;

Например:

index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/css/style.css"> </head> <body> <div id='wrapper'> <div id='logo'>&nbsp; </div> <div id='menu'>&nbsp; </div> <div id='leftCol'>&nbsp; </div> <div id='content'>&nbsp; </div> <div id='note'>&nbsp; </div> <div id='footer'>&nbsp; </div> </div> </body> </html>

style.css

#wrapper { display: grid; grid-template-areas: 'logo menu menu menu' 'left content content content' 'left notes footer footer'; grid-template-rows: 50px minmax(100px, auto) 10px; grid-template-columns: repeat(4, 1fr); grid-gap: 2px; } #logo { grid-area: logo; background-color: gray; background-image: url('../images/logo.png'); background-size: auto 100%; background-repeat: no-repeat; } #menu { grid-area: menu; background-color: red; } #leftCol { grid-area: left; background-color: gray; } #content { grid-area: content; background-color: lightgray; } #note { grid-area: notes; background-color: green; } #footer { grid-area: footer; background-color: blue; }

Автоматическое разбиение на ячейки (implicit grid)

Для автоматического разбиения grid - контейнера на ячейки, используются CSS свойства:

grid-auto-columns - определяет размеры автоматически создаваемых колонок

grid-auto-rows - размеры автоматически создаваемых рядов

grid-auto-flow -

Для задания размеров ячейки контейнера могут использоваться:

Размер (px, em) - положительное число. Проценты (%) - положительное число. Fractures - положительное число, с единицей измерения - fr. Функция minmax(min, max), которая позволяет задать минимальное и максимальное значение для размера элемента. Ключевое слово auto, которое определяет автоматическое вычисление размеров.

Пример:

Стиль для контейнера

display: grid; grid-auto-columns: 1fr; grid-auto-rows: 100px;

задаёт алгоритм, по которому в окне браузера будут, при необходимости, организовываться ячейки для дочерних элементов.Согласно этому алгоритму, колонки для ячеек займут всю ширину экрана (если нужна будет одна колонка, то шириной 100%, четыре колонки - по 25%), а каждый ряд будет высотой 100px.

Реальные позиции ячеек в такой структуре будут определяться необходимым количеством ячеек в контейнере и их стилями.Зададим HTML шаблон документа (index.html):

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/css/style.css"> </head> <body> <div id='wrapper'> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> </div> </body> </html>

Стили для этого примера:

/* Стиль контейнера */ #wrapper { display: grid; grid-auto-columns: 1fr; grid-auto-rows: 100px; grid-gap: 1px; } /* Стили для ячеек */ .item1 { background-color: blue; } .item1:nth-child(1) { grid-column: 1 / 5; }

Директива:grid-column: 1 / 5; задаёт, что элемент () должен занять в контейнере колонки с номера 1 по номер 5, что приводит к автоматическому созданию этих колонок по алгоритмуgrid-auto-columns: 1fr; - то есть одинакого размера, равномерно распределённых по ширине экрана.

Всего в HTML щаблоне описано 11 дочерних эдементов (.item1) в контейнере (.wrapper ). Все они размещены последовательно в созданной сетке.

Если задать для последнего элемента (:last-child) область его размещения, предусматривающую, 2 ряда? начиная с третьего (grid-row: 3 / span 2;), то размещение элементов в контейнере изменится..item1:last-child {grid-row: 3 / span 2;background-color: red;}

Выравнивание элементов внутри grid - контейнера

HTML структура макета GRID состоит из трёх уровней, на которых элементы могут быть отцентрованы (выравнены): GRID - container (элемент, с заданным свойством display: grid;),  GRID-item (дочерний элемент grid- контейнера), GRID-content (содержимое элемента ).

При работе с шаблоном grid есть две оси для выравнивания объектов: горизонтальная (inline ) и вертикальная (block).

Для выравнивания GRID-элементов (GRID items) по вертикальной оси используются свойства CSS:align-self и align-items.

Для выравнивания по горизонтальной оси - justify-items и justify-self.

Эти свойства могут принимать значения:

  • auto
  • normal
  • start
  • end
  • center
  • stretch
  • baselinefirst
  • baselinelast
  • baseline

Для GRID-контейнера используются свойства:

align-items:

justify-items:


Для дочерних элементов

justify-self:

align-self:


CSS grid properties

  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-template
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
  • grid
  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end
  • grid-row
  • grid-column
  • grid-area
  • grid-row-gap
  • grid-column-gap
  • grid-gap

CSS grid функции

  • repeat()
  • minmax()
  • fit-content()