为什么需要 subgrid

前面我们已经见识了 grids 的强大，但是强大归强大，对于某些场景无论是 grid 还是 flexbox 都有些无能为力，如下图：

image.png
一般来说，表单为了看起来比较美观，一般输入框都会对齐，这样的话如果左侧的 label 长度不一致，可能就会导致布局出现问题了。上图 label 最长的是四个汉字，如果突然增加一个表单项是五个汉字，这时候可能就需要重新调整 label 的宽度了。

上图的表单除了使用 table 布局外，其他的 float，position，flexbox 或 grids 都是每个表单项进行控制布局，而不是从整个 form 表单整体着手布局。

而 subgrid 可以帮我们很好的解决这个问题。

subgrid 入门

Grids 主要有两层结构，先是 grid container，然后是 grid items。而 subgrid 就相当于将网格布局再扩展了一层结构即 items 的子元素 sub items。

如上图表单，我们可以设计为如下三层结构 form.grid > .grid-item * 3 > label.item-label + .item-field ：

  1. <form action="" class="grid"><!-- grid container -->
  2.   <div class="grid-item"><!-- grid items -->
  3.     <div class="item-label">名称</div><!-- grid subitems -->
  4.     <div class="item-field"><input class="input" type="text"></div><!-- grid subitems -->
  5.   </div>
  6.   <div class="grid-item">
  7.     <div class="item-label">活动区域</div>
  8.     <div class="item-field"><input class="input" type="text"></div>
  9.   </div>
  10.   <div class="grid-item">
  11.     <div class="item-label">活动形式</div>
  12.     <div class="item-field"><input class="input" type="text"></div>
  13.   </div>
  14. </form>

未完待续。。。（等 chrome 浏览器支持了再更新）

参考资料