在使用 CSS Grid + Flexbox 构建标准网站时，我学到了 3 件事。
我非常享受将平面设计网格转换为使用 CSS Grid 的网页的小项目，但用 CSS Grid 构建一个标准的网站仍然让我感到困惑。所以我决定尝试用 CSS Grid 构建一个基础且标准的网站。我原来的网格模板行高是以像素为单位设置的，而调整响应式高度对我来说太复杂了，所以我将模板行高设置如下：
grid-template-rows: repeat(12, minmax(0px, max-content));
现在我已经创建了一个响应式网格。上面的样式将我的网格设置为 12 行，这些行会灵活调整，如果没有内容，它们会缩小到 0 像素。
对我来说，搭建一个标准的网站应该从移动端开始，然后再反向推导到桌面端。但由于我有点儿疯，我先做了桌面版。当时我的想法是“我只想布局一下页眉、侧边栏、封面图、主体区域和页脚，看看它们是否能完美契合。”结果后来我为此吃了大亏。我执着于使用“min-width”媒体查询来优先构建移动端页面（考虑到我一开始就反着来，这确实有点儿疯狂）。所以，当我开始调整布局以实现响应式设计时，发现 CSS Grid 很笨拙也就不足为奇了（或者更确切地说，我把责任都推给了 CSS Grid）。但是，这里有个很大的“但是”，我的设计最初是按照桌面端设计的，所以从那里反向推导并使用 min-width 媒体查询总是会更费力（我承认我不应该把额外的工作归咎于 CSS Grid，因为这是我规划不周造成的）。当我将我的平面设计网格（同样也是先为桌面端设计的）“响应式化”时，我使用了 max-width 媒体查询，工作量就大大减少了。
1.
如果您使用 CSS Grid 进行构建，请先确定您的应用是面向移动设备还是桌面设备……
如果是桌面端，则使用最大宽度媒体查询；
否则使用最小宽度媒体查询。
2.
在网格内显示弹性图形。
当我将网格的子元素设置为“display:flex;”时，布局其父元素变得无比轻松。我一开始尝试创建子网格，但还需要进一步研究才能确定。对于简单的设计，我发现只需将例如头部元素设置为以下属性即可轻松实现：
display:flex; flex-flow:row nowrap; align-items:flex-end;
头部元素是`.container`的子元素，`.container`的 `display` 属性设置为`grid`；因此，头部元素拥有网格子元素属性，例如`grid-columns` 和 `grid-rows`。但是，头部元素的 `display` 属性可以设置为 `flex`，这样头部元素的子元素也会应用弹性对齐属性。
在把设计改成响应式之后，我开始让它变得不那么标准，并添加了一些我自己的奇思妙想。我不喜欢听到“现在没人用阴影了”和“现在没人做圆角了”之类的说法。好吧，管它呢，我用了，而且我觉得这样看起来很有趣，随便你们怎么说（别真的告我，我穷得叮当响，还得养家糊口呢）。总之，我添加了一些响应式的小细节，比如鼠标悬停在需要链接的元素上时，阴影会随之移动，它们还有我从 Ben Szabo 那里学到的“涟漪效果”。
3.
CSS Grid 可以让你更好地控制 JavaScript 滚动事件。
最后，我还添加了一些 JavaScript 代码，因为我也在努力提升这方面的技能。在使用 CSS Grid 布局和滚动效果时，JavaScript 可能更容易预测，因为很多对象属性都会受到“定位元素”的影响。也就是说，如果你使用了大量带有 position: relative、absolute、sticky 等属性的元素，那么滚动效果就会变得难以预测。而使用 CSS Grid 布局则不需要过多地使用定位属性。我只给两个元素添加了定位属性：我的 logo 元素使用了position: absolute;，而我的.content-main 元素使用了position: relative;，这样我的滚动效果才能达到预期效果。