Источник: WebForMyself.com При работе с UI мне нужно было добавить разделитель между двумя секциями. Вот так, как показано на изображении ниже в статье. На экранах поменьше разделитель должен становиться горизонтальным: Давайте рассмотрим HTML. У нас есть секция с двумя дочерними элементами, между которых нам необходим разделитель. Для этого я воспользуюсь flexbox. Элементы должны заполнять 50% от родителя. А также я добавил отступ в 1rem между ними. Как это выглядит: Далее я хочу центрировать 2 элемента вертикально...

Часть 1.   CSS Grid Layout  или просто гриды — это удобная технология для раскладки элементов на веб-страницах. В отличие от флексбоксов одновременно работающих только с одним измерением, гриды дают возможность работать одновременно с двумя: горизонталью и вертикалью. Определение. Грид представляет собой пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки. Элементы могут быть помещены в грид в пределах линий этих колонок и строк. Особенности:  Вы можете создать грид с фиксированными размерами полоc, например используя пиксели...