display-template-columns command is not able to arrange my images in the form of columns in react app

Issue

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

I am trying to arrange img1 in the from of columns using grid-template-columns command but it is still in the form of rows in react app.I have checked many times but not able to find any error but still my images are not arranging in column format. Please help me.

Solution

import React from 'react'
import  img1 from "../Images/Mickey_Mouse_Clubhouse_Grid_Item_052820.jpg";
import  img2 from "../Images/Disney_MLP_GridItem_SWRiseofSkywalker.jpg";
import  img3 from "../Images/Disney_MLP_GridItem_TS4_AUNZ.jpg";
import  img4 from "../Images/Forky.jpg"; 
import  img5 from "../Images/LUCA-2.png"; 
import  img6 from "../Images/moana-poster-4-2.png"; 
import  img7 from "../Images/Poster_InfinityWar_EN.jpg"; 
import  img8 from "../Images/Souls.png"; 
import  img9 from "../Images/SW_Clone_Wars.png";
import styled, { css } from 'styled-components';

const GridPro = () => {
    const API_KEY = [{imgScr:img1},{imgScr:img2},{imgScr:img3},
        {imgScr:img4},{imgScr:img5},{imgScr:img6},
        {imgScr:img7},{imgScr:img8},{imgScr:img9}
       ];

    
  return (
    <>
      <Section>
        <Container>
          <Title>
            <h1 className='disney-titles'>Stream Exclusive Disney+ Originals</h1>
          </Title>
          <GridImg>
          {API_KEY && API_KEY.map((value,index)=>(<Image key={index}> <img src={value.imgScr} alt="grid/img"/></Image>))}
          
               
             
             

            
          </GridImg>
        </Container>
      </Section>

    </>
  );
}
const Section = styled.section`
padding:5vh 0;
posdition: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(0px, 1fr))`;
const Image = styled.div`
width:100%;
padding:0 auto;
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 GridPro

Answered By - Mudit Dagar