grid布局实现移动端H5响应式排列正方形格子布局

grid布局实现移动端H5响应式排列正方形区域

grid布局：CSS Grid 网格布局教程
在 CSS 中，padding-top 的百分比值是相对于元素自身的宽度，而不是高度。这是 CSS 规范中的一个特性，所有的 padding 和 margin 的百分比值都是相对于元素的宽度。

例子

index.tsx

import styles from "./index.module.less";const GridTest = () => {const list = [{key: "1",src: "https://img0.baidu.com/it/u=2627467846,539460817&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=714",},{key: "2",src: "https://img0.baidu.com/it/u=1920485745,1250113689&fm=253&fmt=auto&app=138&f=JPEG?w=873&h=800",},{key: "3",src: "https://img0.baidu.com/it/u=81847473,3448580678&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707",},{key: "4",src: "https://img0.baidu.com/it/u=3226719732,1801549043&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500",},{key: "5",src: "https://img0.baidu.com/it/u=2627467846,539460817&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=714",},{key: "6",src: "https://img0.baidu.com/it/u=3226719732,1801549043&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500",},{key: "7",src: "https://img0.baidu.com/it/u=2627467846,539460817&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=714",},{key: "8",src: "https://img0.baidu.com/it/u=1920485745,1250113689&fm=253&fmt=auto&app=138&f=JPEG?w=873&h=800",},];return (<div className={styles.gridBox}>{list.map((item) => {return (<div key={item.key} className={styles.gridItem}><img src={item.src} alt="" /></div>);})}</div>);
};export default GridTest;

index.module.less

.gridBox {display: grid;grid-template-columns: repeat(3, 1fr);gap: 8px; // 设置间距.gridItem {position: relative;width: 100%;padding-top: 100%; // 通过 padding-top 设置高度为宽度的 100%，实现正方形border-radius: 4px;overflow: hidden;img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}}
}