教你CSS Grid布局实现响应式设计




.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
 
.item {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
}

这段代码定义了一个容器 .container，它使用了 CSS Grid 布局。grid-template-columns 属性设置了列的数量和大小，使用 repeat(auto-fit, minmax(150px, 1fr)) 自动填充列，每列的最小宽度为 150px，并且会占据剩余空间的一部分。gap 属性在网格项之间添加了间隙。.item 类定义了网格项的样式，包括背景色、边框和内边距。这个布局方法使得容器内的项可以响应屏幕大小的变化，方便实现响应式设计。

教你CSS Grid布局实现响应式设计

评论已关闭

推荐阅读