这里，我们介绍一些只有少数浏览器支持的技术，但这些技术对布局和响应式 UI 设计有非常令人兴奋的影响。在本演示中，您将使用固定工具设置宽度，如下所示：width: clamp(<min>, <actual>, <max>) 。
分类 Web前端 下的文章
一行CSS实现 排列布局：justify-content: space-between
对于下一个布局，这里要主要说明的是 justify-content: space-between ，它将第一个和最后一个子元素放置在其边界框的边缘，其余空间均匀分布在元素之间。对于这些卡片，它们被放置在 Flexbox 显示模式中，使用 flex-direction: column 将方向设置为 column。
一行CSS实现 RAM (Repeat, Auto, MinMax): grid-template-columns
对于这第七个示例，结合您已经了解的一些概念来创建具有自动放置且灵活的子项的响应式布局。漂亮整齐。这里要记住的关键点是 repeat 、 auto-(fit|fill) 和 minmax()' ，可以记住它们的首字母缩写词 RAM。
一行CSS实现 12 跨网格：grid-template-columns: repeat(12, 1fr)
接下来我们有另一个经典布局：12 跨网格。您可以使用 repeat() 函数在 CSS 中快速编写网格。对网格模板列使用 repeat(12, 1fr); 将为每个 1fr 提供 12 列。
一行CSS实现 经典圣杯布局：grid-template: auto 1fr auto / auto 1fr auto
对于经典的圣杯布局，有页眉、页脚、左侧边栏、右侧边栏和主要内容。类似于以前的布局，但现在有侧边栏！
要使用一行代码编写整个网格，请使用 grid-template 属性。这使您可以同时设置行和列。