css实现现代布局

 超级居中：place-items: center

首先指定 grid 作为 display 方法，然后在同一个元素上写入 place-items: center。place-items 是同时设置 align-items 和 justify-items 的快速方法。通过将其设置为 center ， align-items 和 justify-items 都将设置为 center。

.box{
  display: grid;
  place-items: center;
}

这使得内容能够在父级内完美居中，而不管内部大小。

解构煎饼式布局：flex: <grow> <shrink> <baseWidth>

能够很好地堆叠，并随着我们增加屏幕尺寸而扩展

.box {
  display: flex;
}

.son {
  flex: 0 1 150px;
}

侧边栏布局：grid-template-columns: minmax(<min>, <max>) …)

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

圣杯布局：grid-template: auto 1fr auto / auto 1fr auto

.box {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

保持宽高比：aspect-ratio: <width> / <height>

使用 aspect-ratio 属性，当调整卡片大小时，盒子保持 16 x 9 的宽高比。通过 aspect-ratio: 16 / 9 保持此宽高比

.obx {
  aspect-ratio: 16 / 9;
}