如何使用显示网格使你的 HTML 具有响应性。💯✅

要使用显示网格使您的 HTML 具有响应性，您可以按照以下步骤操作：

定义网格容器：首先，使用 属性定义用于容纳网格的容器元素display: grid。这将启用网格布局。

设置网格模板的列和行：grid-template-columns接下来，使用和属性设置网格模板的列和行grid-template-rows。这些属性允许您指定网格应包含的列数和行数，以及它们的大小和间距。

放置网格项：定义网格模板的列和行后，可以使用grid-column和grid-row属性来放置网格项。这些属性允许您指定网格项应跨越哪些单元格。

使用媒体查询：最后，为了使网格具有响应式布局，您可以使用媒体查询根据屏幕尺寸调整网格布局。您可以使用@media规则在不同的断点设置不同的网格属性，例如更改列数或列大小。

下面是一个示例代码片段，演示了如何创建一个简单的响应式网格布局：

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;
}

.item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
  }
}

输出

在此示例中， .container 元素设置为，并包含三列，列与列之间的间距为 20px。 .item 元素使用n 和属性display: grid放置在网格中。grid-columgrid-row

然后，使用两个媒体查询来调整不同屏幕尺寸下的网格布局。当屏幕尺寸小于或等于 时768px，网格设置为两列而不是三列。当屏幕尺寸小于或等于 时480px，网格设置为仅一列。这使得网格能够适应不同的设备和屏幕尺寸，并保持响应速度。

希望你喜欢它。

就这样了 — — 谢谢。

要阅读我的其他文章，请单击此处。

什么是 Flexbox：Flexbox CSS 布局初学者指南

👋嘿，让我们联系：
Linkdin：Margish Patel
Twitter：@margish96patel
电子邮件：babariyamargish97@gmail.com