这篇文章重点介绍了几行功能强大的 CSS 代码，它们可以帮助您构建稳健的现代布局。
借助现代 CSS 布局，开发者只需按几下键盘，即可编写真正有意义且稳健的样式规则。上述讲座和这篇后续博文探讨了 10 行功能强大的 CSS 代码，它们可以完成一些非常繁重的工作。
如需自行体验这些演示，请查看上面的网站嵌入内容，或访问 1linelayouts.com。
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% 处获得 minmax 的 150px，而第二项（本例中为 main 部分）则占据剩余空间，作为单个 1fr 轨道。
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake Stack：grid-template-rows: auto 1fr auto
与“解构式煎饼”示例不同，此示例不会在屏幕尺寸发生变化时换行显示其子项。这种布局通常称为粘性页脚，常用于网站和应用，包括移动应用（页脚通常是工具栏）和网站（单页应用通常使用这种全局布局）。
向组件添加 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); 为网格模板列提供 12 列，每列的宽度为 1fr。
.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（重复、自动、最小最大）：grid-template-columns(auto-fit, minmax(<base>, 1fr))
对于此第七个示例，请结合您已学到的一些概念来创建具有自动放置且灵活的子元素的自适应布局。非常简洁。这里需要记住的关键术语是 repeat、auto-(fit|fill) 和 minmax()'，您可以通过首字母缩写词 RAM 来记住它们。
总而言之，它看起来像这样：
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
您再次使用了 repeat，但这次使用的是 auto-fit 关键字，而不是明确的数值。这样便可自动放置这些子元素。这些子元素的最小基本值为 150px，最大值为 1fr，这意味着在较小的屏幕上，它们将占据整个 1fr 宽度；当每个子元素的宽度达到 150px 时，它们将开始排列在同一行上。
使用 auto-fit 后，当框的水平尺寸超过 150 像素时，框会拉伸以填充整个剩余空间。不过，如果您将此值更改为 auto-fill，则当 minmax 函数中的基本大小被超出时，它们不会拉伸：
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Line Up：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% 大于 46ch（在较宽的视口中）或小于 23ch（在较窄的视口中）之前，始终保持 50% 的宽度。您可以看到，随着我拉伸和缩小父元素的大小，此卡片的宽度会增加到其钳制的最大点，并减小到其钳制的最小值。由于我们应用了其他属性来使其居中，因此它随后会一直位于父级容器的中心。这样一来，文字就不会过宽（超过 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 属性后，当我调整卡片大小时，绿色视觉块会保持 16x9 的宽高比。我们使用 aspect-ratio: 16 / 9 来保持宽高比。
.video {
aspect-ratio: 16 / 9;
}
如果不使用此属性，您需要使用 padding-top 变通方法并为其提供 56.25% 的边衬区，以设置顶部到宽度的比率，从而保持 16x9 的宽高比。我们很快就会提供一个属性来解决此问题，避免使用这种变通方法，也无需计算百分比。您可以制作宽高比为 1 / 1 的正方形、宽高比为 2:1 的 2 / 1，实际上，只要能让此图片按设定的尺寸比例缩放，您就可以制作任何需要的形状。
.square {
aspect-ratio: 1 / 1;
}
虽然此功能仍在开发中，但它解决了许多开发者面临的难题（我自己也多次遇到过），尤其是在处理视频和 iframe 时，因此值得了解。