css grid를 사용해서 리스트 정렬하기

파일리스트 정렬하면서 아주 레이아웃이 지멋대로 움직여서 수정의 수정의 수정 끝에 완성해따

 

문제

grid 를 사용해서 크기를 늘렸다 줄여도 문제는 없었다.

하지만 가운데 정렬을 위해 맥여놓은 justify-content : center 때문에 컨텐트가 하나만 있는 경우 .. 얘 마저도 가운데 정렬이 됨

 

이때 사용했던 코드

display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
grid-gap: 12px;
justify-content: center;

 

여기서 auto-fit을 auto-fill로 바꿔주고 max-content를 1fr로 바꿔주니 해결이 완료 되었다!

 

해결완료!

display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-gap: 12px;
justify-content: center;

위는 바꾼 최종 코드 이다.

 

 

auto-fit 과 auto-fill의 차이