grid-row, grid-column span에 관한 질문
77
작성자 없음
投稿した質問数 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 레이아웃에 대한 질문 및 설명: 이 링크에서는 다양한 그리드 레이아웃 적용법 및 실전 활용 팁을 확인하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
6-6
0
11
1
Json 플러그인 사용시 variable collection 없음
0
14
1
배리어블 목록 없음
0
23
3
Token 등록 방법 문의
0
21
1
6-6 실습 문의
0
24
2
섹션5 노션링크 는 따로 없나요?
0
30
2
Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.
0
33
2
첨부자료 Part 4 코드 확인 부탁드리겠습니다.
0
29
2
선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서
0
24
1
퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.
0
54
2
claude plugin 방법 자세히 부탁드려요
0
40
2
강의에 적용한 스크립트를 받아 볼수 있을까요?
0
40
2
28강 프롬프트가 없습니다.
0
39
2
최근 코테, 과제 테스트 트렌드
0
69
2
노션 25 인터렉션 구현 파트 안 보입니다!
0
39
2
창 높이가 작을 때 레이아웃 깨짐현상
0
94
1
안녕하세요 두 가지 고민이 있어서 질문 합니다^^
1
341
1
holly grail layout에 대한 질문 입니다.
1
310
1
grid-gap에 대해서 질문드립니다!
1
1511
1
div*6{$} 가 먹히지 않습니다!
2
281
2
에밋 단축키 관련해서 질문 있어요
1
291
2
영상에는 없지만,
1
269
2
PC버전,모바일 버전 다 이상없이 되는데
1
360
4
10:50초경 질문입니다
1
169
1