/* 共通のスタイル */
.container {
  color: #fff;
  font-size: 4em;
  font-weight: bold;
  text-align: center;
  line-height: 3;
}

.item1 {
  background-color: #aadddd;
}
.item2 {
  background-color: #99ddff;
}
.item3 {
  background-color: #aaddaa;
}
.item4 {
  background-color: #aabbee;
}
.item5 {
  background-color: #ffbbbb;
}
.item6 {
  background-color: #ffbbdd;
}

/* grid対応ブラウザ用のスタイル */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50% 50%;
    gap: 10px;
  }
}

/* grid非対応ブラウザ用のスタイル */
@supports not (display: grid) {
  .container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: -10px;
  }
  .container__item {
    width: calc((100% - 20px) / 3);
    height: 200px;
    margin-top: 10px;
  }
}