AI 摘要：这篇博文深入探讨如何在纯 CSS 中获取 grid 布局中 auto-fit/auto-fill 自动列的列数，从而实现如高亮首/末列、斑马纹、响应式非矩形网格等复杂交互，无需任何 JavaScript 或媒体查询（breakpoints）。作者提出了通过 container query 单位、CSS 变量和数学函数自动计算列数的方法，并针对不同浏览器支持和 bug（尤其是 Firefox）提出了解决方案，使技巧能够跨浏览器使用。

Frontend Masters

Get the number of auto-fit/auto-fill columns in CSS

Ever wanted to get the number of auto-fit/auto-fill columns in a grid? For example, because you want to highlight just the items in the first or last row or column? Do something special just for even or for odd rows or columns (e.g. zebra striping)? Or for…

AI 摘要：本文探讨了如何使用容器查询来动态调整用户界面组件的布局，根据外部空间的可用性决定将分页箭头放置在组件内还是组件外，详细介绍了利用视口单位和容器查询的实现方法。

1. 引言
• 介绍了分页箭头的两种布局方式：外部和内部，取决于外部空间的可用性。
• 提到此方法由 Adam Argyle 提出，并对此方法进行详细探讨。

2. 实现原理
• 讨论了使用视口单位和容器查询的基本原理。
• 强调了容器查询的优势，即无需预设容器的具体尺寸，布局可以根据外部空间的变化动态调整。

3. 代码示例
• 展示了 HTML 结构，包含一个包装元素和内部元素，以及箭头元素。
• 提供了 CSS 代码，定义了容器的宽度使用 min(500px, 100vw)，确保在不同视口大小下的灵活性。
• 介绍了如何使用 @container 查询来检测容器尺寸，并在满足条件时改变内部元素的样式。

4. 具体应用
• 详细解释了如何使用 calc() 函数计算外部空间是否足够放置箭头。
• 展示了使用 translate 属性移动箭头的 CSS 代码。
• 附上了展示效果的视频，证明方法的有效性。

5. 结论
• 强调了这种方法的灵活性，即容器大小可变，而布局仍能正确响应。
• 提及可以使用自定义属性来进一步提高代码的灵活性。

Frontend Masters

Container Query for “is there enough space outside this element?”

Say you had a UI component that had pagination arrows for whatever reason. If there was enough space on the outside of that component, you wanted to put those arrows outside, like this this:

AI 摘要：本文是一份关于 CSS 容器查询的交互式指南，详细介绍了容器查询的语法、使用场景、常见问题及解决方案，并通过大量实例演示如何利用容器查询实现响应式组件设计，替代传统的媒体查询方法。

1. Introduction to container queries
• 容器查询解决了基于容器宽度（而非视口）调整 UI 的痛点，传统媒体查询在此场景下存在局限性。
• 示例：页面头部操作按钮的标签显示/隐藏逻辑通过容器查询优化。

2. Container query syntax
• 基本语法：通过 container-type 和 container-name 定义容器，使用 @container 规则查询。
• 支持简写：container: name / type。

3. Common pitfalls
• 容器不能依赖内容自动调整大小（需显式设置或通过 Flex/Grid 布局控制）。
• 无法直接查询容器自身的样式（需额外包装元素）。

4. Container query units
• 引入容器相对单位（如 cqw, cqh），实现容器内的流体排版和间距控制。

5. Use cases
• 卡片组件：根据容器宽度切换堆叠/水平布局。
• 仪表盘部件：动态调整 widget 样式以适应不同列宽。
• 时间线组件：窄容器显示垂直布局，宽容器显示水平布局。
• 表单输入：基于容器空间自动调整网格列数。

6. Style queries
• 实验性功能（仅 Chrome/Safari TP 支持），通过查询 CSS 变量（如 --featured: true）切换样式。
• 示例：结合 :has() 选择器控制时间线布局。

7. DevTools 支持
• Chrome 开发者工具可调试容器查询应用的元素。

8. Resources & Related articles
• 推荐了容器查询规范、兼容性检查工具及其他相关文章（如 CSS :has() 指南）。

Outro
容器查询标志着响应式设计的范式转变，未来将逐步替代媒体查询在组件级布局中的应用，但媒体查询仍适用于全局布局。

Ishadeed

An Interactive Guide to CSS Container Queries

Learn how to use CSS container queries today.

AI 摘要：本文探讨了如何通过 CSS 自定义属性和 @property 规则，实现嵌套容器中子元素使用外层容器的容器查询单位（如 cqw）而非默认的最近父容器，从而解决嵌套容器场景下的单位计算问题。

1. 问题背景
• 开发者 Matt Wilcox 指出：当存在嵌套容器时，容器查询单位（如 cqw）默认相对于最近的父容器计算，无法直接指定外层容器作为基准，导致布局设计受限。

2. 技术基础
• 容器查询（Container Queries）和容器单位（Container Units）是 CSS 的新特性，允许元素样式基于容器尺寸动态调整。
• 示例代码展示了嵌套容器（.outer-container 和 .inner-container）的结构，以及子元素 .inner-child 使用 20cqw 时默认相对于 .inner-container 计算的问题。

3. 尝试解决方案
• 失败方案 1：直接为 .inner-child 指定 outer 20cqw 语法无效。
• 失败方案 2：通过 CSS 变量传递 --s: outer 20cqw 同样不被支持。
• 部分成功方案：将变量 --s: 20cqw 定义在 .inner-container 中，但子元素继承时仍基于 .inner-container 计算。

4. 最终解决方案
• 使用 @property 注册自定义属性 --s，强制其继承并保留原始计算值（基于 .outer-container 的 20cqw），从而在子元素中正确应用。
• 代码示例：
@property --s {
syntax: '<length>';
initial-value: 0px;
inherits: true;
}

Frontend Masters

Using Container Query Units Relative to an Outer Container

Recently, Matt Wilcox posted on Mastodon: