CSS Grid Layout 是一种强大的前端布局技术，它可以让开发者更轻松地设计复杂的网页布局并且能够适应各种设备。然而针对那些初学者而言，使用 CSS Grid Layout 可能会遭遇一些问题。在本文中，我们将讨论初学者常犯的 8 个 CSS Grid Layout 错误，并提供相应的解决办法。
1. 将 Grid 属性应用于错误的元素
过多的开发者在应用 CSS Grid 属性时，会将它们应用于错误的元素。通常情况下，这些属性应该被应用在容器元素上，而不是子元素。要避免这种错误，需要记住以下几点：
- 应该只将 display 属性设置为 grid 或 inline-grid 的盒子视为容器；
- 其他的 CSS 属性应该被应用在子元素上面，而不是容器元素；
- 通过使用 devtools 调试器来检查 Grid 单元格的控制。
示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- ------------------- ---- ------------------- ------ ---------- - -------- ----- - ----- - ------------ -- -
2. 使用错误的单位
某些开发者在设置 Grid 属性时，会使用错误的单位。例如，他们可能尝试使用 px 或 em 而不是 fr 或 %。这种错误会破坏 Grid 的可伸缩性并导致布局问题。要避免这种错误，记住：
- fr用于设置 Grid 项目的尺寸；
- %用于设置 Grid 容器或项目的高度或宽度。
示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- ---- - ----- - ------ ------ -- -- -- ------ ---- -- -- -- -
3. 忘记设置 Grid 行高或列宽
CSS Grid Layout 中，行高和列宽必须被设置。如果忘记设置这些值，则会导致布局问题。要避免这种错误，要记住：
- 使用 grid-template-rows/ grid-template-columns 来设置行高和列宽；
- 使用 repeat() 和 minmax() 函数来控制单元格的规模；
- 使用 auto 或 min-content 确定行高和列宽的大小。
示例代码：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 列，1fr 单位 */
grid-template-rows: auto 100px auto; /* 自适应，100px，自适应 */
}4. 非兼容性 API
CSS Grid Layout 可能不是所有浏览器都支持的 API。开发者必须检查所有浏览器的支持性。而此外，开发者也可以使用 Autoprefixer 或 postcss-preset-env 等工具，以确保浏览器的兼容性。
示例代码：
.container {
display: -ms-grid; /* 非兼容性写法 */
display: grid;
}5. 忘记导航栏
相比 Flexbox，CSS Grid 更适合处理多列布局。当使用 Grid 布局设计网站时，容易忘记导航。开发者应该将导航栏设置为单独的列，而不是将它与内容混淆在一起。
示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----- ---- -- -------- -- ------------------- ------ - ---- - ------------ -- --------- -- - -------- - ------------ -- --------- -- -
6. 遗忘 grid-auto-flow 属性
grid-auto-flow 属性用于控制在 Grid 中添加新项目的方向。如果没有设置它，则 Grid 朝着初始方向进行排版。为避免这种问题，记住以下内容：
- grid-auto-flow 允许开发者设定 Grid 对新项目的排版方向；
- 默认值是 row，它会先排满横向项目，再次排列下一行项目；
- 如果遇到纵向项目，它会尝试将它们添加到下一行中。
示例代码：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: column; /* 设置项目排布方向为 column */
}7. 忘记设置位置
当使用 Grid 布局时，位置必须与单元格关联。如果不设置这些位置，Grid 容器就会忽略这些元素。要避免这种问题，记住以下事项：
- 使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 来控制元素的位置；
- start行和列边缘从(1,1)开始，end边缘从(2,2)开始；
- 使用 span 将 Grid 单元格展开多格。
示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- - ----- - --------------- -- ------------- -- ------------------ -- ---------------- -- -
8. 忘记设置 Grid 容器的高度和宽度
在100%布局或处理高度和宽度时，开发者偶尔会忘记为 Grid 容器设置高度和宽度。如果没有设置 Grid 容器的高度和宽度，则可能会出现元素计算错误等问题。为避免这些问题，记住以下内容：
- 为 Grid 容器设置高度和宽度，以确保所有的子元素都被包含在内；
- 如果不想为 Grid 容器设置像素尺寸，则可以将视图高度和视图宽度设置为100%。
示例代码：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
height: 100%; /* 设置容器高度 */
}总结
当使用 CSS Grid Layout 进行布局时，初学者需要注意很多细节。避免常见问题的最好方法就是开发者要熟悉 CSS Grid 的各种属性，并将它们合理应用于各种项目中。本文中，我们讨论了初学者常犯的 8 个错误，并提供了相应的解决方案和示例代码，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6521f7e995b1f8cacd9562e7