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

Пример 1

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

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

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

Ячейка 5

Пример 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;
}

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

Ячейка 5

Пример 3

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

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

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

Ячейка 5

Ячейка 6

Ячейка 7

Пример 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;
}

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

Ячейка 5

Пример 5

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

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

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

Ячейка 5

Ячейка 6

Ячейка 7

Ячейка 8

Ячейка 9

Ячейка 10