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 GridThemeEstoy tratando de organizar img1 en las columnas usando el comando grid-template-columns pero todavía está en forma de filas en la aplicación de reacción. Lo he comprobado muchas veces pero no puedo encontrar ningún error, pero aún así mis imágenes no se están organizando. en formato de columna. Por favor, ayúdame.
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