Сетка Css: Укладка элементов

Следите за мной на Youtube

Уложенные элементы

Что вы имеете в виду под «сложенными элементами»? Как вы можете видеть на изображении ниже, я использую этот термин для элементов, сложенных в пространстве z! Как слои в Photoshop! В данном случае слоями являются изображение, градиент и затем текст.

В этой статье/видео я хочу показать вам элегантный способ укладки этих элементов! Но вместо использования плавающих элементов или абсолютной позиции мы воспользуемся возможностями сетки css.

Давайте посмотрим на этот html-фрагмент.

<div class="card stack">
    <div class="img"></div>
    <div class="gradient"></div>
    <div class="title">
        <h2>Lorem ipsum dolor sit amet.</h2>
    </div>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Здесь у нас есть карточка «компонент», у которой есть три дочерних элемента (div). Один для размещения изображения, другой для градиента и третий для текста, который должен быть размещен над изображением.

Также обратите внимание, что у элемента карточки есть дополнительный класс «stack». Мы собираемся использовать этот класс для создания небольшой многоразовой утилиты.

Поэтому добавим css для этого.

.stack {
    display: grid;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Это превращает наш элемент stack в фактическую сетку высотой в одну строку и шириной в один столбец. Важной концепцией здесь является то, что хотя наша сетка теперь имеет только одну «ячейку», она имеет 4 линии сетки, как показано на рисунке ниже.

Здесь видно, что наша сетка имеет линии сетки для левой, верхней, правой и нижней сторон. Мы можем разместить элементы сетки между этими линиями сетки, задав им свойство css grid-area.

.stack > * {
  grid-area: <left> / <top> / <right> / <bottom>;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Чтобы разместить наши «слои», мы должны указать элементу сетки, между какими линиями сетки он должен разместиться, задав ему свойство grid-area и указав номера четырех линий сетки. В примере выше показано, в каком порядке должны располагаться эти значения.

.stack > * {
  grid-area: 1 / 1 / 2 / 2;
}
Вход в полноэкранный режим Выход из полноэкранного режима

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

Поскольку мы размещаем их в одном и том же месте сетки, они будут располагаться идеально друг над другом.

Мы можем сократить значение площади сетки, задав ей только начальные линии сетки. Grid будет считать, что мы хотим покрыть только соседнюю ячейку сетки.

.stack > * {
  grid-area: 1 / 1;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Перемещение текста в нижнюю часть.

В примере макета текст располагается внизу изображения. Для этой задачи мы можем использовать функцию grid’а align-self

.card .title {
    align-self: end;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Здесь мы добавили свойство align-self со значением end в title div, что приведет к перемещению всего, что находится внутри этого элемента, в самый низ.

Подписывайтесь на мой канал Youtube
Купите мне кофе
Общайтесь в Twitter
И следите за моими статьями здесь

Спасибо за ваше драгоценное время, и удачного дня!

Оцените статью
devanswers.ru
Добавить комментарий