CSS Grid Responsive

Grid 布局对于网页至关重要，能够根据需求保持功能和容器的完整性。我们可以使用 CSS Grid 布局创建响应式页面。CSS Grid 响应式布局有助于为从大到小各种屏幕设备创建容器。

示例

以下示例显示了 CSS Grid 如何响应容器和标签。

示例 1

该示例显示了 div 标签的单个网格，该网格指定了屏幕的最小宽度。我们可以在屏幕设备的中心显示网格标签。

输出

输出显示了响应式页面的 CSS Grid 布局。

示例 2

该示例显示了 div 标签的两个网格，用于屏幕的最小宽度。我们可以看到两个网格适用于屏幕宽度，当屏幕宽度小于 200px 时显示单个网格。CSS 在媒体查询中使用 `grid-template-columns` 属性和最小宽度属性。

输出

输出显示了响应式页面的 CSS Grid 布局。

示例 3

该示例显示了 div 标签的四个网格，用于屏幕的最小宽度。我们可以看到两个网格适用于屏幕宽度，当屏幕宽度小于 200px 时显示单个网格。CSS 在媒体查询中使用 `grid-template-columns` 属性。

输出

输出显示了响应式页面的 CSS Grid 布局。

示例 4

该示例显示了 div 标签的两个网格，用于屏幕的最小宽度。我们可以看到两个网格适用于屏幕宽度，当屏幕宽度小于 200px 时显示单个网格。CSS 使用 `grid-template-columns` 属性和 `auto` 显示实现响应式布局。

输出

输出显示了响应式页面的 CSS Grid 布局。

示例 5

该示例显示了 div 标签的两个网格，用于屏幕的最小宽度。CSS 使用 `grid-template-columns` 属性和 `auto-fill` 值实现响应式布局。

输出

输出显示了响应式页面的 CSS Grid 布局。

结论

CSS Grid 系统选择各种 div 标签的网格。Grid 系统有助于根据网页和用户显示多种功能。CSS Grid 系统是一个简单易用的功能，允许开发人员隔离网页空间。该空间得到妥善利用，并以用户交互的方式显示页面。