Как сделать такую сетку?

Уставшая Вишенка,

Это решение ужасно и в дальнейшем при работе оно вызовет проблемы нельзя так использовать :nth-child

И никакой конкретики. Озвучьте проблемы.
Заодно объясните, как в вашей гениальной вёрстке gap между элементами задать.

Как сделать такую сетку?

Уставшая Вишенка,

решение с классами куда лучше чем решение с позиционированием элемента в макете

Такое ощущение, что я общаюсь с человеком слабо разбирающемся в верстке. О каком позиционировании элемента в макете вообще речь?

Но если все таки речь про то, какой селектор использовать: по классу или :nth-child, то все строго зависит от поставленной задачи. Если есть готовая верстка без доп классов, то выбор как бы очевиден.

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

25% - 10px откуда эти цифры?
37.5% - 10px а это откуда?
как задать gap между элементами в вашей верстке?
Такой код в поддержке просто ужасен - не делайте так.

У вас очевидно совсем мало опыта в верстке, раз такие простые вещи доходят так долго.

Как сделать такую сетку?

Уставшая Вишенка, Ещё один шаг вперёд. Осталось переменные завести, чтобы gap не менять сразу в трёх местах. Но так извращаться можно было когда ещё не было нормальных инструментов в верстке, которые упрощают жизнь. В гридах браузер все вычисления сделает самостоятельно под капотом.

Как сделать такую сетку?

Уставшая Вишенка, Эта верстка не элементарная - она очень хрупкая. Я в ваших стилях меняю gap и у меня вся верстка съезжает. А самый главный вопрос - зачем изобретать велосипед, если в css есть grid. Ваше решение как раз таки чрезмерно усложнено. Плюс для нормальной поддержки этого кода нужно все выносить в переменные и все рассчеты делать только с переменными. То что вы написали - это лишь набор магических чисел для усложнения поддержки.

gap в 21px специально подобрали, чтобы вычитать нужно было целое число? А если бы 20px? Еще более магическое число 13,3333333333 пришлось вычитать. И где тут простота и элементарность?

Как сделать такую сетку?

Уставшая Вишенка, До сих пор не вижу ваш код простой верстки. Показывайте свой вариант с процентами.

Как сделать такую сетку?

Уставшая Вишенка, зачем тут calc если для создания сетки используются fr? А принцип, что тут используется сетка скорее всего 8 колоночная, уже был дан в ответе.

Как сделать такую сетку?

Ага, а ширина всех 8 колонок 100% + 7 * gap. Это называется где то просчитался, но только вот где?

Как повторить фильтр с фигмы?

При чём тут фильтр? Ищите слой с градиентом.

Как сделать такую фигуру на css?

Я бы использовал радиальные градиенты в связке с фоном или масками. Если маски использовать, то для сафари нужен префикс. А так будут работать оба варианта в 13 сафари.

Почему при dispalay:grid ломается обводка блока через svg?

nikfcsm, В подобных случаях для проблем с масштабированием свг можно для svg задать preserveAspectRatio="none", а для отдельных элементов с обводкой задавать vector-effect="non-scaling-stroke".
Либо на css попытаться повторить такую же обводку. Непросто будет, но маской с коническим градиентом можно что то похожее воспроизвести.

Почему при dispalay:grid ломается обводка блока через svg?

Grid здесь имеет опосредованное влияние — просто ширина блока в вашем примере уменьшается на 0.5px. И в свг соответственно масштабируется обводка. При адаптиве это будет происходить неизбежно. А если в блок добавить больше контента и он по высоте станет больше, опять масштабирование изменит пропорции обводки.

Как сделать размер flex-элемента по контенту и с указанным flex-grow?

Чтобы добиться именно такого поведения нужен только flex-grow: 9999 hack https://www.joren.co/flex-grow-9999-hack/
И как видите достаточно четерех девяток.

Как изменить цвет ссылок?

Здесь специфичность вообще не при чем. Для header__nav-list li можно прописать в селектор хоть id, хоть important добавить. Все равно применятся стили прописанные именно для ссылки. А они здесь есть только дефолтные браузерные.

Как задать border на всю ширину контейнера?

Lynn «Кофеман»,

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

Это я думаю лишнее — у контейнера то по любому будут горизонтальные внутренние отступы. Здесь подойдет псевдоэлемент с left и right с отрицательным значением величины отступа. Желательно значение отступа вынести в переменную.

Как задать border на всю ширину контейнера?

Делайте так, чтобы было как в макете и потом вопросы задавайте. Впустую на вас тратить время здесь никто не будет.

Как задать border на всю ширину контейнера?

Дмитрий Ярощук,

Подправил

И теперь таблица естественно по ширине контейнера — вопрос можно считать решенным?

Как задать border на всю ширину контейнера?

Дмитрий Ярощук, Ну так оберните на codepen — о чем еще я должен догадаться?

Как задать border на всю ширину контейнера?

Если ориентироваться на codepen, то просто для body прописать margin: 0 и border станет на всю ширину.

Как выбрать элементы удовлетворяющие условию выборки?

https://codepen.io/xdevelx/pen/OJeNxrG?editors=1100

Как верстать блок необычной формы адаптивно?

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