CSS grid новая реальность

Начинаем включать css grid блоки параллельно с flex и другими прелестями.

Неплохо-бы использовать некоторую защиту


..... /* для тех браузеров , которые не понимают flex и  grid */

@supports (display: flex){
...
}
@supports (display: grid) { 
....
}

Одно важное отличие auto-fit от auto-fill


.g_jsCent{
	justify-self: center;
}
.grid2{
	display : grid;
	grid-template-columns: repeat( auto-fit, minmax(360px, 1fr));
	grid-auto-rows: minmax(200px, 1fr);
}

justify-self: center; заставляет выравниваться по центру элементы в grid, если их 1 (или общее количество элементов заметно меньше ширины экрана).

Если использовать auto-fill, то элементы грида прижиматься будут только влево.