SOURCE

console 命令行工具 X clear

                    
>
console
<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<script>

</script>
.box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  align-items: end;  /* 类似侧轴 end 跟flex一样*/
  
  
  min-height: 300px;
  background-color: rgba(0, 0, 0, .1)
}

.box > div {
  width: 100px;
  /* height: 100px; */
}

.box > div:nth-child(odd){
  background-color: rgba(13,143,123, .3)
}

.box > div:nth-child(even){
  background-color: rgba(123,14,123, .3)
}

.box > div:nth-child(3) {
  align-self: start; /* 更flex一样 */
}

.box > div:nth-child(2) {
  align-self: center; /* 更flex一样 */
}

.box > div:nth-child(1) {
  align-self: stretch; /* 更flex一样 */
}