CSS Grid. Grid area на примере белорусского орнамента

Вспомните школьную тетрадь в клеточку. Клетка может быть большой или маленькой. Вы можете закрашивать любые клетки или записывать в них цифры. Также можно понимать использование grid area. Только высоту и ширину клетки задаете вы.

Для орнамента зададим сетку с высотой и шириной ячеек 20px.

.container {
  display: grid;
  grid-auto-rows: 20px;
  grid-auto-columns: 20px;
}

Закрашиваем нужные ячейки в сетке, чтобы получить орнамент женщины. Для этого создадим дочерние элементы в нашей сетке. Каждый элемент будет закрашенной клеточкой, расположенной на определенной позиции. Эта позиция будет задана через свойство grid-area. Каждый элемент будет закрашенной клеточкой, расположенной в определенной позиции. Эта позиция будет задана через свойство grid-area.

CSS Grid. Grid area на примере белорусского орнамента