标签：Grid

共 8 篇相关文章

IT 累计浏览 61

Fixed-Height Cards: More Fragile Than They Look

固定高度卡片看似能保证视觉对齐，实则依赖内容始终适配预设尺寸的脆弱假设。当遇到多语言翻译、字体缩放或内容变化时，固定容器与动态内容会产生冲突，导致布局破裂或内容溢出。作者通过博客组件实例指出，单纯依赖 `overflow: hidden` 和行截断（如 `-webkit-line-clamp`）只是掩盖了结构性张力。解决方案的关键在于移除三重约束：取消固定高度、避免绝对定位用于布局、停止强制截断内容。通过使用 CSS Grid 的自动行高对齐（`align-items: stretch`）替代固定高度，配合 Flexbox 构建卡片内部流式布局（如 `flex: 1` 让内容区自适应填充），可使组件自然响应内容变化。同时，采用 `clamp()` 函数实现流式字体大小，增强跨视口适配能力。文章强调，健壮的布局应基于内容驱动而非预设限制。通过模拟压力测试（如极端文本、字体放大、图片缺失）可提前暴露脆弱性。最终，从“预测内容”转向“适应内容”的结构性调整，使组件能在多变场景下保持稳定，无需依赖防御性隐藏规则。

IT 累计浏览 50

Making Zigzag CSS Layouts With a Grid + Transform Trick

本文讲解如何使用CSS Grid和Transform属性创建锯齿状布局。首先分析Flexbox方案的缺陷：需要固定容器高度且破坏标签顺序。转而采用两列网格布局，并通过nth-child选择器对偶数项应用translateY(50%)实现交错下移。关键点在于CSS Transform的百分比计算基于元素自身尺寸而非父容器，因此偏移量能自适应元素高度。针对网格间距问题，计算偏移量时需加入一半间距值以对齐行间隙。为解决Transform不改变布局导致的容器溢出，需根据元素高度和间距为容器预留底部内边距。该方案保持源顺序与视觉顺序一致，有利于可访问性，且动画效果需兼容偏好减弱动效的用户。最终布局通过网格结构、Transform偏移和底部填充三个技术点组合实现。

IT 累计浏览 50

The State of CSS Centering in 2026

本文深入探讨了2026年CSS居中的现状，指出尽管看似简单，但居中问题因属性和布局方式众多而常令人困惑。作者统计发现虽有近100种理论方法，但多数不推荐，真正有效且独特的方式不足15种。文章核心观点是，居中本质是CSS对齐这一复杂主题的特例，关键在于理解不同布局（如Flexbox、Grid、普通流）下对齐逻辑的根本差异，而非机械复制代码。作者强调，应根据具体场景选择合适方法，并批判了依赖绝对定位加变换（`translate`）等过时技巧。文章重点介绍了多项现代CSS特性：`text-box`属性可精确控制文本的垂直对齐，解决传统行高带来的视觉偏差；`anchor-center`值为锚点定位提供了新的居中基准，允许元素相对于锚点自身中心进行对齐，与传统的区域中心（`center`）形成区别。结论是，通过掌握对齐原理和运用新特性，开发者能更精准、高效地实现居中，应对单元素或多元素等复杂布局需求。

IT 累计浏览 46

CSS reading-flow和reading-order属性简介

阅读流（reading-flow）和阅读顺序（reading-order）是两项用于改进网页键盘无障碍访问的新CSS属性。它们解决了传统tabindex属性在复杂页面中容易产生全局索引冲突的问题，特别适用于视觉顺序与DOM顺序不一致的布局场景。这两个属性需与Flex或Grid布局配合使用。在Flex布局中，reading-flow的常用值为flex-visual，它强制Tab键的焦点顺序与视觉排列顺序（即order属性调整后的顺序）一致，而非DOM顺序。另一个值flex-flow则使焦点顺序与flex-flow属性定义的方向保持一致。在Grid布局中，reading-flow提供了更多选项：grid-rows使焦点按行逐个移动，grid-columns使焦点按列移动，而grid-order则优先按照CSS order属性定义的顺序来聚焦元素。当需要更精细地控制单个子项的焦点顺序时，可以配合reading-order属性使用。通过将reading-flow设置为source-order，并为目标元素指定reading-order的数值（支持负值），可以强制该元素在焦点序列中的位置。这两项特性目前主要由Chrome浏览器支持，属于渐进增强特性，建议在Flex布局中默认添加reading-flow: flex-visual，以在支持时提升用户体验。

