CSS--五种经典布局

// html
<div class="container">
  <div class="item">1</div>
</div>

// CSS
.container {
  display: grid;
  place-items: center;　　　　// 是简写： place-items：<align-items>垂直位置  <justify-items>水平位置
  
  background: lightblue;
  width: 600px;
  height: 600px; 
}
.item {
  border: 1px solid;
  border-radius: 8px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 2rem;
  color: #fff;
}

.container {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
}