Better

Ethan的博客,欢迎访问交流

CSS layout digest

如何用一行 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>

来源



留言