内在设计：由内容驱动的尺寸

内在设计这一术语由 Jen Simmons 提出，指的是让内容决定自身尺寸，而不是强制规定明确的像素尺寸。CSS 提供了内在尺寸关键字，使布局无需依赖断点驱动的覆盖规则，也能自然地适应不同屏幕。

min-content：在不发生溢出的情况下容纳内容所需的最小尺寸（对于文本，会在每个单词边界处换行）。max-content：在不换行的情况下将内容显示在一行中所需的尺寸。二者都反映了内容的实际尺寸。

fit-content 等价于 min(max-content, max(min-content, available))。它会随着内容增长，直到达到可用空间，然后换行。它非常适合按钮和标签：宽度应与文本相适应，但不能超过容器宽度。

网格中的 minmax(min, max) 用于设置网格轨道的最小和最大尺寸。minmax(200px, 1fr) 会创建一个至少为 200px、但可以继续扩展的列。将其与 auto-fill 结合使用，可以创建具有内在响应能力的网格。

二者都会尽可能用网格轨道填满一行。auto-fill 会保留空轨道（保持列数不变）。auto-fit 会折叠空轨道，使已填充的轨道扩展并填满空间。对于应扩展到填满可用宽度的内容驱动布局，请使用 auto-fit。

clamp(min, preferred, max) 会将值限制在指定范围内。font-size: clamp(1rem, 2.5vw, 1.5rem) 会根据视口宽度在 1rem 到 1.5rem 之间缩放，从而无需媒体查询即可实现流式排版。

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) 会创建响应式网格：在非常窄的视口中显示为单列，并在空间允许时自动添加列。无需媒体查询，也无需 JavaScript。

aspect-ratio: 16/9 会使元素在宽度变化时保持其比例。结合 width: 100% 使用时，视频容器会填满其父元素，并始终保持 16:9，无需 JavaScript 或基于百分比内边距的变通方案。

内在设计与 CSS 逻辑属性（inline-size、block-size、margin-inline）相结合，可以创建同时适用于水平和垂直书写模式的布局。内在尺寸会自动适应书写方向。

固定布局：width: 300px——无论内容如何，始终为 300px。内在布局：width: fit-content——宽度与内容相适应，但受约束条件限制。固定布局需要通过断点进行调整；内在布局会根据内容和上下文自行调整。

当内容的尺寸会自然变化时，内在设计最为有效。如果内容的尺寸已知且统一，却强行使用内在尺寸，会增加复杂性而没有实际收益。对于固定的界面框架（导航、工具栏），请使用明确尺寸；对于内容区域，请使用内在尺寸。

在 grid-template-columns 中，auto-fit 与 auto-fill 的区别是什么？

内在设计使用 CSS 尺寸关键字（min-content、max-content、fit-content）、结合 auto-fit 的 minmax()、用于流式缩放的 clamp()，以及 aspect-ratio，根据内容尺寸而不是视口断点来创建布局。这样可以得到更自然的响应式布局，同时减少 CSS 代码和媒体查询。