Горизонтальная карточка статьи?

SteveJ42, это не float, это флекс (или грид)

Но в чем сложности-то?
Выложите код в песочницу jsfiddle.net и скажите, что именно не получается.

Не работает кнопка "отменить" почему?

Почему бы формы не делать тегом form и для сброса не использовать обычный button reset, вместо вот этой каши?

Как сделать что бы блок "упал" вниз?

По вашему описанию ничерта не понять. Кто кому навигация, в чей низ и как это все связано между собой в разметке.
Выложите ваш код в песочницу jsfiddle.net
И картинку что нужно получить.

Возможно, пригодится
https://jsfiddle.net/hzow6L84/

Как вывести код только в блок с нужным id?

if $Id нужный, то echo оба текста
иначе один

Почему slick slider неправильно высчитывает ширину слайда?

Qurel, не вижу, чтобы она обрезалась.

Почему slick slider неправильно высчитывает ширину слайда?

Qurel, куда уменьшаться?

Родитель 374 точки, макс ширина картинки 374 точки.
А вы какого результата хотите добиться?

Как исправить баг с динамической шириной border и блоком заливки внутри?

madc0de, типа того height: calc(100% + 2px)

Либо попробовать заменить бордер на тень.

Почему slick slider неправильно высчитывает ширину слайда?

И что, 374px оказываются больше 100%?

Слайдом является картинка

Ничего подобного. Слайд это picture.

А 374 вот

.advantages-content__block.advantages-content__block--product {
    max-width: 374px;
    margin-top: 280px;
}

Как исправить баг с динамической шириной border и блоком заливки внутри?

madc0de,
Похоже на проблемы округления.
Прибавьте по точечке высоты и ширины псевдо

Как сделать элементы с разной высотой?

intriga93, display inline-block детям

Как прижать ссылки с image-background к низу страницы?

Так https://jsfiddle.net/g8w1m9t6/ или так https://jsfiddle.net/bhv6j7u0/

Или еще как-нибудь, если вы покажете во-первых, что пробовали, во-вторых, какого эффекта нужно достичь.

Как сделать элементы с разной высотой?

Обычный CSS columns поможет

Как исправить баг с динамической шириной border и блоком заливки внутри?

Сначала нужно объяснить зачем нужен псевдо для заливки фона.
Потом выложить свой код с воспроизводимой проблемой в песочницу, чтобы мы знали что у вас в коде.

Загружаются ли картинки, если они встречаются в CSS?

Лучше Network

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

Сергей, я написала margin auto, а не 50%

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

div.block

А если вместо div'а поставить section, то стили будут другими?

А вместо этого

margin: 0 50%;
transform: translate(-50%, 0);
width: 50%;

достаточно

width: 50%;
margin: 0 auto;

И не нужно заставлять браузер делать трансформации и менять контекст наложения.

В теге figure всё таки лучше размещать img, а не фон. Img это контентное, несущее смысл изображение. Именно к нему добавляется подпись.
А если это фон, то значит в нем нет смысла, это просто украшение и семантика figure к нему никак не подходит.

Как задать ширину столбца используя repeat()?

Ragtime Kitty, также как к первому, какая разница
1fr 1fr min-content 1fr

Как адаптировать grid верстку под ie11?

Каждой ячейке нужно прописать положение.
Затем можно воспользоваться автопрефиксером.

Если ручками, то
это

grid-template-columns: repeat( 3, 1fr );
grid-gap: 50px;

заменяется на 5ти колоночный грид, у которого четные столбцы по 50px
-ms-grid-columns: 1fr 50px 1fr 50px 1fr;
Соответственно, если ручками указывать начальные и конечные линии, то нужно не забывать, что их 5, а не 3.
Со строками аналогично. И придется указать сколько их.

С высотой с помощью padding вроде не прокатит. Замените на расчеты в vw.

И еще пачечка статей, может найдете что-то хорошее https://css-tricks.com/css-grid-in-ie-css-grid-and...

Как отслеживать ширину окна через js?

zhurawlenokk,

Это, к слову, тестовое задание на верстку...

А вы уверены, что хотите с ними работать?

Я, если бы решила вообще что-то делать, сделала бы через media и сказала бы, что через js это делают только идиоты. Но показала бы решение другой задачи, для которой нужно отслеживать ширину на js.
Если бы они после этого сказали "о, привет, адекватный человек, которые не повелся на наши провокации", то подумала, нужны ли мне такие провокаторы.
А если бы послали, то решила, что и славненько.

Есть ли такие ситуации где гриды вообще не к месту, а флексбокс подойдёт?

есть ли такие ситуации где гриды вообще не уместны, а флексбокс в самый раз

Да, например, блоки одинаковой высоты и разной ширины.

3)стоит ли использовать гриды, когда на сайте 100 и более картинок разных размеров нужно выстроить в колонки?

Гриды сами по себе (без участия js) не решают этой проблемы. Флексы, кстати, тоже.
Гуглите masonry.
Или смотрите в сторону css columns.

1) есть ли такие ситуации где гриды вообще не уместны, а флексбокс в самый раз или даже вместо их обоих те же флоаты, инлайн-блок и позишины лучше юзать?

Флоаты нужны для обтекания одного элемента (обычно картинки) другими (или текстом). Ни флексы, ни гриды, ни абсолюты вам в этом не помогут.
Абсолют нужен для того, чтобы вынуть элемент из потока и куда-то там переместить.
Флексы - это одномерная раскладка.
Гриды - двумерная

2)какие именно ситуации бывают?

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