Раскройте мощь CSS Grid для захватывающих показок услуг по уходу за питомцами

Введение

В "Дом питомцах", виртуальном мире для любителей животных, Алекс, веб-разработчик, отправляется в поиски способа обновить показ их услуг с использованием CSS Grid.

Этот лаба旨在 привлечь пользователей, представляя услуги в организованном, визуально привлекательном виде. Задача Алексе - превратить раздел "Показ" в сеточный макет, который будет элегантно и эффективно подчеркивать услуги по уходу за питомцами.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/AdvancedLayoutGroup -.-> css/grid_layout("Grid Layout") subgraph Lab Skills css/box_model -.-> lab-289077{{"Показка услуг по уходу за питомцами с использованием CSS Grid"}} css/margin_and_padding -.-> lab-289077{{"Показка услуг по уходу за питомцами с использованием CSS Grid"}} css/width_and_height -.-> lab-289077{{"Показка услуг по уходу за питомцами с использованием CSS Grid"}} css/display_property -.-> lab-289077{{"Показка услуг по уходу за питомцами с использованием CSS Grid"}} css/positioning -.-> lab-289077{{"Показка услуг по уходу за питомцами с использованием CSS Grid"}} css/grid_layout -.-> lab-289077{{"Показка услуг по уходу за питомцами с использованием CSS Grid"}} end

Свойство position

Свойство CSS position - это мощный инструмент, который позволяет разработчикам точно контролировать расположение элементов на странице. Это позволяет размещать элементы в соответствии с их нормальным потоком, относительно их родительского элемента, относительно viewport или относительно их ближайшего прокручивающегося предка.

Статическое позиционирование

static - это значение по умолчанию для всех элементов, что означает, что элементы располагаются в соответствии с нормальным документо-типом. Элементы с статическим позиционированием не受影响 свойствами top, right, bottom или left.

Когда вы хотите, чтобы элементы следовали стандартному потоку, статическое позиционирование - ваш лучший выбор.

Например, есть изображение робота слева от страницы, и если мы установим этот элемент в position:static, то при прокрутке страницы это изображение также будет прокручиваться вместе с потоком страницы.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .full-page-img {
        width: 100%;
        margin-left: 15%;
      }
      .box img {
        width: 90%;
      }
      .ad-l {
        position: static;
        top: 100px;
        left: 0;
        width: 150px;
      }
    </style>
  </head>
  <body>
    <img src="robot.png" class="ad-l" />
    <div class="full-page-img">
      <img src="page.png" />
    </div>
  </body>
</html>

Пример статического позиционирования робота

Фиксированное позиционирование

fixed позиционирование размещает элемент относительно viewport браузерного окна. Элемент останется на том же месте, даже если страница прокручивается.

Для создания навигационной панели, которая фиксирована вверху или внизу страницы.

Например, есть изображение робота слева от страницы, если мы установим этот элемент в position:fixed, то при прокрутке страницы это изображение не исчезнет из-за прокрутки страницы, изображение будет находится в фиксированном положении.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
   .full-page-img {
      width: 100%;
      margin-left: 15%;
    }
   .box img {
      width: 90%;
    }
   .ad-l {
      position: fixed;
      top: 100px;
      left: 0;
      width: 150px;
    }
    </style>
  </head>
  <body>
    <img src="robot.png" class="ad-l" />
    <div class="full-page-img">
      <img src="page.png" />
    </div>
  </body>
</html>

Пример фиксированного позиционирования робота

Относительное позиционирование

relative позиционирование позволяет смещать элемент относительно его нормального положения. Даже при смещении элемент по-прежнему занимает свое исходное пространство.

Когда вам нужно немного изменить положение элемента, не влияя на другие части макета.

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
      }
      .box img {
        width: 90%;
      }
      .ad-l {
        position: relative;
        top: 70px;
        left: 70px;
      }
    </style>
  </head>
  <body>
    <img src="labby.png" class="ad-l" />
    <div class="box">
      <img src="page.png" />
    </div>
  </body>
</html>

Изображение робота с относительным позиционированием

Абсолютное позиционирование

absolute позиционирование делает элемент позиционируемым относительно его ближайшего позиционированного предка, если таковой имеется, или иначе относительно начального содержащего блока. Он удаляется из документационного потока и не занимает места.

Когда вам нужно создать плавающий элемент, такой как модальное окно или выпадающее меню.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
      }
      .box img {
        width: 90%;
      }
      .ad-l {
        position: absolute;
        top: 70px;
        left: 70px;
      }
    </style>
  </head>
  <body>
    <img src="labby.png" class="ad-l" />
    <div class="box">
      <img src="page.png" />
    </div>
  </body>
</html>

После того, как вы поймете использование атрибута position, мы можем добавить следующее в style.css:

header {
  position: fixed;
  display: flex;
  flex-direction: row;
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
}
.navigation li {
  position: relative;
  display: inline-block;
}
.service figure {
  position: relative;
}
.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}

✨ Проверить решение и практиковаться

Основы Grid

В предыдущей лабораторной работе мы изучали Flexbox, но макет страницы для питомцев не давал нужного результата, поэтому в следующем этапе изучим другой макет - Grid Layout.

CSS Grid Layout (Grid) - это система макета на основе сетки, которая позволяет разработчикам создавать адаптивные макеты веб-страниц. Grid может разделить страницу на основные области или определить макет более мелких компонентов.

Для использования Grid-макета необходимо сначала установить свойство display: grid; на элементе-контейнере. Мы можем добавить следующее в style.css:

.container {
  display: grid;
  padding: 0px;
  padding-top: 1em;
  width: 100%;
}
.services {
  width: 90%;
  display: grid;
  margin: 20px auto;
}

✨ Проверить решение и практиковаться

Определение строк и столбцов

Далее используем свойства grid-template-columns и grid-template-rows для определения строк и столбцов в контейнере.

Например,.container настраивает режим сеточного отображения с конкретными размерами для столбцов и строк:

display: grid; активирует сеточный макет для контейнера.
grid-template-columns: 50px 100px; определяет два столбца, где первый столбец имеет ширину 50 пикселей, а второй - 100 пикселей.
grid-template-rows: 30px 60px; определяет две строки, где первая строка имеет высоту 30 пикселей, а вторая - 60 пикселей.

Мы можем добавить следующее в style.css:

.container {
  display: grid;
  grid-template-columns: 100%;
  padding: 0px;
  padding-top: 1em;
  width: 100%;
}
.services {
  width: 90%;
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  margin: 20px auto;
}

fr - это гибкая единица длины, представляющая долю доступного пространства в контейнере сетки.

✨ Проверить решение и практиковаться

Интервал между элементами сетки

Свойство grid-gap (ныне рекомендуется использовать gap, row-gap и column-gap) позволяет установить расстояние между строками и столбцами сетки.

Пример интервала между элементами CSS-сетки

Мы можем добавить следующее в style.css:

.services {
  width: 90%;
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  gap: 5%;
  margin: 20px auto;
}

✨ Проверить решение и практиковаться

Резюме

В этой лабораторной работе Алекс успешно использовал CSS Grid для перезаписи раздела отображения "Дом для питомцев", демонстрируя услуги по уходу за питомцами в структурированном и привлекательном сеточном макете. Этот подход не только улучшил визуальное представление, но и продемонстрировал гибкость и мощь CSS Grid в веб-дизайне.