WEB start

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

hit 
counter

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения 055-966-10-17
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

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

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


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

grid

  • 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()