需求是要做一个表格样式的表单，然后外边框需要是圆角的，用table实现边框圆角比较麻烦，正好刚学了一些grid的基础知识，就想尝试用grid实现一下。
最终的效果
HTML
SCSS
思路
大家应该可以看出来，其实整个的结构跟table差不多，用div > div > div 代替了table > tr > td， 用grid的grid-template-columns样式设置代替了td的colspan。 其实grid布局里面是有属性可以直接做到跨列的，例如grid-column: 1 / span 2， 但是因为这个table需要斑马线样式，所以我没有把整个table设置为grid布局，而是把每行设置成了grid，方便设置行背景色。所以目前用不到grid的跨列参数。
关键代码
grid-template-columns: 150px minmax(300px, 1fr);
第一个参数150px表示字段名单元格的宽度，第二个参数用minmax函数动态设置输入框的单元格宽度。
因为整个表单宽度是随页面缩放自适应的，因此输入框单元格也需要在保证最小宽度的情况下自适应，所以300px相当于min-width，1fr我理解就类似于flex布局“flex: 1 1 100%”中的1，表示一个比例，起到自适应宽度的作用。我这里还可以做到保证同列单元格的宽度是一致的。我也尝试过用auto来代替1fr，但是同列单元格的宽度会不一致。
fr和 minmax的官方说明:
