Notice
Recent Posts
Recent Comments
Link
반응형
«   2025/04   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Archives
Today
Total
관리 메뉴

고양이발일기

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

개발 일기

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

sowish 2021. 8. 26. 13:41
반응형

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

 

문제

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의 차이

반응형
Comments