参考资料

  1. 如何提高Flex布局的性能？详细说明
  2. 层次/关系选择器详细说明以及案例
  3. css布局格式
  4. css中div居中
  5. css阴影颜色怎么设置
  6. 哪种布局方式更适合移动端？
  7. css让div居中的几种方法
  8. CSS有哪些预处理器？
以下是使用CSS Grid和Flexbox两种现代布局方式实现4列12个产品布局的方法：

html
Copy Code
<!DOCTYPE html>
<html>
<head>
<style>
/* 方法一：使用CSS Grid（推荐） */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 4列等宽 */
    gap: 20px;  /* 列间距 */
    padding: 20px;
}

/* 方法二：使用Flexbox */
.products-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.products-flex .product-item {
    flex: 1 1 calc(25% - 20px);  /* 4列计算（25%宽度 - 间隙） */
}

/* 公共产品样式 */
.product-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 15px;
    text-align: center;
    transition: transform 0.3s ease;
}

.product-item:hover {
    transform: translateY(-5px);
}

/* 响应式布局 */
@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);  /* 中屏幕显示3列 */
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);  /* 小屏幕显示2列 */
    }
    
    .products-flex .product-item {
        flex: 1 1 calc(50% - 20px);  /* 响应式调整为2列 */
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;  /* 手机显示1列 */
    }
    
    .products-flex .product-item {
        flex: 1 1 100%;  /* 手机显示1列 */
    }
}
</style>
</head>
<body>

<!-- 使用Grid布局 -->
<div class="products-grid">
    <div class="product-item">产品 1</div>
    <div class="product-item">产品 2</div>
    <div class="product-item">产品 3</div>
    <div class="product-item">产品 4</div>
    <div class="product-item">产品 5</div>
    <div class="product-item">产品 6</div>
    <div class="product-item">产品 7</div>
    <div class="product-item">产品 8</div>
    <div class="product-item">产品 9</div>
    <div class="product-item">产品 10</div>
    <div class="product-item">产品 11</div>
    <div class="product-item">产品 12</div>
</div>

<!-- 或者使用Flexbox布局 -->
<!-- <div class="products-flex">
    ...同样的产品项...
</div> -->

</body>
</html>


两种布局方式的主要区别：

CSS Grid布局‌（推荐）：
使用grid-template-columns: repeat(4, 1fr)直接创建4列
自动处理间距和换行
更直观的二维布局控制
更容易创建复杂的响应式布局
Flexbox布局‌：
需要配合flex-wrap: wrap
需要使用calc()计算宽度
更适合单行或简单多列布局
需要更多代码处理响应式

关键特性：

响应式断点：在不同屏幕尺寸自动调整列数
卡片悬停效果：使用transform实现微交互动画
间距控制：使用gap属性统一控制间距
阴影效果：使用box-shadow增加层次感
等宽列：两种方式都能实现等宽列布局

选择建议：

现代浏览器推荐使用CSS Grid，语法更简洁直观
需要支持老旧浏览器时可用Flexbox方案
可根据实际内容高度选择（Grid对齐更简单）