그리드 레이아웃 관련 질문드립니다.
135
投稿した質問数 9
안녕하세요! 강사님!
그리드 레이아웃과 관련되어 질문이 있습니다. 보통 디자이너들은 모바일, 태블릿, 데스크탑을 분리해서 개별적인 그리드 시스템을 활용해서 디자인을 진행하는 것으로 알고있습니다.
<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’ 개념을 이해하는 데 도움이 됩니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
7강 도형+펜툴 중 막혔습니다ㅠㅠㅠ
0
17
1
안녕하세요! 작업 속도를 높여주는 단축키와 플러그인 강의는 없는걸까요?!
0
15
1
part3. spy 쪽 / part3,part4 강의자료
0
31
2
최종 코드
0
37
2
Open AI 결제
0
39
2
figma 파일을 받을 수가 없어요
0
48
1
다운로드 연결이 되지 않을 때는 어떻게 해야할까요?
0
36
1
Visual Studio Code 대신 Pycharm 써도 되나요?
0
42
2
커서, 클로드, 피그마는 모두 유료버전을 사용해야하나요?
0
54
1
구글 서치콘솔 도메인 소유권 확인 실패
0
37
2
antigravity로 하던 작업 이제 visual code로 하면 되는 거죠?
0
57
1
다음 강의 얼른 올려주세요
0
44
2
선생님 섹션 2의 색상 설명 자료는
0
35
2
일반 강의와 차이점?
1
52
1
중요하진 않지만 설명하신부분에서 안된부분..
1
34
1
유틸리티 클래스 외부 링크
1
159
2
반응형 레이아웃 문의 드려요.
1
131
2
메인 폰트 사용법이 궁금합니다.
1
193
2
섹션 1 - 3강 화면이 안나오는것 같네요
1
209
2
text가 border 밖에 형성되는 이유와 해결방법을 알고싶습니다
1
181
1
단축키 질문입니다!
1
226
1
섹션1 Animation에서 실습에 활용되는 svg 파일이 images 폴더 안에 안 들어 있습니다.
1
276
1
저도 윗 분과 마찬가지로 폴더구성이 다릅니다.
1
373
2
첨부파일 누락확인
1
469
2

