body {
  background: #57b0b1;
  font-family: Arial, Verdana, Helvetica, sans-serif;
}
.but {
width: 100px;
height: 100px;
font-size: x-large;
margin-bottom: 7px;
border-radius: 50%;
}
.grid {
display: grid;
grid-template-rows: 300px 300px 300px auto auto;
grid-template-columns: 300px 300px 300px auto auto;
}
#knopf {
grid-column: 4 / 4;
grid-row: 2 / 2;
margin-left: 10px;
}
#feld0 {
width: 300px;
height: 300px;
grid-column: 1 / 1;
grid-row: 1 / 1;
}
#feld1 {
width: 300px;
height: 300px;
grid-column: 2 / 2;
grid-row: 1 / 1;
}
#feld2 {
width: 300px;
height: 300px;
grid-column: 3 / 3;
grid-row: 1 / 1;
}
#feld3 {
width: 300px;
height: 300px;
grid-column: 1 / 1;
grid-row: 2 / 2;
}
#feld4 {
width: 300px;
height: 300px;
grid-column: 2 / 2;
grid-row: 2 / 2;
}
#feld5 {
width: 300px;
height: 300px;
grid-column: 3 / 3;
grid-row: 2 / 2;
}
#feld6 {
width: 300px;
height: 300px;
grid-column: 1 / 1;
grid-row: 3 / 3;
}
#feld7 {
width: 300px;
height: 300px;
grid-column: 2 / 2;
grid-row: 3 / 3;
}
#feld8 {
width: 300px;
height: 300px;
grid-column: 3 / 3;
grid-row: 3 / 3;
}