Обращение к первому элементу строки display: grid;

172
15 июня 2022, 08:50

Есть у меня такой HTML: Сейчас там расположена 1 строка на 13 элементов, таких строк будет 6

<div class="site-size__grid-grif">
        <div class="grid-grif__item">
            <span class="item__middle-line"></span>
        </div>
        <div class="grid-grif__item"></div>
        <div class="grid-grif__item"></div>
        <div class="grid-grif__item"></div>
        <div class="grid-grif__item"></div>
        <div class="grid-grif__item"></div>
        <div class="grid-grif__item"></div>
        <div class="grid-grif__item"></div>
        <div class="grid-grif__item"></div>
        <div class="grid-grif__item"></div>
        <div class="grid-grif__item"></div>
        <div class="grid-grif__item"></div>
        <div class="grid-grif__item"></div>
    </div>

CSS для grid:

.site-size__grid-grif {
    width: 100%;
    display: grid;
    grid-template-columns:repeat(13, 1fr);
    grid-template-rows: repeat(6, 50px);
}

Вопрос в том, как мне обратиться к первому элементу первой строки и к последнему элементу последней строки? Или к n-элементу n-строки?

Можно в принципе повесить классы, так как грид объявлен явно, но может есть какое-то поизящнее решение?

Answer 1

RifmaMan - действительно подсказал выход, а я сразу не сообразил. Так как грид фиксированн то мы можем обращаться к элементам используя их порядковый номер к примеру к первому

nth-child(1)

к последнему

nth-child(13)

к первому элементу второй строки

nth-child(14)

и т.д.

READ ALSO
Как отодвинуть вертикальные ссылки, так как на скрине ниже?

Как отодвинуть вертикальные ссылки, так как на скрине ниже?

Мне нужно понять, как перенести текст с помощью css в нужное месторасположение

267
Чем отличается overflow: hidden от visibility: hidden?

Чем отличается overflow: hidden от visibility: hidden?

Разбирал анимацию появления текста и заметил строчку: overflow: hidden - сразу попробовал заменить эту строчку на visibility: hidden чтобы проверить будет...

170
Отключается CSS в письмах Mail.ru

Отключается CSS в письмах Mail.ru

Верстаю html-письмоПри отладке вёрстки возникла проблема в почте Mail

150