Контейнеры в сетке

А так же

Источники

1. [CSS Tricks] Box sizing
2. [Learn JS] Все значения свойства display
3. [CSS Tricks] A Complete Guide to Flexbox
4. [CSS Tricks] A Complete Guide to Grid
5. [YouTube] CSS Grid Changes EVERYTHING
6. [Habr] CSS Grid Layout. Быстрый старт
7. [CSS Tricks] CSS Grids without media queries

1. Конструктор Grid

Контейнеры в HTML

HTML теги контейнеров

• Классический пустой контейнер <div>
• Семантический контейнер со смыслом (см. список)

Свойства контейнеров

1. По умолчанию имеют CSS свойство display: block;
2. Могут иметь атрибуты id и class;
3. Занимают всю ширину родителя по умолчанию (т, е: width: auto);
4. Увиличиваются в зависимости от контента (т.е: height: auto)
5. Начинаются под предыдущим элементом

Блоковая модель

Box model

Box model

.box {
  width: 200px;
  height: 200px;
  margin: 200px;
  padding: 20px;
  border: 2px solid black;
}

Облегчаем себе жизнь

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

Что это?

Внешние и внутренние отступы

margin and padding

1. Короткая и длинные записи

.box {
  margin: 12px 3px 6px 9px;
  /* same as: */
  margin-top: 12px;
  margin-right: 3px;
  margin-bottom: 6px;
  margin-left: 9px;
}

2. Тройная запись

.box {
  margin: 12px 3px 9px;
  /* same as: */
  margin-top: 12px;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 9px;
}

3. Двойная запись

.box {
  margin: 12px 3px;
  /* same as: */
  margin-top: 12px;
  margin-bottom: 12px;
  margin-left: 3px;
  margin-right: 3px;
}

4. "На все четыре стороны"

.box {
  margin: 12px;
  /* same as: */
  margin-top: 12px;
  margin-bottom: 12px;
  margin-left: 12px;
  margin-right: 12px;
}

"Особенности" margin

• Может иметь значение auto.
• "Схлопывание" (collapse) отступов.
• Вертикальный отступ в % считается от ширины (sic!)

Ширина и высота блока

width and height

Основные значения width and height

• Стандартное (auto)
• Фиксированные (px, em, rem)
• Относительные
  • Родителя (%)
  • Экрана (vw, vh)
• И другие

Фиксированная ширина и высота

CSS property

Функции в CSS

.box {
  margin: 20px;
  width: calc(100% - 40px);
  height: calc(100vh - 40px);
}

4.1 Pattern

"Responsive container"

CSS Property

display

display: block;

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

CSS Property

float

• Раньше использовался для верстки всего сайта, сейчас по прямому назначению - для обтекания текста
• Блок выпадает из потока (см. clearfix)
• Игнорирует display и превращает элемент в block

display: inline

• Стандартное свойство для всех строчных элементов
• Элементы располагаются на той же строке, последовательно.
• Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

display: inline-block;

• Как и инлайн-элемент:
  • Располагается в строке.
  • Размер устанавливается по содержимому.
  • Наследует свойство vertical-align, о котором хорошо написано здесь
• Во всём остальном – это блок, то есть:
  • Элемент всегда прямоугольный.
  • Работают свойства width/height.

Применение display: inline-block;

• Встраивание блочных елементов в текст
• [До flexbox] Расположение блочных елементов в ряд (например иконок)
• [До flexbox] Вертикальное выравнивание по центру

display: table;, display: table-cell;, display: table-row;

table    { display: table; }
tr       { display: table-row; }
thead    { display: table-header-group; }
tbody    { display: table-row-group; }
tfoot    { display: table-footer-group; }
col      { display: table-column; }
colgroup { display: table-column-group; }
td, th   { display: table-cell; }
caption  { display: table-caption; }

display: none;

• Нужно удалить тег со страницы
• Используется с помощью JS

Flexbox

display: flex;

