Примеры колонок с css grid

Пример 1

3 колонки на всю ширину

.grid-example-1 {
	grid-template-columns: repeat(3, 1fr);
	margin: 30px auto;
	grid-gap: 10px;
	display: grid;
}

Пример 2

3 колонки от 0 до 400px

.grid-example-2 {
	grid-template-columns: repeat(3, minmax(0, 400px));
	justify-content: space-between;
	margin: 30px auto;
	grid-gap: 10px;
	display: grid;
}

Пример 3

Автоматическое количество колонок не уже 300px

.grid-example-3 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	margin: 30px auto;
	grid-gap: 10px;
	display: grid;
}

Пример 4

Жадные ячейки (как rowspan и colspan в таблицах)

.grid-example-4 {
	grid-template-columns: repeat(3, 93px);
	grid-auto-rows: minmax(93px, auto);
	margin: 30px auto;
	grid-gap: 10px;
	display: grid;
}
.col-span-2 {
	grid-column: span 2;
}
.row-span-2 {
	grid-row: span 2;
}

Пример 5

Меняем направление потока

.grid-example-5 {
	grid-template-rows: repeat(3, 1fr);
	grid-auto-flow: column;
	margin: 30px auto;
	grid-gap: 10px;
	display: grid;
}