<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid-template-auto</title>
  </head>
  <body>
    <div class="main">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
      <div class="item item-10">10</div>
    </div>
  </body>
</html>
.main {
  display: grid;
  /* auto 自适应宽度 */
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 100px 100px 100px 100px;
}
.item {
  font-size: 2rem;
  color: whitesmoke;
}
.item-1 {
  background-color: #ec5d3d;
}
.item-2 {
  background-color: #f1a145;
}
.item-3 {
  background-color: #64a256;
}
.item-4 {
  background-color: #3478c6;
}
.item-5 {
  background-color: #c18eb5;
}
.item-6 {
  background-color: #f6daab;
}
.item-7 {
  background-color: #beb08c;
}
.item-8 {
  background-color: #d7e3b5;
}
.item-9 {
  background-color: #6ec2ec;
}
.item-10 {
  background-color: #e84f70;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.