[HTML & CSS] Grid 태그 기초
Grid 태그 기초
CSS 그리드의 두 가지 주요 요소는 wrapper(부모 요소)와 items(자식 요소)입니다.
wrapper는 감싸주는 그리드, item들은 그리드 내부의 요소들입니다.
.wrapper{
display: grid;
}위와 같이 부모 div를 grid로 바꾸려면, display 속성을 grid로 설정하면 됩니다.
grid-template-row와 grid-template-column를 이용하여
행(Row)과 열(Column)의 너비 높이를 지정해줄 수 있습니다.
그런데, 3x3를 정의했지만 3x2 만 표시되어있습니다.
여기서 3개의 아이템을 추가하면 3x3을 보일 수 있습니다.
grid-column-start, grid-column-end,
grid-row-start, grid-row-end
속성들을 이용하여 Grid 라인을 지정하면 위와 같이 나타납니다.
제일 왼쪽 라인이 1로 지정되기 때문에
위 예제에서는 제일 오른쪽 라인이 4입니다.
Author And Source
이 문제에 관하여([HTML & CSS] Grid 태그 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kyoung-jnn/HTML-CSS-Grid-태그-기초저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
