SOURCE

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>
<div style="margin-bottom:30px;"></div>
<div class="container1">
  <div>1</div>
  <div>2</div>
</div>

.container {
    width:300ppx;
    height:300px;
  display: grid;
  /* 3列等分 */
  grid-template-columns: 1fr 1fr 1fr; 
   /* 3等分的行高度 */
  grid-template-rows: repeat(3, minmax(100px, auto));
}
 
/* 样式 */
.container > div {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-family: Arial, sans-serif;
}

.container1 {
    width:300ppx;
    height:300px;
  display: grid;
  /* 3列等分 */
  grid-template-columns: 1fr; 
   /* 3等分的行高度 */
  grid-template-rows: repeat(3, minmax(100px, auto));
}
 
/* 样式 */
.container1 > div {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-family: Arial, sans-serif;
}