<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.box1 { grid-area: 1 / 1 / 2 / 2; }
.box2 { grid-area: 1 / 2 / 2 / 3; }
.box3 { grid-area: 1 / 3 / 2 / 4; }
.box4 { grid-area: 2 / 1 / 3 / 2; }
.box5 { grid-area: 2 / 2 / 3 / 3; }
.box6 { grid-area: 2 / 3 / 3 / 4; }
.black-box1 { grid-area: 1 / 1 / 2 / 2; }
.black-box2 { grid-area: 1 / 2 / 2 / 3; }
.black-box3 { grid-area: 1 / 3 / 2 / 4; }
.black-box4 { grid-area: 2 / 1 / 3 / 2; }
.black-box5 { grid-area: 2 / 2 / 3 / 3; }
.black-box6 { grid-area: 2 / 3 / 3 / 4; }
.grey-box1 { grid-area: 1 / 1 / 2 / 2; }
.grey-box2 { grid-area: 1 / 2 / 2 / 3; }
.grey-box3 { grid-area: 1 / 3 / 2 / 4; }
.grey-box4 { grid-area: 2 / 1 / 3 / 2; }
.grey-box5 { grid-area: 2 / 2 / 3 / 3; }
.grey-box6 { grid-area: 2 / 3 / 3 / 4; }
.white-box1 { grid-area: 1 / 1 / 2 / 2; }
.white-box2 { grid-area: 1 / 2 / 2 / 3; }
.white-box3 { grid-area: 1 / 3 / 2 / 4; }
.white-box4 { grid-area: 2 / 1 / 3 / 2; }
.white-box5 { grid-area: 2 / 2 / 3 / 3; }
.white-box6 { grid-area: 2 / 3 / 3 / 4; }
.auto-box1 { grid-area: 1 / 1 / 2 / 2; }
.auto-box2 { grid-area: 1 / 2 / 2 / 3; }
.auto-box3 { grid-area: 1 / 3 / 2 / 4; }
.auto-box4 { grid-area: 2 / 1 / 3 / 2; }
.auto-box5 { grid-area: 2 / 2 / 3 / 3; }
.auto-box6 { grid-area: 2 / 3 / 3 / 4; }
.grid-container {