使用react、样式化组件等动态创建包含n行和n列的css网格/flexbox图片库

import React from 'react';
import styled from 'styled-components';

// 定义网格组件
const GridContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(${props => props.columns}, 1fr);
  grid-template-rows: repeat(${props => props.rows}, 1fr);
  gap: 10px;
`;

const GridCell = styled.div`
  background-color: #eee;
  padding: 10px;
`;

const Image = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
`;

// 创建包含n行和n列的网格图片库
const GridImageLibrary = ({ rows, columns, images }) => {
  return (
    <GridContainer rows={rows} columns={columns}>
      {images.map((image, index) => (
        <GridCell key={index}>
          <Image src={image} alt={`Image ${index}`} />
        </GridCell>
      ))}
    </GridContainer>
  );
};

export default GridImageLibrary;

import React from 'react';
import GridImageLibrary from './GridImageLibrary';

const images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
  // 更多图片...
];

const App = () => {
  return (
    <div>
      <h1>图片库</h1>
      <GridImageLibrary rows={3} columns={4} images={images} />
    </div>
  );
};

export default App;