网格布局（grid layout）中resize元素仅向右侧扩展宽度的问题

问题根因 #

你遇到的拉伸方向问题核心有两个原因：

1. 你的grid-column: 2/2写法没有明确固定元素的左边界，网格布局下该元素默认在分配的列空间内居中，调整宽度时会同时向左右延伸维持居中状态
2. direction属性仅控制文本书写方向，和resize拉伸方向无关，且你的写法存在语法错误，属性值不需要加引号

解决方案 #

修改你的CSS规则如下即可实现仅向右侧拉伸：

ul .chart-li-two-a {
  grid-column: 2 / auto; /* 固定左边界在第2条列网格线，右边界随宽度自动调整 */
  background-color: #0080ff;
  resize: horizontal;
  overflow: hidden; /* resize属性要求必须搭配非visible的overflow值才能正常生效 */
}

实现原理 #

grid-column: 2 / auto会强制将元素的左边缘固定对齐到网格的第2条纵向分隔线，调整宽度时仅会修改右边缘的位置，不会影响左侧的对齐位置，自然就只会向右侧扩展。

内容的提问来源于stack exchange，提问作者Ngo Hoang