HTML 태그 배치 관련 질문입니다..

Question

위 사진같은 레이아웃의 페이지를 구성하려고 하는데요, CSS를 깊게 알지 못해서 제가 사용하는 방법보다 효율적인 방법이 있는가 해서 질문글 써봅니다ㅠㅠ 일단 저는 지금까지 위의 레이아웃을 구성하기 위해

의 형태로 구현했었는데, 이런식으로 구현하게 되면 가로 길이가 얼마던지 4 4 4로 배치되잖아요..가로 길이가 늘어나게 되면 5 5 2 이런식으로 바뀌게 구현해보고 싶은데.. .box에 display : inline-block을 사용하게 되면 양 끝 두개에 간격을 맞추는게 어렵더라구요.. 설명이 두루뭉실해서 죄송합니다ㅠㅠ 혹시 제가 모르는 방법이 있다면 답변 부탁드려요..!

ㅇㅇ(192.168) · Answer

inline-block은 진짜 필요한 상황 아니면 안 씁니다 flex 써보세요 그게 더 나을 거 같습니다

brian55 · Answer

display flex;flex-wrap wrap

shintwl · Answer

그런 당신을 위해 준비된 flex가 있죠https://css-tricks.com/snippets/css/a-guide-to-flexbox/

among · Answer

flex나 grid로 구현하시는걸 추천드립니다.

songline · Answer

그런 형태의 레이아웃은 grid로 구현하시면 좋습니다. flex로도 할 수는 있지만 마지막 요소의 정렬 때문에 좀 복잡해지거든요.아래 코드 처럼 작성하시면 될겁니다.만약 좌우 여백 남지 않고 크기가 알아서 조금씩 커지게 하고 싶으면(유튜브처럼) 아래 100px를 minmax(100px, 1fr)으로 바꿔주세요..grid-wrapper { display: grid; grid-template-columns: repeat(auto-fill, 100px); justify-content: center; gap: 16px; }

HTML 태그 배치 관련 질문입니다..

5개의 답변

기술 목록