• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

159
Views
El comando display-template-columns no puede organizar mis imágenes en forma de columnas en la aplicación de reacción
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

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

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error