Вы можете использовать абсолютное позиционирование для гридов, как и для обычного блока. Если вы установите position: relative для элемента сетки, а затем используете position: absolute для одного из его дочерних элементов, любое заданное позиционирование будет применяться в пределах этого элемента.
Вот пример использования абсолютного позиционирования для размещения иконки в правом нижнем углу элемента сетки:
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
body {
display: grid;
grid-template-areas:
"header header header"
"nav article ads"
"nav footer footer";
grid-template-rows: 50px 1fr 50px;
grid-template-columns: 20% 1fr 15%;
grid-gap: 10px;
height: 100vh;
margin: 0;
}
#pageHeader, #pageFooter, #mainArticle, #mainNav, #siteAds {
padding: 1em;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
position: relative;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
#mainArticle > .phone {
position: absolute;
bottom: 0;
right: 1vw;
font-size: 3em;
}
</style>
<body>
<header id="pageHeader">Шапка</header>
<article id="mainArticle">
Статья
<div class="phone">☎</div>
</article>
<nav id="mainNav">Навигация</nav>
<div id="siteAds">Реклама</div>
<footer id="pageFooter">Подвал</footer>
</body>
Однако при размещении элементов в сетке следует помнить о некоторых моментах.
Позиционированные элементы не являются частью гридов
Абсолютно позиционированные элементы не участвуют в компоновке гридов и не занимают места. Поэтому они не влияют на расположение других элементов сетки.
Вот два примера для демонстрации.
Без абсолютного позиционирования
В этом примере я прямо установил блок 4 во втором столбце первой строки, а для всех остальных блоков положение задано как auto. Блок 4 фактически вытесняет блок 2 из его места — блоки 2 и 3 автоматически переходят в следующие доступные области сетки. Таким образом, блок 4 повлиял на расположение элементов сетки.
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
position: relative;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
height: 90vh;
background-color: beige;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
text-align: center;
}
.red {
background: orangered;
grid-column: auto;
grid-row: auto;
}
.green {
background: yellowgreen;
grid-column: auto;
grid-row: auto;
}
.blue {
background: steelblue;
grid-column: auto;
grid-row: auto;
}
.gray {
border: 16px solid black;
background: silver;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
<div class="gray">4</div>
</div>
С абсолютным позиционированием
После установки значения position: absolute для блока 4, он по-прежнему находится в поле блока 2, но блок 2 остаётся в этой позиции без изменений. Блок 3 также не затронут.
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
position: relative;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
height: 90vh;
background-color: beige;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
text-align: center;
}
.red {
background: orangered;
grid-column: auto;
grid-row: auto;
}
.green {
background: yellowgreen;
grid-column: auto;
grid-row: auto;
}
.blue {
background: steelblue;
grid-column: auto;
grid-row: auto;
}
.gray {
border: 16px solid black;
background: silver;
grid-column: 2 / 3;
grid-row: 1 / 2;
position: absolute;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
<div class="gray">4</div>
</div>
Позиционированные элементы сжимаются в соответствии с их содержимым
Ещё один момент, который следует запомнить: позиционированные элементы сжимаются, чтобы соответствовать своему содержимому (данный эффект вы можете видеть в предыдущем примере).
Это отличается от того, что делают обычные элементы сетки — они растягиваются, чтобы соответствовать своей области. Так что если вы укажете, что элемент сетки занимает два столбца и две строки, он именно так и поступит.
Значение auto в позиционированных элементах
Для обычных элементов сетки значение auto для свойств, определяющих положение элемента, принимает значение span 1, но для абсолютно позиционированных элементов оно принимает значение края контейнера сетки. Это может привести к некоторым кажущимся странностям, если вы не знаете, как это работает.
Учитывая, что auto является исходным значением, это произойдёт по умолчанию, если вы не укажете другое значение.
Подробности
Если вас интересуют подробности абсолютного позиционирования в гридах, обратитесь к разделу об абсолютном позиционировании в спецификации CSS Grid Layout Module Level 1.
Кроме того, Мануэль Рего Касасновас из компании Igalia в своём блоге более подробно обсуждает вышеуказанные вопросы, а также приводит несколько хороших диаграмм, поясняющих эти понятия.