So I am building a webpage with React, I would like to have a grid of photos included .
I have imported my photos, checked them in other places on my page to make sure they work and they work fine but they do not show up within the grid area? My load more icon which is inside the same grid shows up fine. what am I doing wrong here. Ive been stuck for hours! please help TIA
import React from 'react'
import styled from 'styled-components';
import loadmore from 'images/loadmore.png';
import salon1 from 'images/salon1.jpg';
import home from 'images/home.jpg';
function Portfolio() {
return (
<Section id = "portfolio">
<div className = "grid">
<div className = "child-one grid-box"></div>
<div className = "child-two grid-box"></div>
<div className = "child-three grid-box"></div>
<div className = "child-four grid-box"></div>
<div className = "child-five grid-box"></div>
<div className = "child-six grid-box"></div>
<div className = "child-seven grid-box"></div>
<div className = "child-eight grid-box"></div>
<div className = "child-nine grid-box"></div>
<div className = "child-ten grid-box"></div>
<div className = "child-eleven grid-box"></div>
</div>
<div className="portfolio-more">
<span id='loadmore'> Load More</span>
<img src={loadmore} alt= 'load more'/>
</div>
</Section>
);
}
const Section = styled.section`
min-height: 100vh;
padding-bottom: 2rem;
background-color: var(--secondary-color);
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"one one two two"
"one one three four"
"five six seven seven"
"eight six seven seven";
.grid-box {
height: 15rem;
width: 100%;
cursor: pointer;
&:nth-of-type (1) {
grid-area: one;
background: url($home}) no-repeat right center;
background-size: cover;
}
&:nth-of-type (2) {
grid-area: two;
background: url(${salon1}) no-repeat right center;
background-size: cover;
}
&:nth-of-type (3) {
grid-area: three;
background: url(${salon1}) no-repeat right center;
background-size: cover;
}
&:nth-of-type (4) {
grid-area: four;
background: url(${home}) no-repeat right center;
background-size: cover;
}
&:nth-of-type (5) {
grid-area: five;
background: url(${home}) no-repeat right center;
background-size: cover;
}
&:nth-of-type (6) {
grid-area: six;
background: url(${home}) no-repeat right center;
background-size: cover;
}
&:nth-of-type (7) {
grid-area: seven;
background: url(${home}) no-repeat right center;
background-size: cover;
}
&:nth-of-type (8) {
grid-area: eight;
background: url(${home}) no-repeat right center;
background-size: cover;
}
&:nth-of-type (9) {
grid-area: nine;
background: url(${home}) no-repeat right center;
background-size: cover;
}
&:nth-of-type (10) {
grid-area: ten;
background: url(${home}) no-repeat right center;
background-size: cover;
}
&:nth-of-type (11) {
grid-area: eleven;
background: url(${home}) no-repeat right center;
background-size: cover;
}
}
}
`;
export default Portfolio
