[CSS]CSS Grid가 뭘까? 이 글로 종결한다 - CodeHan의 코딩공부
CSS Grid
Flex는 한 방향 레이아웃 시스템이고
Grid는 두 방향(가로 - 세로) 레이아웃 시스템이다.
Grid의 기본적인 구조
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
</div>
부모 요소인 div.container를 Grid컨테이너라고 부르고,
자식 요소인 div.item들을 Gid Item이라고 부른다.
Grid Track : grid의 행 또는 열
Grid Cell : 그리드의 한 칸을 가리킨다
Grid Line : 셀을 구분하는 선(세로선)
Grid Number : Grid라인의 각 번호(가로선)
Grid Gap : Grid 셀 사이 간격
Grid Area : Grid라인으로 둘러싸인 사각형 영역으로, 셀의 집합이다.
grid-templete-row, grid-templete-columns : 그리드 형태 정의
columns와 row의 비율 또는 크기를 표현하는 방법
.container {
grid-template-columns: 200px 200px 500px;
/* grid-template-columns: 1fr 1fr 1fr */
/* grid-template-columns: repeat(3, 1fr) */
/* grid-template-columns: 200px 1fr */
/* grid-template-columns: 100px 200px auto */}
minmax함수
minmax(100px,auto)는 최소 크기는 100px이며 최대는 자동으로 늘어나게 하는 설정이다.
auto-fill : column의 개수를 미리 정하지 않고 가능한 갯수를 최대로 채운다(공간이 남을 수 있음)
auto-fit : column의 갯수를 최대한 채우지만 남는 공간없이 채운다.
Gap : 셀 사이의 간격을 설정한다
row-gap : 10px, column-gap : 20px로 쓸 수 있으며,
축약 시 gap : 10px 20px로 쓸 수 있다.(row > column 순)
Row의 갯수를 알 수 없을때는 어떻게 설정해야 할까?
grid-auto-columns와 grid-auto-rows를 사용한다.
각 셀의 영역 지정 :
.item:nth-child(1) {
grid-column : 1 / 3;
gird-row : 1 / 2;
}
gird-line 1~3번영역 + grid-num 1~2영역을 차지하는 코드이다.
영역 이름으로 그리드 정의
.container {
grid-template-areas:
"header header header"
" a main b "
" . . . "
"footer footer footer";
}
마침표나 none으로 빈칸을 표현할 수 있다.
item요소와 매치할 땐 아래와 같이 매치하면 된다.
.header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
.footer { grid-area: footer; }
정렬
세로 방향 정렬
align-items : strectch(꽉채우기) start(시작지점), center(가운데), end(끝)
가로 방향 정렬
justify-items : strectch(꽉채우기) start(시작지점), center(가운데), end(끝)
두 개 함께 쓰기
place-items : center start / 단축 속성으로 align > justify 순서다.
하나의 값만 작성 시 두 속성에 모두 적용된다.
아이템 그룹 정렬
align-content / justify-content / place-content
Gird 아이템들의 높이를 모두 합한 값이 Grid 컨테이너의 높이보다 작을 때 Gird아이템들을 통째로 정렬하는 속성이다.
stretch(비율에 맞게 채우기) start(시작 지점 몰기) center(가운데로 몰기) end(끝으로 몰기) space-between(시작점에 붙어서 일정한 padding)
space-around(중간에 시작해서 일정한 padding) space-evenly(item과 외부의 모든 padding이 같음)
개별 아이템 정렬
align-self / justify-self / place-self
개별 아이템을 정렬할 수 있는 속성으로 stretch, start, center, end가 있다.
배치 순서 Order
배치 순서를 결정하며 크게 유의미하지않다. 사용에 주의할 것.
z-index
position의 z-index와 동일하며 숫자가 클 수록 위로 올라온다.