<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

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

Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

CSS Grid Layout #2 (Позиционирование ячеек)

CSS Grid Layout #2 (Позиционирование ячеек)

В CSS Grid можно позиционировать отдельно взятую ячейку (grid item), как по оси X, так и по оси Y. Поэтому, все рассматриваемые CSS свойства будут относиться к grid элементам, а не к контейнеру. Этих свойств у нас семь и сегодня вы узнаете, как можно ими управлять. На предыдущем уроке мы уже построили базовую сетку, от нее и будем отталкиваться.

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

Допустим мы хотим расположить наш элемент в третьей ячейке первого ряда. Обратите внимание, что у данной сетки 4 горизонтальных линий и пять вертикальных (Grid Line). Важно понимать, что управление элементами происходит через номера этих линий, а не через номера ячеек.


CSS Grid Layout #2. Позиционирование ячеек.

В свойстве grid-column-start укажем номер линии колонки, с которой должен начинаться элемент. Элемент автоматически заканчивается на следующей линии колонки, если не указать другое свойство grid-column-end. Точно также работает и аналогичное свойство grid-row-start. Оно обозначает, начиная с какой линии сроки будет позиционироваться элемент.

.item {
    grid-column-start: 3;
    grid-row-start: 1;
}

Теперь разместим нш элемент в 9-юу ячейку.


CSS Grid Layout #2. Позиционирование ячеек.

.item {
    grid-column-start: 1;
    grid-row-start: 3;
}

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

Свойства grid-column-end, grid-row-end определяют линии колонки и ряда, где должен заканчиваться элемент. Например, мы хотим чтобы наш элемент занимал весь средний ряд.


CSS Grid Layout #2. Позиционирование ячеек.

Отсчитываем, на каких grid линиях элемент начнется и на каких закончится.

.item {
    grid-column-start: 1;
    grid-row-start: 2;
    grid-column-end: 5;
    grid-row-end: 3;
}

Отрицательные значения grid линий

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


CSS Grid Layout #2. Позиционирование ячеек.

.item {
    grid-column-start: 1;
    grid-row-start: 2;
    grid-column-end: -1;
    grid-row-end: -2;
}

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

Свойства grid-row-start и grid-column-end можно сократить до grid-column. Тоже самое можно проделать и с grid-row.

.item {
    grid-column: 1 / -2 // сокращенная запись grid-column-start / grid-column-end
    grid-row: 2 / -2 // сокращенная запись grid-row-start / grid-row-end
}

Свойство grid-area

Можно пойти дальше и еще больше сократить запись, путем избавления от grid-column и grid-row. Свойство grid-area может принимать от 1 до 4 значений.

.item {
    grid-area: 2 / 1 / -2 / -2 // grid-row-start / grid-column-start / grid-row-end / grid-column-end
}

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

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