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

迷途小码农零零发

已于 2024-08-30 01:15:19 修改

阅读量82

点赞数 2

分类专栏：前端常见文章标签：前端 css3 react.js

于 2024-08-29 21:27:45 首次发布

本文链接：https://blog.csdn.net/yiguoxiaohai/article/details/141688937

版权

前端常见专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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;
    }
  }
}