这篇博文重点介绍了一些功能强大的 CSS 代码行，这些代码可以完成很多繁琐的工作，帮助您构建强大的现代布局。
现代 CSS 布局让开发者只需按几下按键，即可编写出真正有意义且稳健的样式规则。上面谈论的以及后续的一篇博文探讨了 10 行功能强大的 CSS 代码，它们的作用是非常繁重。
要自行了解或体验这些演示，请查看上面的 Glitch 嵌入内容，或访问 1linelayouts.glitch.me。
01. 超级居中：place-items: center
对于第一个“单行”布局，我们要解决所有 CSS 领域中最大的谜团：居中。我想告诉你，place-items: center 比你想象的更简单。
首先将 grid 指定为 display 方法，然后在同一元素上写入 place-items: center。place-items 是一种简写形式，用于同时设置 align-items 和 justify-items。如果将其设置为 center，align-items 和 justify-items 都会设置为 center。
.parent {
display: grid;
place-items: center;
}
这样，无论固有大小如何，内容都可以完全居中放置。
02. 解构松饼：flex: <grow> <shrink> <baseWidth>
接下来，我们有解构的煎饼！例如，这是营销网站常用的布局，网站可能有 3 件商品，通常包含图片、商品名，然后是一些文字，描述商品的某些功能。在移动设备上，我们希望这些元素能够很好地堆叠，并随着屏幕尺寸的扩大而扩展。
通过使用 Flexbox 实现此效果，您无需媒体查询在屏幕大小调整时调整这些元素的位置。
flex 简写形式表示 flex: <flex-grow> <flex-shrink> <flex-basis>。
因此，如果您希望方框填满其 <flex-basis> 尺寸，请缩小尺寸，但不进行 拉伸 以填充任何其他空间，请输入：flex: 0 1 <flex-basis>。在本例中，您的 <flex-basis> 为 150px，如下所示：
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
如果您希望框在换行时能够拉伸并填充空间，请将 <flex-grow> 设置为 1，代码如下所示：
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
现在，当您增加或缩小屏幕尺寸时，这些 Flex 项目会同时缩小和放大。
03. 边栏显示：grid-template-columns: minmax(<min>, <max>) …)
此演示利用了网格布局的 minmax 函数。我们要在此处将最小边栏大小设置为 150px，但在较大的屏幕上，允许其拉伸至 25%。边栏将始终占据其父级的 25% 的水平空间，直到 25% 小于 150px。
将此列添加为 grid-template-columns 的值，其中包含以下值：minmax(150px, 25%) 1fr。第一列（本例中为边栏）中的项在 25% 处获得 150px 的 minmax，第二项（此处为 main 部分）作为单个 1fr 轨道占据剩余空间。
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake Stack：grid-template-rows: auto 1fr auto
与解构 Pancake 不同，此示例不会在屏幕尺寸发生变化时封装其子项。此布局通常称为“粘性页脚”，通常用于网站和应用、移动应用（页脚通常是工具栏）和网站（单页应用通常使用此全局布局）。
向组件添加 display: grid 后，系统将生成单列网格，但主区域的高度将与下方带有页脚的内容一样高。
如需固定页脚，请添加：
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
这会将页眉和页脚内容设置为自动采用其子级的大小，并将剩余空间 (1fr) 应用于主区域，而大小为 auto 的行将采用其子级内容最小内容的大小，因此随着内容大小的增加，该行本身也会随之扩展。
05. 经典圣杯布局：grid-template: auto 1fr auto / auto 1fr auto
这个经典的圣杯布局包含一个页眉、页脚、左边栏、右边栏和主要内容。该布局与之前的布局类似，但现在增加了边栏！
如需使用单行代码编写整个网格，请使用 grid-template 属性。这样，您就可以同时设置行和列。
“属性/值”对为：grid-template: auto 1fr auto / auto 1fr auto。第一个和第二个以空格分隔的列表之间的斜杠是行与列之间的换行符。
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
在上一个示例中，页眉和页脚具有自动调整大小的内容，这里的左侧和右侧边栏会根据子项的固有尺寸自动调整大小。不过，这次使用横向尺寸（宽度）而非纵向尺寸（高度）。
06. 12 跨度网格：grid-template-columns: repeat(12, 1fr)
接下来，我们要设计另一个经典的 12 跨度网格。您可以使用 repeat() 函数在 CSS 中快速编写网格。如果将 repeat(12, 1fr); 用于网格模板列，每个 1fr 列都会有 12 列。
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
现在，您有了一个 12 列的轨迹网格，我们可以将子级放置在网格上了。一种方式是使用网格线放置它们。例如，grid-column: 1 / 13 将从第一行到最后一行（第 13 行）跨越 12 列。grid-column: 1 / 5; 会跨越前四项。
另一种编写方法是使用 span 关键字。使用 span 时，您可以设置起始行，然后设置从该起点跨入多少列。在本例中，grid-column: 1 / span 12 相当于 grid-column: 1 / 13，grid-column: 2 / span 6 相当于 grid-column: 2 / 8。
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM（重复、自动、MinMax）：grid-template-columns(auto-fit, minmax(<base>, 1fr))
对于第 7 个示例，请结合您学习过的一些概念，创建包含自动放置和灵活子项的自适应布局。非常简洁。这里要记住的关键术语是 repeat、auto-(fit|fill) 和 minmax()'，这三个术语是 RAM 的首字母缩写。
总体而言，它如下所示：
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
您再次使用重复，但这次使用的是 auto-fit 关键字，而不是明确的数值。这样可以自动放置这些子元素。这些子项还具有一个基本最小值 150px，最大值为 1fr，这意味着在较小的屏幕上，它们将占据整个 1fr 宽度，当每个子项的宽度均为 150px 时，它们将开始位于同一行上。
使用 auto-fit 时，这些框会在水平尺寸超过 150px 时拉伸，以填满整个剩余空间。不过，如果将其更改为 auto-fill，当超出 minmax 函数中的基本大小时，它们不会拉伸：
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. 频道组：justify-content: space-between
对于下一个布局，此处要演示的要点是 justify-content: space-between，它会将第一个和最后一个子元素放置在其边界框的边缘，并将剩余空间均匀分布在各元素之间。对于这些卡片，它们会置于 Flexbox 显示模式下，并使用 flex-direction: column 将方向设置为列。
这会将标题、说明和图片区块放置在父卡片内的垂直列中。然后，应用 justify-content: space-between 将第一个（标题）和最后一个（图片区块）元素锚定到 Flexbox 的边缘，并在这两个元素之间以相等的间距放置位于它们之间的描述性文本。
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. 夹紧我的风格：clamp(<min>, <actual>, <max>)
在本文中，我们探讨了一些支持较少浏览器的技术，但对布局和响应式界面设计有一些非常令人兴奋的影响。在本演示中，您将使用 clamp 设置宽度，如下所示：width: clamp(<min>, <actual>, <max>)。
这会设置绝对的最小和最大尺寸以及实际尺寸。指定值后，结果可能如下所示：
.parent {
width: clamp(23ch, 60%, 46ch);
}
此处的大小下限为 23ch 个字符，上限为 23 个字符，上限为 46ch，上限为 46 个字符。字符宽度单位基于元素的字体大小（具体而言，即 0 字形的宽度）。“实际”大小为 50%，表示此元素父项宽度的 50%。
clamp() 函数在此处的作用是让此元素保留 50% 的宽度，直至50% 大于 46ch（在较宽的视口上）或小于 23ch（在较小的视口上）。您可以看到，当我拉伸和缩小父级时，此卡片的宽度会增加到其固定值的最大点，而减少到其固定值下限。然后，它会始终在父级居中，因为我们已应用额外的属性将其居中。这样可以让布局更加清晰可辨，因为文本不会过宽（在 46ch 以上），也不会过于挤压和窄（小于 23ch）。
这也是实现自适应排版的绝佳方式。例如，您可以输入：font-size: clamp(1.5rem, 20vw, 3rem)。在这种情况下，标题的字体大小始终保持在 1.5rem 和 3rem 之间，但会根据 20vw 实际值缩放，以适应视口的宽度。
这是一种通过最小和最大尺寸值确保易读性的绝佳技术，但请注意，它并非在所有现代浏览器中都受支持，因此请确保您有后备广告并进行测试。
10. 尊重方面：aspect-ratio: <width> / <height>
最后，这最后一种布局工具是众多版本中最具实验性的。我们最近在 Chromium 84 中推出了 Chrome Canary 版，Firefox 正积极努力地实现此功能，但目前它并未在任何稳定的浏览器版本中推出。
不过，我还是想提一下这个问题，因为这是经常会遇到的一个问题。这只需要保持图片的宽高比即可。
使用 aspect-ratio 属性时，当我调整卡片大小时，绿色视觉区块会保持这一 16 x 9 的宽高比。我们遵循 aspect-ratio: 16 / 9 的宽高比。
.video {
aspect-ratio: 16 / 9;
}
如需在没有此属性的情况下保持 16 x 9 的宽高比，您需要使用 padding-top 技巧，并为其添加 56.25% 的内边距，以设置顶宽比。我们很快会为此提供一项媒体资源，以避免黑客入侵以及计算百分比的需要。您可以制作宽高比为 1 / 1 的方形，使用 2 / 1 制作宽高比为 2:1 的方形，实际上，只要创建这种图片所需的大小即可按照设定的尺寸比例进行缩放。
.square {
aspect-ratio: 1 / 1;
}
虽然此功能尚未推出，但值得您了解，因为它解决了我本人经常遇到的许多开发者难题，尤其是在视频和 iframe 方面。