<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

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

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

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

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

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

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

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

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

Пример верстки фотогалереи на CSS Grid #1

Пример верстки фотогалереи на CSS Grid #1

После цикла уроков по CSS Grid, пришло время подкрепить полученные знания на верстке реального макета. Мы не будем разбирать все свойства связанные с оформлением, а сфокусируемся именно на верстке одной секции по грид технологии. Как правило начинающие верстальщики легко справляются с CSS свойствами, отвечающими за красоту. Зато испытывают трудности с размещением элементов на сайте и с адаптивностью их под разные разрешения.

Делать верстку нестандартной фотогалереи (назовем ее портфолио) стало невероятно легко с технологией CSS Grid. В итоге мы должны прийти к такому результату.



Пример верстки фотогалереи на CSS Grid.

HTML разметка

Обратите внимание, что картинки в портфолио не просто так вставлены, а служат фоном для текста. Это значит, что мы не можем вставить картинки средствами HTML, через тег img. Вспоминаем, что у CSS есть свойство background-image. Соответственно, сначала создадим саму секцию-портфолио с вложенными тегами div, а каждую картинку положим в отдельный тег div в качестве фона. Рекомендуется стили касающиеся медиа файлов не выносить в отдельный CSS файл. Медиа файлы должны оставаться в HTML разметке в виде инлайн стилей, если верстка в дальнейшем будет интегрироваться с WordPress или с другой CMS. Иначе пользователю будет неудобно управлять контентом через админ-панель.

<section class="portfolio-section">
 <div class="portfolio-item" style="background-image: url(img/1.jpg)"><span>Олень</span></div>
 <div class="portfolio-item" style="background-image: url(img/2.jpg)"><span>Лиса</span></div>
 <div class="portfolio-item" style="background-image: url(img/3.jpg)"><span>Лев</span></div>
 <div class="portfolio-item" style="background-image: url(img/4.jpg)"><span>Тигр</span></div>
 <div class="portfolio-item" style="background-image: url(img/5.jpg)"><span>Сова</span></div>
 <div class="portfolio-item" style="background-image: url(img/6.jpg)"><span>Жираф</span></div>
 <div class="portfolio-item" style="background-image: url(img/7.jpg)"><span>Енот</span></div>
 <div class="portfolio-item" style="background-image: url(img/8.jpg)"><span>Леопард</span></div>
 <div class="portfolio-item" style="background-image: url(img/9.jpg)"><span>Волк</span></div>
</section>

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


Пример верстки фотогалереи на CSS Grid.

CSS код


Пример верстки фотогалереи на CSS Grid.

Посмотрим на макет и посчитаем сколько элементов находится в одном ряду. Берем по максимальному количеству элементов. В последнем ряду у нас находится 4 элемента. Следовательно, сетка состоит из четырех колонок по одной фракции в каждой.

// Grid контейнер
.portfolio-section {
    display: grid; / * отобразить элементы как гриды * /
    margin: 10px; / * отступы по краям * /
    grid-template-columns: repeat(4, 1fr); / * шаблон для колонок * /
    grid-gap: 10px; / * отступы между ячейками * /
}


Пример верстки фотогалереи на CSS Grid.

Сделаем базовую разметку для грид элементов.

.portfolio-item {
    display: grid; / * включение гридов для центрирования текста * /
    min-height: 32vh; / * высота портфолио занимает один экран * /
    background-size: cover; / * растянуть картинку на весь блок * /
    background-position: center; / * расположение картинки в центре блока * /
    text-align: center; / * горизонтальное выравнивание текста * /
    align-content: center; / * вертикальное выравнивание текста * /
}

На данном этапе наша сетка выглядит вот таким образом. Осталось поработать с грид-элементами, которые занимают больше чем одну колонку или ряд.


Пример верстки фотогалереи на CSS Grid.

Мы видим, что первый элемент занимает 2 колонки. Обратимся к первому элементу через псевдокласс nth-child(1) и пропишем шаблон, где 1/3 обозначает с с 1-ой по 3-ю линию.

.portfolio-item:nth-child(1) {
    grid-column: 1/3; / * 1-ый элемент занимает две горизонтальных ячейки * /
}


Пример верстки фотогалереи на CSS Grid.

Пятый элемент начинается на 2-ой позиции и заканчивается на четвертой.

.portfolio-item:nth-child(5) {
    grid-column: 2/4; / * 5-ый элемент занимает две горизонтальных ячейки * /
}


Пример верстки фотогалереи на CSS Grid.

Шестой элемент занимает четвертую колонку, но его нужно растянуть вертикально.

.portfolio-item:nth-child(6) {
    grid-column: 4;
    grid-row: 2/4; / * 6-ый элемент занимает две вертикальные ячейки * /
}


Пример верстки фотогалереи на CSS Grid.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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