Enable CSS Grid Layout (https://igalia.github.io/css-grid-layout/enable.html)
Browser Support for CSS Grid Layout (http://gridbyexample.com/browsers/)
Dev guide: Grid layout - Microsoft Edge Development (https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/css/grid-layout/)
Золотая рыбка CSS3 Grid Layout (http://css-live.ru/css/zolotaya-rybka-css3-grid-layout.html)
layout.css.grid.enabled
https://youtu.be/Mff-bwBDxWM
CSS Flex
http://flexboxfroggy.com
justify-contentЭто CSS свойство выравнивает элементы горизонтально и принимает следующие значения:
flex-start: Элементы выравниваются по левой стороне контейнера.
flex-end: Элементы выравниваются по правой стороне контейнера.
center: Элементы выравниваются по центру контейнера.
space-between: Элементы отображаются с одинаковыми отступами между ними.
space-around: Элементы отображаются с одинаковыми отступами вокруг них.
align-itemsЭто CSS свойство выравнивает элементы вертикально и принимает следующие значения:
flex-start: Элементы выравниваются по верхнему краю контейнера.
flex-end: Элементы выравниваются по нижнему краю контейнера.
center: Элементы выравниваются вертикально по центру контейнера.
baseline: Элементы отображаются на базовой линии контейнера.
stretch: Элементы растягиваются, чтоб заполнить контейнер.
flex-directionЭто CSS свойство задает направление, в котором будут расположены элементы в контейнере и принимает следующие значения:
row: Элементы размещаются по направлению текста.
row-reverse: Элементы отображаются в обратном порядке к направлению текста.
column: Элементы распологаются сверху вниз.
column-reverse: Элементы распологаются снизу вверх.
flex-wrapЭто CSS свойство принимает следующие значения:
nowrap: Размеры элементов устанавливаются автоматически, чтоб они поместились в один ряд.
wrap: Элементы автоматически переносятся на новую строку.
wrap-reverse: Элементы автоматически переносятся на новую строку, но строки расположены в обратном порядке.
align-contentкак несколько рядов должны отделяться друг от друга.
Данное свойство принимает следующие значения:
flex-start: Ряды группируются в верхней части контейнера.
flex-end: Ряды группируются в нижней части контейнера.
center: Ряды группируются вертикально по центру контейнера.
space-between: Ряды отображаются с одинаковыми расстояниями между ними.
space-around: Ряды отображаются с одинаковыми расстояниями вокруг них.
stretch: Ряды растягиваются, чтоб заполнить контейнер равномерно.
justify-content: center;
align-items: center;
flex-direction: column-reverse;
order: ;
align-self: ;
flex-wrap: wrap-reverse;
flex-flow: ;
align-content: space-between;