如何用一行 CSS 实现 10 种现代布局
摘抄
摘抄清单
- 超级居中:
place-items: center
- 煎饼式布局:
flex: <grow> <shrink> <baseWidth>
- 侧边栏布局:
grid-template-columns: minmax(<min>, <max>) …)
- 煎饼堆栈布局:
grid-template-rows: auto 1fr auto
- 经典圣杯布局:
grid-template: auto 1fr auto / auto 1fr auto
这使您可以同时设置行和列。 - 12 跨网格:
grid-template-columns: repeat(12, 1fr)
- RAM (Repeat, Auto, MinMax):
grid-template-columns(auto-fit, minmax(<base>, 1fr))
- 排列布局:
justify-content: space-between
- 保持我的风格:
clamp(<min>, <actual>, <max>)
- 保持宽高比:
aspect-ratio: <width> / <height>