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.
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