网格已成为一种流行的网页元素布局方式，简化了许多常见用例。过去，我们使用表格、浮动、内联块以及最近的 Flexbox 来帮助布局网页。虽然 Flexbox 仍然有其用例，但 CSS 网格的优势在于它是一种基于二维网格的布局系统，这意味着开发人员可以更好地控制。
要深入了解 CSS 网格的功能，我们建议您查看CSS-Tricks 上的《网格完整指南》。对于这篇文章，需要考虑的重要方面是网格由两部分组成：网格容器和网格项。
网格容器：应用display: grid了
为了便于理解，我们将主要关注可应用于网格容器的属性和值。让我们看一个例子来了解如何使用 CSS 函数来控制 CSS 网格布局。
我们可以看到这里 CSS 函数 clamp 的作用，但还有很多其他 CSS 网格特定方面可能会让它变得难以应付。让我们分别解决这些问题：
display: grid：这告诉元素我们要使用 CSS 网格来布局该元素及其子元素
grid-template-columns：定义网格列的大小
repeatgrid-template-columns：允许和属性重复使用大小值grid-template-rows。例如，您可能希望第一个N为一个大小，最后一个为不同的大小。auto-fit告诉浏览器为我们处理列大小和元素换行，这样当宽度不够大而无法容纳元素时，元素将换行到行中而不会溢出。
minmax：这需要一个最小值和一个最大值。然后它定义一个大于或等于最小值且小于或等于最大值的尺寸范围。它仅在 CSS 网格中可用。1fr上面的代码告诉浏览器在列之间分配空间，以便每列均匀地获得该空间的一部分。
要深入了解 CSS 网格中的自动调整大小，请参阅 Sara Soueidan 的文章《CSS 网格中的自动调整列大小：auto-fillvsauto-fit》。
把所有这些放在一起，我们告诉浏览器使用 CSS 网格来布局元素的项目，并auto-fit与一起使用，minmax()让浏览器根据计算确定clamp()何时适合“打破”列数并创建动态响应网格。
限制
当然，如果 CSS 网格和 CSS 函数解决了所有响应式容器问题，那么我们就不需要容器查询了，但事实并非如此。这种方法对您根据父容器的大小可以更改的内容有一些限制。
具体来说，该解决方案：
不允许显示或隐藏特定元素
不允许修改非基于大小的属性
尽管存在这些限制，但借助 CSS 网格和 CSS 函数，我们可以确保应用程 科威特电话号码数据 序块具有足够的动态性，无论将它们添加到页面上的哪个位置，都能看起来很棒。
使用 CSS 构建响应式应用程序块
主题应用扩展和应用块带来了许多令人兴奋的机会。有了它们，商家可以完全控制将应用块添加到店面的哪个位置。这意味着开发人员需要预测商家将如何使用应用块，并确保它们看起来不错并且运行良好。在容器查询得到更好的支持之前，CSS 网格和 CSS 函数提供了一个不错的临时解决方案。