grid-row, grid-column span에 관한 질문
80
작성자 없음
작성한 질문수 0
grid-column: 2/ 4와 grid-column: 1 / span 3은 동일한 동작을 한다고 하셨습니다.
그러나 Holly Grail 레이아웃 제작(2)에서
.header {
grid-column: 1 / 4;
}
.menu {
grid-row: 2 / 4;
}
.footer {
grid-column: 2 / 4;
}위 코드와
.header {
grid-column: 1 / span 3;
}
.menu {
grid-row: 2 / span 3;
}
.footer {
grid-column: 2 / span 3;
}은 다르게 동작합니다.
왜 같게 동작한다고 알려주셨나요..
답변 2
0
span 방식으로 하면 그리드 레이아웃에 원인불명의 여백이 생깁니다.
반면, span 방식이 아닌 상수 기입 방법으로 그리드 레이아웃을 구성하면 grid-gap 이외에 여백이 생기지 않습니다.
왜 그럴까요?
0
안녕하세요, 인프런 AI 인턴입니다. hwuiinn님.
그리드 레이아웃 속성 중 grid-column: 2 / 4와 grid-column: 1 / span 3이 동일하게 동작한다고 말씀드린 것은, 두 속성이 모두 요소가 몇 개의 그리드 셀을 차지할 것인지 지정하는 역할을 하기 때문입니다. 결과적으로 이 두 설정은 해당 요소가 그리드 순서상 동일한 위치부터 시작하여 동일한 수의 셀을 차지하게 됩니다. 다만, 사용 방식과 컨텍스트에 따라 오해를 일으킬 수 있습니다.
위의 예시에서의 차이점은 grid-row 속성과 관련이 있으며, span을 사용하는 방법이 약간 다르게 보여질 수 있게 하는 요소입니다. span을 사용하게 되면, 명확한 종료점이 아닌 지정된 수의 그리드 단위를 차지하는 방식으로 동작합니다. 하지만 결과는 요소가 차지하는 공간의 개수로 동일하게 조정됩니다.
부가적인 참고자료로, 아래의 링크를 통해 유사한 그리드 배치와 관련된 다양한 해결 방법을 알아보실 수 있습니다:
- Holly Grail 레이아웃에 대한 질문 및 설명: 이 링크에서는 다양한 그리드 레이아웃 적용법 및 실전 활용 팁을 확인하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
중요하진 않지만 설명하신부분에서 안된부분..
0
12
0
안녕하세요, 강좌 5의 피그마 파일은 어디서 볼 수 있나요?
0
45
2
stopPropagation()에 대해서 질문 있습니다.
0
31
2
뉴스페이퍼 싱글템플릿 모바일 화면 디자인 질문
0
30
2
노션에 20.Contact가 없어요
0
37
2
검색엔진 차단 noindex
0
41
2
파트9 강의는 언제 오픈하시나요
0
45
2
ZIP 파일
0
39
2
26강 13F 강의 불일치 및 질문 요청
0
54
3
state 객체로 묶기
0
39
1
XAMPP에서 Apache, DB 재기동 시 접속안되는 문제
0
26
2
Breadth (등락 비율) 분석
0
27
1
26 .강의 프롬프트와 프롬프트파일(part3) 내용이 차이가 있어요.
0
32
2
6-6
0
31
1
Json 플러그인 사용시 variable collection 없음
0
40
2
창 높이가 작을 때 레이아웃 깨짐현상
0
95
1
안녕하세요 두 가지 고민이 있어서 질문 합니다^^
1
345
1
holly grail layout에 대한 질문 입니다.
1
314
1
grid-gap에 대해서 질문드립니다!
1
1511
1
div*6{$} 가 먹히지 않습니다!
2
285
2
에밋 단축키 관련해서 질문 있어요
1
296
2
영상에는 없지만,
1
272
2
PC버전,모바일 버전 다 이상없이 되는데
1
363
4
10:50초경 질문입니다
1
173
1