Ankhena

box-sizing: border-box

Сюрприз с котиком хорош.

Но вам тоже сюрприз: картинки для интернет магазина нужно готовить.
img тоже автоматом может обрезаться под квадрат, это не проблема. Проблема в другом, что так и голову можно отрезать, автоматом.

Не оттуда пляшете.

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

Так вот, с сайтами аналогичная история.
10 лет назад считалось, что шрифт 14px это гигантомания и использовали 10 или 12. Между строчками крошечные отступы. Особо нерадивые даже между абзацами пытались не делать пустых строк.

Есть мода и восприятие пользователем современных сайтов. То, как хочется видеть именно сейчас. Изменяются даже пропорции и зависимости.
96 это точно такое же красивое число как 100. Это 16*6. А 16 это стандартный размер шрифта основных браузеров.

Кроме этого есть аспекты адаптивности.
И правильно не ширина кнопки равна 100 или 96px, а ширина кнопки это ширина текста плюс отступы. И хорошо бы, чтобы эти отступы были пропорциональны размеру шрифта, а не кратны 5px. Вы поставите отступ четко 20px, а пользователь поставит в настройках браузера шрифт 150%. И получится куцая кнопка с некрасивыми маленькими отступами.
При этом не все элементы должны быть кратны размеру шрифта, какие-то имеют другие зависимости.

Другой вариант, пропорции относительно размеров экрана или блока. Например, кнопка должна занимать всю ширину блока или половину. Если текст не помещается, то переносится.

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

И да, дизайнер может четко сказать, что справа отступ 19px, а слева 17, потому что визуально (например, из-за особенностей шрифта) получается ровно. Если это проблема для верстальщика, то не надо работать с таким верстальщиком.
Верно и в обратную сторону, если дизайнер нагородил какую-то невменяемую конструкцию из-за которой прибавляется лишняя 1000 строчек кода, то имеет смысл обсудить целесообразность ее использования с самим дизайнером и заказчиком.

Про вклад заказчиков в дизайн, я думаю, вы и сами знаете. У них особенное чувство прекрасного, хорошо, если просто консерватор из первого абзаца.

Тогда сделайте это в один градиент, точки в нем ставьте с одинаковыми интервалами. Белый и прозрачный.

Можно еще развлечься с промежуточными точками.

На флексах: https://jsfiddle.net/6n8p29rq/

display:table для старых браузеров: https://jsfiddle.net/4r4Lqo62/

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

Как объяснить дизайнеру как использовать сетку

Почему он вообще должен использовать сетку? ;)
Он дизайнер, он так видит.
Кто решает, что как должен выглядеть сайт? Дизайнер с клиентом или верстальщик? Думаю, что первое.
А уж как реализовать затею дизайнера это задача верстальщика.

В показанных макетах я вообще не вижу проблемы.

Кто целевая аудитория, какими устройствами они скорее всего пользуются?
Общую информацию можно посмотреть, например, тут www.liveinternet.ru/stat/ru/resolutions.html
А дальше делать выводы.

1. В данном случае: объединить видимые слои и потом вырезать.

2. Использовать конструкцию

<figure>
  <img>
  <figcaption>
    Тут описание, которое будет появляться при наведении
  </figcaption>
</figure>

Никто никому ничего не должен, пока обе стороны не согласились с условиями договора и не подписали его. (Не важно в каком виде)

На каждый тип заказчика найдется свой тип исполнителя. Если Вам некомфортно работать без полного представления о контенте, не работайте с такими.

Серый фон, два белых блока.
Выравнивание достигается различными способами. С помощью флекс, inline-block, float ...

Дальше JS, в котором написано, что при достижении определенной высоты прокрутки правому блоку нужно задать фиксированное позиционирование.

Вариант 1: см ответ Иван Сергеев
задать ей class или id

Вариант 2:
если надо покрасить ссылку, которая ссылается на конкретную страницу:

a[href="тут чему равно"] {
стили
}

При этом можно использовать не только знак равенства, а также содержит, начинается, не равно и т.д. https://habrahabr.ru/post/85920/