IT 累计浏览 1,834

ExtJS怎么刷新Grid表格前面的行序列号

这篇讲的是ExtJS开发中一个常见的小痛点：Grid表格使用了RowNumberer列来显示行序号，但当删除中间某行后，序列号会断档（比如变成1、2、4），无法自动重排为1、2、3。问题的根源在于数据视图在数据变更后没有及时刷新。文章给出的解决方案非常直接且高效：在删除操作的事件处理函数中，在调用`store.remove()`移除数据后，紧跟着调用`grid.getView().refresh()`。这一行代码会强制Grid的视图进行重绘，从而让RowNumberer列基于当前的Store数据重新计算并显示连续的序列号。这种处理只刷新视图，不重新加载数据，操作轻量且针对性强，是解决此类UI刷新问题的标准做法。对于使用ExtJS进行表格开发的工程师来说，这个技巧能快速修复因数据增删导致的序号显示不全问题。

IT 累计浏览 4,516

出租车几何学：一个全新的几何世界

这篇讲的是出租车几何学，作者从北京打车选择走四环而非直线穿越的日常例子出发，生动引出了城市网格中估算距离的独特逻辑。在理想模型下，假设道路正南正北，只要朝着目标行走不故意绕远，无论路径如何，总路程都相同——这直接对应了出租车几何学的核心概念。文章对比了传统欧几里得几何和出租车几何：前者中两点间最短距离是直线，后者则计算沿街区行走的曼哈顿距离。关键差异在于，传统几何适用于连续空间的理论分析，而出租车几何更贴合离散化环境，比如城市导航、物流路径规划或计算机科学中的网格计算。通过这个案例，作者展示了数学模型如何灵活适应现实约束，挑战我们对距离的直观认知。出租车几何学不仅是一个有趣的数学概念，还在实际应用中帮助我们优化路网选择，提醒我们几何学并非抽象，而是深深嵌入日常决策中。这种视角切换，为理解空间问题提供了新的工具。

IT 累计浏览 3,704

终极攻略――未知高度元素垂直居中

这篇讲的是前端开发中一个常见但棘手的问题：如何让高度未知的元素实现垂直居中，并且要考虑兼容性。作者开篇就排除了使用 display: table-cell 和 vertical-align: middle 的常见方案，因为它在 IE6 下无法工作。文章的核心部分，是系统梳理了针对“未知高度”这一特定条件的三种垂直居中场景与实现路径。作者没有空谈理论，而是直接切入实战，分别探讨了不同布局上下文（比如是否使用 flex 容器、是否采用绝对定位等）下的最佳解法。你从中可以了解到，作者如何利用负边距、transform、表格布局等经典技巧的组合与变通，来应对高度变化带来的挑战。这种不回避旧版浏览器兼容性、专注于解决具体问题的做法，对于需要在真实项目中处理复杂布局的前端开发者来说，提供了清晰、可操作的解决方案。

IT 累计浏览 1,430

多列等高方案

这篇讲的是前端布局中一个经典难题——如何让多列内容自动等高。在传统的表格布局思维下，多列自适应高度往往会导致高度不一致，影响视觉对齐与整体美感。作者从实际项目需求出发，系统梳理了几种主流实现方案，包括利用 `flex` 布局、`grid` 布局，以及经典的 `padding-bottom` 负边距法。文章不仅对比了各方案在兼容性、代码复杂度与语义化方面的差异，还深入分析了每种方案在不同场景下的适用性。例如，`flex` 方案简洁高效，适合现代浏览器环境；而负边距法则在需要兼顾老版本浏览器时更具韧性。文中还附带了清晰的代码示例与效果演示，帮助读者直观理解实现原理。对于前端开发者而言，掌握这些技巧能有效避免布局错位问题，提升页面的整体质感。作者通过横向比较，让读者可以根据自身项目的技术栈与需求，快速选择最合适的等高方案。