CSS网格布局-移动优先方法

Question

我们为什么需要为移动设备定义网格？

这样做的好处是什么？

检查以下示例：common layouts with ccs grids on MDN

因此，无需定义网格即可在移动设备上获得相同的结果，只需在第一个断点处定义网格即可。

Answer 1

在大多数情况下，您是对的。对于该教程中的示例，如果在第一个断点处声明网格，则没有任何区别。唯一的区别是语义。

一些好处：

一致性和清晰度： 如果在所有断点上使用相同的布局方法，您的代码将更加一致，更容易理解正在发生的事情。优秀的css易于阅读，即使对于不熟悉项目，不熟悉您的编码风格的人也是如此。如果您打算使用网格布局，则它应该是一致的并且可以在整个面板上使用。

布局的复杂度： 该示例不需要移动设备的网格布局，但这并不意味着总是如此。当您遍历设计时，以后可能需要增加更多的复杂性。如果从一开始就已建立好结构，则重构过程将变得更加容易。

仍然有一个论点，仅包含实现正确布局绝对必要的代码。不管您是否加入，这完全取决于个人喜好。