grid를 사용해서 이미지 정렬하기. 이미지 줄 바꿈. with.react

 

이미지의 갯수가 3개 이상일 때

자동으로 줄 바꿈 되어 보여주고 싶었다.

 

 

 

 

가로로 배치가 되고, 

정렬 역시 가로로 되고 있다.

 

컴포넌트 구조

 

ViewList.jsx - MainPlace.jsx

MainPlace를 ViewList에서 import해서 뿌려주고 있고,

ViewList에서는 map형태로 호출을 해주고 있다.

 

const Wrapper = styled.div`
  display : grid;
  grid-template-columns : repeat(3, minmax(100px, auto));
  grid-gap: 100px;
  padding : 50px;
  width : 80%;
  padding-top:70px;
`

function MainViewList(props){
  
  return (
    <Wrapper>
      {data.map((place, index) => {
        return (
          <MainPlace key={index.toString()} place={place}/>
        );
      })}
    </Wrapper>
  )
}

map을 뿌려주는걸 전체적으로 감싸는 부분<Wrapper>에서 

grid속성을 추가해준다.

 

이 중에서 중요한 속성은 

grid-template-columns : repeat(3, minmax(100px, auto));

요거인데, 만약 이부분을 따로 부여하지 않으면

grid를 사용해도 무용지물이다.

 

grid-template-columns을 통해 칸 조절을 어떻게 할 것인지를 정해줘야 한다.

 

grid-template-columns : repeat(3, minmax(100px, auto))

이건 3칸을 최소 100px, 최대는 자동으로 잡아준다는 것을 의미한다.

 

단순하게 grid-template-columns : 1fr 2fr 3fr; 처럼 쓸 수도 있는데,

그럼 3칸을 1:2:3의 비율로 보여준다는 것을 의미한다고 한다.

 

 

 

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

1분코딩 유튜브만 봤는데, 블로그 글을 발견..

이해하기 쉽도록 잘 정리 되어 있다.

 

즐찾해두고 자주 들여다 볼 예정.

 

 

위에 첨부한 코드처럼 하면, 

대이터를 가변적으로 불러와도 정렬이 예쁘게 되는 걸 볼 수 있다.