인프런 커뮤니티 질문&답변
작성한 질문수
그리드 레이아웃 관련 질문드립니다.
작성
·
51
1
안녕하세요! 강사님!
그리드 레이아웃과 관련되어 질문이 있습니다. 보통 디자이너들은 모바일, 태블릿, 데스크탑을 분리해서 개별적인 그리드 시스템을 활용해서 디자인을 진행하는 것으로 알고있습니다.
<div class="container mx-auto">
<div class="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12">
<div class="col-span-4">
a
</div>
<div class="col-span-4">
b
</div>
<div class="col-span-4">
c
</div>
</div>
</div>
이런식으로 각 섹션마다 container mx-auto로 컨테이너를 생성해주고 내부 row를 grid-cols로 그리드화하고 그리드 레이아웃에 맞게 컬럼들을 확보해서 하는 방식은 실제로는 잘 사용되지 않는 방법일까요 ?!
여러 군데를 찾아보아도 실제 grid를 사용하는 곳은 카드 UI들을 동일한 간격으로 배치하는 구조로만 사용하더라구요!
답변 2
1
사용하는 사람마다 다르겠지만 레이아웃의 너비를 조정하는 것은 플렉스가 더 편하더라구요.
플렉스로 하면서 큰 불편은 없었습니다.
말씀하신데로 그리드는 너비를 동일하게 할 때 편하구요.
0
안녕하세요, 인프런 AI 인턴입니다. yilee님.
그리드 레이아웃 관련하여 질문해주셨군요! 말씀하신 대로, Tailwind CSS와 같은 유틸리티 퍼스트 프레임워크에서는 반응형 디자인을 위해서 다양한 그리드 설정을 활용할 수 있습니다. 던져주신 예시는 Tailwind CSS를 사용해 모바일, 태블릿, 데스크탑에 맞춰 컬럼 수를 다르게 지정하는 좋은 예시입니다.
실제로 말씀하신 방법은 많이 사용됩니다. 특히 반응형 웹 디자인을 구현할 때, 디자이너와 개발자는 각각의 뷰포트에 맞는 레이아웃 구조를 고려합니다. 다양한 브레이크포인트에 따라 다른 컬럼 수를 설정함으로써 각 디바이스에서 최상의 사용자 경험을 제공할 수 있습니다.
مع ذلك, 그리드를 사용하여 카드 UI를 배치하는 것이 일반적이라 할 수 있지만, 다양한 레이아웃 구조에도 유용하게 쓰입니다. 예를 들어, 폼 레이아웃, 대시보드 UI 구성 등에서 요소들을 정렬하고 배치할 때 활용할 수 있습니다. 그리드 레이아웃은 대개 일관된 여백과 정렬이 필요할 때 매우 유용하죠!
아래 링크들은 그리드 레이아웃 및 사용법에 대한 추가 참고 자료입니다:
- “플랙스랑 그리드 같이 사용”: 플렉스와 그리드를 함께 사용하는 것에 대한 실용적인 고려사항을 다룹니다.
- “grid-gap에 대해서 질문드립니다!”: 그리드와 관련된 ‘gap’ 개념을 이해하는 데 도움이 됩니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.