CSS网格中的可扩展部分

CSS网格是使用最小代码创建响应式布局的绝佳工具，通常会消除对媒体查询的需求。我很乐意将其用于各种布局，优先考虑干净的HTML。但是，最近的一个UI挑战提出了一个独特的问题：在单击按钮时将网格单元扩展到完全宽度，同时保持原始的网格结构和响应能力。

要求是扩展的细胞：

1. 出现在触发单元格的正下方。
2. 占据完整的网格宽度。

该解决方案令人惊讶地优雅，仅使用了几行CSS网格。本文详细介绍了三种简单的CSS网格技术，可以在没有JavaScript的情况下实现此目的。

问题：可扩展的产品卡

这是UI任务的简化示例：我们的Storybook组件库具有产品卡网格。每张卡都需要一个“快速查看”按钮，以揭示带有详细产品信息的更大的全宽卡。这种扩展必须：

• 动态插入点击卡下方的全宽卡。
• 保留原始的DOM顺序和视觉网格布置。
• 在浏览器调整大小上保持完全响应。

最初，我认为重新定位卡是必要的。在线搜索“快速查看”实现主要产生模式或覆盖解决方案。模式对于集中内容很常见，但是我想要一个解决方案，该解决方案在网格中无缝集成。

该解决方案来自结合几个功能强大的CSS网格功能。

CSS网格技巧1：自动拟合列

我现有的网格系统已经利用了此技术：

 。网格 {
  显示：网格；
  差距：1REM；
  网格板柱：重复（自动拟合，20REM）；
}

grid-template-columns: repeat(auto-fit, 20rem);创建列（此处20REM宽），该列会自动调整为可用空间，并根据需要包裹到新行。萨拉·索伊丹（Sara Soueidan）对auto-fit与auto-fill的解释非常出色。为简单起见，我使用了固定的列宽度。

CSS网格技巧2：全宽跨度

为了容纳扩展的卡：

 .fullwidth {
  网格列：1 / -1；
}

由于技巧1创建一个明确的网格， grid-column: 1 / -1;跨越整个宽度（从第1列到最后一列）。

但是，这留下了全宽卡上方的缝隙。

CSS网格技巧＃3：密集包装

填补这些空白采用人造饰面方法：

 。网格 {
  Grid-auto-flow：密集；
}

grid-auto-flow: dense;优化自动置换，在网格早期填充空白。当：

• 所有列具有相同的宽度（或使用minmax()进行柔性宽度）。
• 一排中的所有单元格都具有相同的高度（默认； align-items: stretch隐式使单元格填充行高度）。

原始DOM订单是保留的，对于可访问性至关重要。 MDN提供了CSS电网自动置换的全面解释。

完整的解决方案

这三种技术创建了一个简单，高效的布局，使用最小的CSS，无媒体查询，并且没有用于布局计算的JavaScript。

JavaScript的角色

JavaScript仍然是必要的，但仅用于功能：管理点击事件，聚焦并显示注入的卡。在原型中，全宽卡是硬编码的。 JavaScript切换其可见性。

在生产环境中，该卡可能会动态获取并插入。为了避免腹胀，应将注入的内容视为渐进式增强。如果JavaScript失败，则将用户重定向到产品详细信息页面。

可访问性注意事项

优先考虑语义HTML，ARIA属性和键盘导航：

• 网格使用<ul>出于语义清晰。</ul>
• 产品卡是<li>具有正确标题的元素。</li> <li>自然标签订单保留DOM订单。</li> <li>聚焦管理确保正确的键盘导航。 （进一步的改进可以包括注射卡的明确标签， <kbd>cess</kbd>键绑定以关闭以及滚动滚动以确保可见性）。</li>

结论

这种方法为模态提供了一种干净的替代方法，可以揭示其他内容而不遮盖页面。它对于各种情况（例如图像标题或辅助文本）可能很有用，可能会替换<details>/<summary></summary></details>在某些情况下。我渴望听到您的想法和替代方法。

以上是CSS网格中的可扩展部分的详细内容。更多信息请关注PHP中文网其他相关文章！