<!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; }
.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; }
.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; }
.min-box1 { grid-area: 1 / 1 / 2 / 2; }
.min-box2 { grid-area: 1 / 2 / 2 / 3; }
.min-box3 { grid-area: 1 / 3 / 2 / 4; }
.min-box4 { grid-area: 2 / 1 / 3 / 2; }
.min-box5 { grid-area: 2 / 2 / 3 / 3; }
.min-box6 { grid-area: 2 / 3 / 3 / 4; }
.max-box1 { grid-area: 1 / 1 / 2 / 2; }
.max-box2 { grid-area: 1 / 2 / 2 / 3; }
.max-box3 { grid-area: 1 / 3 / 2 / 4; }
.max-box4 { grid-area: 2 / 1 / 3 / 2; }
.max-box5 { grid-area: 2 / 2 / 3 / 3; }
.max-box6 { grid-area: 2 / 3 / 3 / 4; }
.grid-container {