일요일에도 컴퓨터 앞에 앉자마자 상품리스트를 4개씩 배열을 어떻게 할지 구글링을 해보다가 든 생각, '아니 금요일날 과제로 나왔던 Monsters 파일이 4개씩 배열이였네?'
당연히~ JS파일에서 배열을 직접 건들여서 나오는줄 알았는데 JS파일 어디에도 4개씩 배열하라는 말이 없었다...그래서 hoxy..?하면서 본 .scss파일에서 찾은 해답
.card-list {
width: 85vw;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 20px;
}display: grid grid-template-columns: 1fr 1fr 1fr 1fr
이게 뭔지 일단 w3schools.com에서 검색해보았다.
일단 display: grid 를 선언해놓고 grid-template-columns에 설정해주는것들은 columns의 갯수 갔다. auto auto auto라고 했을때는 3개의 column였는데 auto auto auto auto 라고 설정했을때는
4개가 되어버렸다~ auto는 내부 컨텐츠에 맞게 알아서 사이즈가 조정되는것 같은데 fr은 무엇인지 찾아보았다.
fr은 fraction의 줄임말으로 총fr을 더한후 각각 배정되어 있는 만큼의 크기를 할당 받는다.
예를들어 밑의 그림같이 grid-template-columns: 1fr 2fr 1fr 일경우, 일단 3개의 fr이 있으니 3개의 columns가 만들어지고 1fr+2fr+1fr =4fr, 총 4fr중, 첫번째 column은 1/4fr인 .25만큼의 크기를 할당받고 두번째 column은 2fr/4fr = .50 즉, 총 크기의 반만큼 할당 받고, 세번째 column은 첫번째와 똑같이 1/4fr만큼을 할당 받는다.
아무튼 이걸 이용해서 나의 컴포넌트를 감싸고 있는 .zookContainer에 grid효과를 주었더니
.zookContainer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
드디어 column이 4개~ 일단 글이 길어지니 이번 글은 여기서 끝!
