Как объединить ячейки в css grid?

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

Как объединить ячейки в css grid?

Я не могу понять для чего у вас для пятого айтема высота ноль задана

Просто для примера

Проверил ваше решение. Если для .item-1 задать высоту в 150px, то в правой колонке появится отступ. https://jsfiddle.net/4kg13mr6/

Как рассчитывается высота flex-элементов?

Но если в моем втором примере оно не работает, то результат должен быть идентичным первому примеру.

Как в vue использовать результаты с computed в data?

Владимир, подскажите, как это правильно сделать? Я использовал вариант, предложенный 0xD34F, и следуя вашему совету создал метод calculateMargin, но что-то делаю не так - в этом месте результат функции calc не доступен https://jsfiddle.net/2v1a9c7j/

Почему для input резервируется место?

У меня в примере в поля нету атрибутов.
Даже если браузер по умолчанию задает какую-то ширину, вопрос в другом - почему для поля шириной 20px резервируется столько пустого места?

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

Зачем грузить скрипт, который будет грузить другие скрипты

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

setTimeout(function(){
 $.getScript('https://vk.com/js/api/openapi.js', function(){
 VK.Widgets.Comments("vk_comments", {limit: 10, width: "", attach: "*", autoPublish: 1});
 });
 }, 5000);

Lazysizes позволит загружать скрипт апи только после прокрутки к виджету, а не через фиксированные 5сек. Проблема в том, как отследить окончание загрузки и вызвать VK.Widgets.Comments

Как клонировать html-код для последующей вставки?

не экономьте на спичках.

Дело не в экономии, хочу понять как это реализовать лучшим способом.

Ваш последний вариант мне нравится, спасибо!

Как клонировать html-код для последующей вставки?

https://jsfiddle.net/copq608z/1/
В таком виде все работает, но выглядит как говнокод

Как клонировать html-код для последующей вставки?

А зачем экзотический метод one в вашем коде? :)

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

Если хотите много templateS , то клонируйте их каждый раз.

Так в том и смысл - я хочу сделать так, чтобы элемент клонировался только один раз, потому что финальный результат каждый раз один и тот же.
То есть я хочу получить вот такой результат https://jsfiddle.net/copq608z/, но при этом чтобы код для переменной template брался с html-кода, плюс его нужно немного изменить перед вставкой.

Как в БЭМ обнулять браузерные стили, правильно создавать модификаторы, независимые блоки?

1) Но ведь если написать так

.sidebar__button {margin: 10px}
.button {margin:0}
<button class="sidebar__button button">

то отступ не появится из-за того, что мы для БЭМ-блока задали внешнюю геометрию (пусть и нулевую). Из-за этого нам либо нужно держать в голове, что у этого блока обнуляется отступ и использовать для него обертку, а не микс. Либо соблюдать порядок стилей (обязательно использовать сборщик, БЭМ-стек)

3) А как насчет адаптива?
Например, у меня есть форма с полем и кнопкой, которые выводятся в ряд или колонку в зависимости от ширины блока (пусть родителем будет .content), в котором они находятся на момент разработки шаблона.

.form {
	display: flex;
	flex-direction: column;
}
@media (min-width: 768px) {
	.form {
		flex-direction: row;
	}
}

Если в теории в будущем я захочу поместить этот блок в узкий .sidebar, то мне придется для него прописывать другие media-запросы. Должен ли я это изначально учитывать, прописывая media-запросы основываясь на текущем местоположении блока:

.content__form {
	display: flex;
	flex-direction: column;
}
@media (min-width: 768px) {
	.content__form {
		flex-direction: row;
	}
}