Как правильно подвинуть гриэлементы внутри сетки?

godsplane,

но почему то получилось только когда вы ответили

Да, так бывает ))

Как у последнего блока который видно убирать бордер, подгрузка еще блоков, бордер в скрытом последнем блоке убрался, а не у видимого блока, как быть?

Очевидно, рисовать верхний всем кроме первого, а не нижний всем кроме последнего

Как правильно подвинуть гриэлементы внутри сетки?

godsplane, есть ключевое слово span

.big {
  grid-column: span 2;
  grid-row: span 2;
}

Игру по гридам пройдите уже, верстать станет легче. Дел на полчаса. Гуглится по grid garden.

Как правильно подвинуть гриэлементы внутри сетки?

godsplane, надо-то что?
На картинке нарисована странная ерунда, вызывающая сомнения либо в формулировке вопроса либо в разуме дизайнера.

Если дизайнеру действительно нужны такие дыры, то если картинка обернута в figure, то width 100% для картинки. Возможно, object-fit для надежности, чтобы не вывалилось ничего.
Если нет, то align-items в помощь.

Дело в том, что я даже не вижу тут проблемы. Кроме сомнительного дизайна.
Так что объясните, пожалуйста, что именно у вас не получается или не понятно как делать.

Как правильно подвинуть гриэлементы внутри сетки?

Картинки вырезанные с белыми скругленными уголками это огонь!

Как правильно подвинуть гриэлементы внутри сетки?

Надо-то что?

Как правильно подвинуть гриэлементы внутри сетки?

Из каких вариантов выбрать? ;)

И где песочница от этого?
Как первый раз тут..

Почему флекс срабатывает на второй тег(а), если я поставил .unn>a, для первого, что с этим делать?

strelok011, можете даже не начинать, тут бесполезно. Я уже раз десять лет за 5 пыталась. Не работает )))
Ссылки в ссылки, селекторы через ж, классы вырвиглаз... всё так и остается.

Почему флекс срабатывает на второй тег(а), если я поставил .unn>a, для первого, что с этим делать?

Антон Вебсайтовский, это не у меня в примере... Это скрин девтулзов того невалидного кода.

Как сделать так чтобы блок div не расширялся при добавлении элемента?

Beginner_in_IT, если под "расширяется" вы имели в виду увеличение высоты, то объяснение в комментарии выше.

relative не убирает элемент из потока и его бывшее место остается зарезервированным, оно и увеличивает высоту.

Как правильно такое сверстать?

Это называется progress bar https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Как сделать так чтобы блок div не расширялся при добавлении элемента?

Beginner_in_IT, посмотрела. Там всё та же дикая разметка. Валидатор тут: https://validator.w3.org/nu/
Посмотрите видео Вадима Макеева о том как сверстать навигацию https://www.youtube.com/watch?v=y52rtbUeCac&t=14s

Двигать бургер с помощью relative мало удобно. Ведь место под него останется зарезервированным в том месте, где элемент был до сдвига.
Используйте либо абсолют либо флексы с гридами.

Как сделать так чтобы блок div не расширялся при добавлении элемента?

Beginner_in_IT, если что, скрины я вижу так


Песочницу ага, посмотрю

Как сделать так чтобы блок div не расширялся при добавлении элемента?

Начать, наверное, имеет смысл с разметки.
Меню это тег nav и в нем ul и т.д.
А у вас одинокий li вставлен в div. Так нельзя.
img - это контентные изображения. А у вас иконки, их делают стилями. Но хорошо бы сделать текст для доступности.
Получится:

<a href=""><span class="visually-hidden">Инструменты</span></a>

. Про паттерн visually-hidden погуглите.

блок div расширяется хотя все размеры выставлены

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

На этом сервисе запрещено вставлять код скринами. Используйте для него теги <code></code> и/или песочницы типа codepen.io
Лучше и то и другое, а длинные простыни с кодом убирать в спойлеры.

Почему флекс срабатывает на второй тег(а), если я поставил .unn>a, для первого, что с этим делать?

Антон Вебсайтовский,

ну на эту разметку как бы пофиг, есть ошибка или нет, тем более такого рода, это же фигня.

Браузер вынимает ссылку из ссылки. Поэтому обе оказываются на первом уровне div > a

Почему флекс срабатывает на второй тег(а), если я поставил .unn>a, для первого, что с этим делать?

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

Какие есть способы горизонтально выровнять по центру grid элементы?

system-shock, js так может.
В том числе, передавать значения в кастомные.

Почему флекс срабатывает на второй тег(а), если я поставил .unn>a, для первого, что с этим делать?

Антон Вебсайтовский, эм.. это.. ссылки нельзя вкладывать в ссылки.
Можно открыть инспектор и посмотреть по дереву где он их нарисует.
Если что, в разных браузерах результат может быть разный. Как и обычно бывает с невалидным кодом.

Почему флекс срабатывает на второй тег(а), если я поставил .unn>a, для первого, что с этим делать?

Первый это :first-child
> - это первый уровень вложенности

Почему между картинками появляется отступы?

StepsOnes, так откройте ваши картинки в любом редакторе и обрежьте нормально.

Почему между картинками появляется отступы?

Те, которые нарисованы у вас прямо в картинке?