인프런 커뮤니티 질문&답변
작성자 없음
작성자 정보가 삭제된 글입니다.
grid-row, grid-column span에 관한 질문
작성
·
18
1
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 레이아웃에 대한 질문 및 설명: 이 링크에서는 다양한 그리드 레이아웃 적용법 및 실전 활용 팁을 확인하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.