0619：如何使用grid实现表格布局

现在想要实现一个如下的页面功能

之前使用的是flex布局，存在一个问题，就是上面的header和下面的column很难调整为列对齐且无法自适应

我的解决方案为引入grid。

先将header和column均以grid的布局方式实现列的对齐，如下所示

`display: grid;

grid-template-columns: 16.3fr 22.5fr 15.3fr 15.3fr 15.3fr 15.3fr;

之后用一个position将标题的样式进行定位展示，最后实现header的样式背景和实际内容彼此独立，然后拼到一起，实现了预期的布局样式。