答案：现代CSS多行多列布局主流方法为Grid、Flexbox和传统浮动；Grid适用于二维规整布局，通过display: grid和grid-template-columns/rows定义行列，支持repeat和minmax实现响应式；Flexbox通过flex-wrap换行，结合calc百分比控制列数，适合动态内容；推荐优先使用Grid和Flexbox，配合gap与媒体查询实现高效响应式布局。
实现多行多列的CSS布局，现代开发中有几种主流方法，每种适用于不同场景。下面介绍最常用且实用的三种方式：Flexbox、CSS Grid 和传统浮动布局（已逐渐淘汰，仅作了解）。
使用 CSS Grid 实现多行多列
CSS Grid 是专为二维布局设计的工具，非常适合处理多行多列结构。
示例：创建一个 3列 2行 的网格布局display: grid; 定义容器为网格布局，用 grid-template-columns 和 grid-template-rows 控制行列大小。
HTML 结构：
123456
CSS 样式：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
grid-template-rows: 100px 100px; /* 两行，每行100px */
gap: 10px; /* 间距 */
}
也可以使用 repeat(3, 1fr) 简化列定义：grid-template-columns: repeat(3, 1fr);
使用 Flexbox 实现多行多列
Flexbox 是一维布局模型，但通过设置换行也能实现多行多列效果，适合动态内容。
立即学习“前端免费学习笔记（深入）”；
PrestaShop 开源网店系统是一款针对web2.0设计的全功能、跨平台的免费开源电子商务解决方案，自08年1.0版本发布，短短两年时间，发展迅速，全球已超过四万家网店采用Prestashop进行布署。Prestashop 开源网店系统基于Smarty引擎编程设计，模块化设计，扩展性强，能轻易实现多种语言，多种货币浏览交易，支持Paypal等几乎所有的支付手段，是外贸网站建站的佳选。Prest
CSS 示例：
.flex-container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
}
.flex-item {
flex: 0 0 calc(33.33% - 10px); / 每行显示3个，减去间距 /
margin: 5px;
}
这样每项占约三分之一宽度，超出即换行，形成多行三列布局。调整百分比可控制列数，比如 50% 为两列，25% 为四列。
响应式多列布局建议
在实际项目中，多行多列常需适配不同屏幕。结合 Grid 或 Flexbox 与媒体查询或 minmax() 可轻松实现响应式。
使用 Grid 的自适应写法：
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
这表示：每列最小 200px，最大 1fr，自动填充，屏幕越宽列越多，无需媒体查询即可响应式排列。
基本上就这些。Grid 更适合规整的二维布局，Flexbox 适合一维为主、需要灵活性的场景。现代布局推荐优先使用 Grid 和 Flexbox。不复杂但容易忽略的是 gap 间距和响应式断点的合理设置。
