Checkered pattern

by hondana

HTML

<div class="container" style="--items: 3">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: repeat(var(--items), min(calc(100vh/var(--items)), calc(100vw/var(--items))));
  grid-template-rows: repeat(var(--items), min(calc(100vh/var(--items)), calc(100vw/var(--items))));
  align-content: center;
  justify-content: center;
}
.item {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.item:nth-child(odd) {
  background-color: pink;
}
.item:nth-child(even) {
  background-color: seagreen;
}