React项目中grid-template-columns无法将图片排成列的问题求助

在React项目中使用styled-components，尝试通过grid-template-columns实现图片的网格排列，但所有图片仍以行的形式展示，检查代码未找到问题，相关代码如下：

import React from 'react'
import  img1 from "../Images/Forky.jpg";
import styled, { css } from 'styled-components';
const GridTheme = () => {
  return (
    <>
      <Section>
        <Container>
            <Title>
                <h1 className='disney-titles'>Stream Exclusive Disney+ Orignals</h1> 
                <p>New stories from our incrreadible family of studios</p>
            </Title>
            <GridImg>
                <Image>
                    <img src={img1} alt="grid/img"/>
                    <img src={img1} alt="grid/img"/>
                    <img src={img1} alt="grid/img"/>
                    <img src={img1} alt="grid/img"/>
                    <img src={img1} alt="grid/img"/>
                    <img src={img1} alt="grid/img"/>
                    <img src={img1} alt="grid/img"/>
                    <img src={img1} alt="grid/img"/>
                </Image>
            </GridImg>
        </Container>
      </Section>
    </>
  );
}
const Section = styled.section`
padding:5vh 0;
position:relative;`;
const Container = styled.div`
width:95%;
margin:0 auto;`;
const Title = styled.div`
text-align:center;
margin-bottom:3vh;
p{
    font-size:1rem;
    @media screen and (max-width:550px){
        font-size:.8rem;
    }
}`;
const GridImg = styled.div`
display:grid;
gap:15px 25px; 
grid-template-columns:repeat(3,minmax(0,1fr));
`;
const Image = styled.div`
width:100%;
padding:0;
border-radius:0.245rem;
box-shadow:rgb(0 0 0 / 69%) 0px 26px 30px -10px,rgb(0 0 0/73%)  0px 16px 10px -10px;

img{
    width:100%;
    height:auto;
    object-fit:cover;
}
           
`;
export default GridTheme

问题核心 #

GridImg容器设置了Grid布局，但它的直接子元素只有一个<Image> div，所有图片都嵌套在这个div内部。Grid布局只会对直接子元素生效，所以实际上只有一个网格项，图片自然在<Image>里默认横向排列（块级元素里的img是行内块，会并排）。

修复方案（二选一） #

方案1：移除多余容器，给img直接添加样式

把<Image>容器去掉，将原来Image里的样式转移到img的样式中：

// 组件部分修改
<GridImg>
    <img src={img1} alt="grid/img"/>
    <img src={img1} alt="grid/img"/>
    <img src={img1} alt="grid/img"/>
    <img src={img1} alt="grid/img"/>
    <img src={img1} alt="grid/img"/>
    <img src={img1} alt="grid/img"/>
    <img src={img1} alt="grid/img"/>
    <img src={img1} alt="grid/img"/>
</GridImg>

// 样式部分修改
const GridImg = styled.div`
display:grid;
gap:15px 25px; 
grid-template-columns:repeat(3,minmax(0,1fr));

img{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:0.245rem;
    box-shadow:rgb(0 0 0 / 69%) 0px 26px 30px -10px,rgb(0 0 0/73%)  0px 16px 10px -10px;
}
`;
// 移除原来的Image样式组件

方案2：每个图片单独包裹<Image>组件

保留Image样式组件，让每个img都被<Image>包裹，这样每个<Image>就是GridImg的直接子元素，Grid布局就能生效：

// 组件部分修改
<GridImg>
    <Image><img src={img1} alt="grid/img"/></Image>
    <Image><img src={img1} alt="grid/img"/></Image>
    <Image><img src={img1} alt="grid/img"/></Image>
    <Image><img src={img1} alt="grid/img"/></Image>
    <Image><img src={img1} alt="grid/img"/></Image>
    <Image><img src={img1} alt="grid/img"/></Image>
    <Image><img src={img1} alt="grid/img"/></Image>
    <Image><img src={img1} alt="grid/img"/></Image>
</GridImg>

两种方案都能让图片按照grid-template-columns: repeat(3, minmax(0, 1fr))的设置，以3列网格的形式排列。

内容的提问来源于stack exchange，提问作者Mudit Dagar