flex-wrap 과 grid
프로젝트를 진행하다 화면상에 카드형태의 아이템들을 반응형으로 컨테이너의 가로길이에 따라 줄바꿈을 하기 위해서 flex-wrap 속성의 wrap 을 사용했었다. 가로길이에 따라 줄바꿈이 되긴했지만 한가지 마음에 안드는 점이 있었다. 오른쪽의 여백이 애매하게 남아 보기에 좋지 않다고 생각했다. justify-content 속성을 center로 주면 전체 아이템이 가운데로 정렬되어 왼쪽과 오른쪽 여백이 같아지지만 아래사진 처럼 가장 마지막 행에서 다른 행보다 아이템의 개수가 적은 행에서도 마찬가지로 가운데정렬이 되어 이것 또한 마음에 들지 않았다. 만들고 싶은 레이아웃을 다시 정의해보면 "카드 아이템들을 담는 컨테이너는 전체 레이아웃에서 "가운데 정렬", 각각의 아이템들은 해당하는 행 내에서 "왼쪽 정렬" 이..
Language/css
2022. 9. 17.
