Как добавить всплывашку?

sciencefront, выглядит странно, ну да ладно, проблемы дизайнера.

Мне больше всего, пожалуй, нравится вариант с nth-child, gc через span и margin (левыми для тех у кого пусто слева и правыми для тех у кого справа) (предыдущий с паддингами менее удобный).
Дальше есть разные вариации.
- с aspect-ratio самая простая, там нужный margin можно поставить в auto и нет проблем с шириной при условии, что нет строк с одним item
- писать ширину через calc и margin-left auto
- писать margin через calc

Как средствами CSS обеспечить замощение, задавая лишь высоту и ширину элементов, без привязки к layout?

Makaleks, у конкретно masonry есть разные вариации.
Да и аналогичных скриптов не один.
В том числе и с основой на гридах.

Как добавить всплывашку?

sciencefront, мало понятно как это участвует в макете сайта и где там контент и что вообще происходит на самом деле.

Как добавить всплывашку?

sciencefront,

не будет корректно работать для 20, 30 элемента и тд

да, так не будет. Вам нужно конкретно задавать для каждого элемента. Можно через js.

Можно делать итемы разного размера с использованием ключевого слова span. И задавать им, например, padding на свободную площадь. Тогда будет работать и через nth-child.

Как выглядит ваш дизайн, что ему нужна бесконечная сетка с дырками?

Как правильно использовать иконки в React через иконочный шрифт, или просто как svg картинки?

Сейчас нет смысла делать это шрифтом.

Есть спрайты (из symbol) или лучше стеки из svg.
Есть возможность использовать кастомные свойства и маски в bg.

Как сделать чтобы body был как по дефолту?

Можно, но, вероятно, вам не понравится разбираться с z-index для контента.

Альтернативы вижу две, если правильно понимаю вашу цель:
1. Дописать третий, более сложный градиент, прямо в body. Придется расписать все колонки, но это и не так страшно. Особенно если через calc и кастомные.

2. Примешивать сетку (grid_system) к классам типа container, а не оборачивать всё в общую обертку grid_system

Как средствами CSS обеспечить замощение, задавая лишь высоту и ширину элементов, без привязки к layout?

У гридов есть dense.

И есть скрипты типа masonry.

Почему swiper выводит все itemы?

an, что-то я устала...
Пойдите в демки, найдите свой пример, сбейте высоту, посмотрите что будет. И это самая частая причина, почему свайпер не работает.

Возможно, у вас дело в другом, но вы же не делаете песочницу на codepen, вы просто показываете кусок кода, которого недостаточно для выяснения причин.

Как решать самостоятельно: берете весь код из работающей демки и аккуратно адаптируете под свой макет. По шагам. Проверяя в какой момент сломалось.

Да, можно и js дописать, чтобы не нужно было редактировать количество строк и в js и в css, а было бы достаточно поменять в одном месте кастомное свойство. Я именно так поступала в своё время.

Но сначала имеет смысл разобраться с хардкорным вариантом.

Почему чекбокс расширается со другим?

EnGold, хорошо, что разобрались

Почему чекбокс расширается со другим?

EnGold, перечитайте, пожалуйста, мой первый комментарий.
stretch растягивает все дочерние элементы в строке.
Вас это поведение не устраивает.
Значит, нужно поменять stretch на нужное вам значение.

Вы этого не сделали и удивляетесь почему всё происходит как раньше.

Почему чекбокс расширается со другим?

EnGold, я не нашла в вашей песочнице где вы задаете align-items для box.
По умолчанию значение stretch. Вам нужно любое другое подходящее.

Почему swiper выводит все itemы?

an, потому что, скорее всего, у вас заданы неверные стили, а именно высота родителя и/или слайдов.

Почему не работает click на input text поле?

Ivseti, не работает потому что this тут лишнее $('#name-display',this).
Но сейчас вы изменили разметку и поменяли id на классы.
Могло не срабатывать ещё и потому что id дублировались (не помню, не проверяла)

При разметке как сейчас должно быть что-то вроде:

$("input").click(function () {
    $(this).next(".name-display").css({
      display: "block"
    });
  });

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

Или использовать функции самого jQ типа hide, show и т.д.

Почему чекбокс расширается со другим?

EnGold, так далеко хрустальный шарик не работает.

Оформите код с видимой проблемой в песочницу на codepen.io.
И опишите и/или покажите скрином/видео, какого результат хотите добиться.

Почему чекбокс расширается со другим?

EnGold, задать другой, подходящий, align-items не вариант?

Почему swiper выводит все itemы?

an,

но почему все itemы разворачиваются?

Я даже не знаю, что вы имеете в виду под этой фразой.

Почему чекбокс расширается со другим?

Очень "мудро" с вашей стороны не показать стили родителя.
А хрустальный шарик говорит, что родитель либо флекс либо грид у которых align-items: stretch

Почему swiper выводит все itemы?

an, как-то разобраться с дизайнером или высотой в относительных единицах измерения.
Есть пропорции, calc и т.д.

Ведь текст у вас и по дизайну не может быть бесконечным. Ведь слайдер должен весь целиком помещаться в высоту страницы (в свободное от шапки и других деталек место)

Как обрезать углы у блока?

При однотонном фоне углы делаются градиентами, а скругления с помощью border-radius.

Почему swiper выводит все itemы?

Самая частая ошибка в свайпере в несколько рядов - это забытая высота обертки и/или детей.