인프런 커뮤니티 질문&답변
작성한 질문수
Grid 수직정렬 문의
작성
·
951
·
수정됨
0
안녕하세요. 영상 잘 보고 있습니다.
문의드리고 싶은 내용은 다음과 같습니다.
3행 1열 의 부모 컨테이너와 자식요소 (.logo, .search-bar, .banner) 일때
.container { display: grid; grid-template-columns : 20% 1fr 20%; }
@media (max-width: 600px) { // 에서 1행 3열로 변동하게 된다면
#header{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.logo, .search-bar, .banner{ grid-column: 1/2; grid-row: 1/2; }
}
자식요소에 grid-column: 1/2; grid-row: 1/2; 적용시키는게 일반적인 방법인가요?
답변 1
1
1분코딩
지식공유자
ㅁ ㅁ ㅁ
이런 식의 가로 배치 형태를
ㅁ
ㅁ
ㅁ
이렇게 세로 배치 형태로 바꾸는 것이라면,
grid-template-columns: 1fr; 한 줄만 적용해도 동작하므로 다른 설정은 필요한 경우에만 해주시면 됩니다. 요소에 grid-column: 1/2; grid-row: 1/2;를 공통으로 적용한다면 요소들을 전부 같은 영역에 묶는다는 의미라서, 일반적인 경우는 아닌 것 같아요!