Flex container basic properties:

.container {
  display: flex;
  flex-direction: row; /* row | row-reverse | column |
    column-reverse;  */
  justify-content: flex-start; /* | flex-end | center |
    space-between | space-around | space-evenly |
    start | end | left | right ... + safe | unsafe */
  align-items: stretch /* flex-start | flex-end |
    center | baseline | first baseline | last baseline |
    start | end | self-start | self-end + ... safe | unsafe */;
}

Flex child basic properties:

.child {
  flex-grow: 0; /* 1, ..., n */
  flex-shrink: 1; /* 2, ..., n */
  flex-basis: auto; /* 0, 200px, 50% */
}

Задача 4.1

Блог-посты

1. Расположить блог-посты в один ряд с помощью свойства display: flex;
2. Расположить .post-title внизу;
3. Запретить картинкам уменьшаться с помощью свойства flex-shrink;
4. Расположить посты по центру с увеличивающимся отступом с помощью свойства justify-content;

Задача 4.2

Сетка на flexbox

1. Обернуть <aside> и <main> во flexbox контейнер;
2. Сделать так, чтобы <aside> и <main> занимали 1/4 и 3/4 от всей длинны контейнера
3. Выравнять отступы между элементаментами до 20 пикселей

CSS Grids

display: grid;

Типы Grid

Явные

Explicit

• Количество компонентов определенно
• Новые компоненты не появляются автоматически
• Родительские свойства grid-template-column, grid-template-rows, grid-areas
• Дочерние свойства grid-area, grid-column, grid-row

Алгоритм расположения явных сеток

1. Делим контейнеры верхнего уровня на секции
2. Задаем кол-во столбцов grid-template-column для родителя
3. Задаем кол-во рядов grid-template-rows для родилетя
4. Пишем схему сетки в свойство grid-areas для родителя
5. Определяем свойство grid-area для дочерних контейнеров

Невные

Implicit

• Количество компонентов не определенно
• Новые компоненты могут появляються автоматически
• Свойства grid-auto-column, grid-auto-rows, grid-auto-flow

CSS Property

background

.container {
  background-image: url(/path/to/file.png);
  background-size: cover;
  background-repeat: repeat;
  background-position: center;
}

.box {
  background-image: url(./images/безмятежность.png);
}

.box {
  background-image: url(./images/безмятежность.png);
}

.box {
  background-image: url(./images/безмятежность.png);
  background-repeat: no-repeat;
  background-color: green;
}

.box {
  background-image: url(./images/безмятежность.png);
  background-repeat: no-repeat;
  background-position: center;
}

.box {
  background-image: url(./images/безмятежность.png);
  background-repeat: no-repeat;
  background-position: center top;
}

.box {
  background-image: url(./images/безмятежность.png);
  background-repeat: no-repeat;
  background-position: right 35% bottom 45%;
}

.box {
  background-image: url(./images/безмятежность.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.box {
  background-image: url(./images/безмятежность.png);
  background-repeat: repeat;
  background-size: contain;
}

.box {
  background-image: url(./images/безмятежность.png);
  background-repeat: no-repeat;
  background-size: cover;
}

Домашнее задание 4

Сетка сайта

• Перенести CV в папку (например "pages/cv/")
• Создать новый file index.html и style.css для главной страницы
• Сделать сетку сайта
• Минимум 1 блок с display: grid
• Минимум 1 блок с display: flexbox
• Минимум 1 блок должен быть с background-image

Где искать примеры:

• https://www.free-css.com/
• https://themeforest.net/
• https://nicepage.com/css-templates
• https://templatemo.com/

По ключевым словам:

• portfolio template
• free css layouts
• css templates
• wordpress html templates
• bootrap templates
• responsive html templates

Мои референсы:

• http://rhythm.bestlooker.pro/mp-index-08.html
• https://preview.themeforest.net/item/martin-luther-personal-portfolio-template/full_screen_preview/20826058