Html 网格布局未显示

我一直在学习一个有响应性的网页设计教程，我就是不能解决这个问题。我在html中包含了grid.css文件，但chrome无法正确显示它。我得到的不是网格，而是像附加图像中那样的行。有人能帮我解决这个问题吗？ 多谢各位

/*------------------------------------*/
/*基本设置*/
/* --------------------------- */
* {
保证金：0；
填充：0；
框大小：边框框；
}
html{
背景色：#fff；
颜色：#555；
字体系列：“Lato”、“Arial”、无衬线；
字体大小：300；
字体大小：20px；
文本呈现：优化易读性；
}
/* --------------------------- */
/*可重用组件*/
/* --------------------------- */
.行{
最大宽度：1140px；
保证金：0自动；
}
部分{
填充：80px0；
}
/*-----标题------*/
h1{
边际上限：0；
边缘底部：20px；
颜色：#fff；
字体大小：240%；
字体大小：300；
文本转换：大写；
字母间距：1px；
字距：4px；
}
/*-----按钮------*/
.btn:link，
.btn:已访问{
显示：内联块；
填充：10px 30px；
字体大小：300；
文字装饰：无；
边界半径：200px；
颜色：#fff；
过渡：背景色0.2s，边框0.2s，颜色0.2s；
}
.btn完整：链接，
.btn完整：已访问{
背景色：#e67e22；
边框：1px实心#e67e22；
颜色：#fff；
右边距：15px；
}
.btn ghost:link，
.btn ghost:已访问{
边框：1px实心#e67e22；
颜色：#e67e22；
}
.btn:悬停，
.btn：活动{
背景色：#cf6d17；
}
.btn已满：悬停，
.btn已满：活动{
边框：1px实心#cf6d17；
}
.btn幽灵：悬停，
.btn重影：活动{
边框：1px实心#cf6d17；
颜色：#fff；
}
/* --------------------------- */
/*标题*/
/* --------------------------- */
标题{
背景图像：线性渐变（rgba（0,0,0,0.7），rgba（0,0,0,0.7）），url（img/hero.jpg）；
背景尺寸：封面；
背景位置：中心；
高度：100vh；
}
.英雄文本框{
位置：绝对位置；
宽度：1140px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.标志{
高度：100px；
宽度：自动；
浮动：左；
边缘顶部：20px；
}
.主导航{
浮动：对；
列表样式：无；
边缘顶部：55px；
}
主导航李先生{
显示：内联块；
左边距：40px；
}
.主导航李a：链接，
.主导航李a：已访问{
填充：8px 0px；
颜色：#fff；
文字装饰：无；
文本转换：大写；
字体大小：90%；
边框底部：2倍纯色透明；
过渡：边界底部0.2s；
}
主导航李a：悬停，
.主导航李a：激活{
边框底部：2个实心#cf6d17；
}

杂粮






再见垃圾食品。
你好，超级健康餐
快速获取食物&mdash；不是快餐。

您好，我们是Omnifood，您新推出的优质食品配送服务。我们知道您总是很忙。没有时间做饭。所以让我们来解决这个问题，我们真的很擅长，我们保证！

最多365天/年

再也不要做饭了！我们是认真的。我们的订阅计划包括高达365天/年的覆盖范围。如果这是你的风格，你也可以选择更灵活的订购方式。

20分钟后准备好

你只需要20分钟就可以享受到送回家的美味和超级健康的饭菜。我们与每个城市最好的厨师合作，确保您100%满意。

100%有机

我们所有的蔬菜都是新鲜的、有机的和本地的。动物在没有添加激素或抗生素的情况下被饲养。对你的健康、环境都有好处，而且味道也更好！

点什么

我们不限制您的创造力，这意味着您可以随意订购。您也可以从包含100多种美味佳肴的菜单中选择。这取决于你！

您没有在自己的示例中包含grid.css。是的，网格工作了是的…就是这样！这是很多人@Michael_B:）