响应式布局
结合 auto-fit、minmax() 和媒体查询创建响应式网格
.grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (max-width: 768px) {
.grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (max-width: 768px) {
.grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6