参考资料

  1. 背景属性详细说明以及案例
  2. 哪种布局方式更适合移动端？
  3. 子选择器详细说明以及案例
  4. CSS3 阴影
  5. CSS 阴影效果属性
  6. Vanta.js 如何与 CSS 过渡结合？
  7. Flexbox 布局有哪些高级用法？
  8. 如何优化过渡动画的性能？
以下是使用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对齐更简单）

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。