Quasar Grid单元素场景row与column作用及gutter问题解决咨询

问题1：示例容器内仅包含1个元素的场景下，设置row与column分别发挥什么作用？ #

• row 类会将容器设置为水平方向排列的flex容器：
  即便只有1个子元素，也会让子元素默认沿水平轴排布，触发q-col-*的宽度规则生效；同时row自带的水平负外边距会生效，抵消子元素gutter对应的水平内边距，保证子元素边缘和容器边界对齐。
• column 类会将容器设置为垂直方向排列的flex容器：
  仅1个子元素时，子元素会沿垂直轴排布，column自带的垂直负外边距生效，抵消子元素gutter对应的垂直内边距，避免子元素上下出现多余留白。

问题2：为什么搭配使用row与overflow-auto可以解决gutter-size相关的布局问题？ #

Quasar 的q-gutter-size系列类的实现逻辑是：给row的直接子元素添加对应数值的水平内边距实现列间距，为了让首列左边缘、末列右边缘和父容器对齐，row本身会添加同等数值的左右负外边距。
这个负外边距会导致row的实际宽度超出父容器，容易出现多余的横向滚动条、或者内容溢出父容器边界的问题。给row的外层容器添加overflow-auto之后，会自动裁剪row负外边距超出的部分，既保留了子元素之间的间距效果，又不会出现布局溢出的异常。

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