snap44

примерно так, только с фотошопами всякими еще придется поработать.

Вот это
input:valid~label
Замените на это
input:valid:not(:empty)~label
jsfiddle.net/6ks0gem1/7

Там же всё написано:

элемент divне разрешен как дочерний элемент ul

Тоже самое написано в спецификации

Content model:
Zero or more li and script-supporting elements.

flex-grow странный. Так ли это?

Попробуйте сделать таблицу в таблице. Внешняя таблица - это шапка и столбец + объединенные ячейки, внутри которых вторая таблица с оверфлоу:скролл

Как-то так. С высотой надо додумать что-то

body {display: flex;
	flex-direction: column;
	min-height: 100vh;}
.main {flex: 1;}

Но что-то мне подсказывает что так у вас возникнет еще больше вопросов. Найдите эту книгу

UPD: и забудьте про jquery пока не научитесь верстать.

Судя по последним двум вопросам нас просто троллят

По css-сеткам Sam Hampton-Smith - Pro CSS3 Layout Techniques (The Expert's Voice in Web Development) - 2016
Если не найдете, пишите сюда почту, скину (Внимание! Warning! Attenzione! – книга есть только на английском).

Добавлять не бордер, а псевдоэлемент
https://codepen.io/anon/pen/gjzdyx

https://getinstance.info/articles/css/responsive-t...

какие используются брекпоинты чаще всего

320/480/600/768/1024/1200

И как в итоге получают размеры в rem при вычислениях?

Умножают базовый размер в пикселях на rem.
body {fontsize: 16px;}
h1 {font-size: 1.5 rem} = 16*1.5 = 24px

Как правильно строить такие сетки

Так же, как и фиксированные, только в отоснительных единицах измерения + media

column для текста, а не для сеток. Используйте флоат/инлайн-блок/флексы.

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

Где вы такое услышали? Какая здесь вообще может быть связь?

Похожие решения, допиливать самому придется

1. https://codepen.io/catjuice/pen/QKjKKw?q=stack%20c...
   
2. https://codepen.io/bgabot89/pen/WOzVKR?q=stack%20c...
   
3. https://codepen.io/juliomoreira/pen/psfCl?q=stacke...
   
4. https://codepen.io/Sladix/pen/JbmeQM?q=stacked%20s...
   

то как делать адаптивную верстку?

flexbox + media-queries
Для тех макетов, которые вас ждут в ближайшем будущем, подойдет и бутстрап. Но сначала нужно научиться верстать без него.
Попробуйте еще gridly.css Ничего лишнего, только normalize + сетка.

Как много слов длинной 104 символа вы знаете?

Мастер заголовков Х) даже язвить не стану)