[CSS기초] 12. CSS grid

12. CSS grid - 2차원의 레이아웃 시스템 //CSS flex는 1차원의 레이아웃을 제공한다.

*grid는 flex와 동일하게 container와 items의 개념으로 구분된다 container는 item의 부모요소이며 container 안에 items를 배치할 수 있다.

12.1. display – grid container의 자식요소는 자동으로 items가 된다.

그리드 선언

값	의미
grid	block특성의 grid container를 정의
inline-grid	inline 특성의 grid container를 정의

ex) .container{ display : grid; }

12.1.1. grid-template-rows – 맹시적 행의 크기를 정의,동시에 라인 이름도 정의할 수 있음. fr (fraction, 공간비율)단위를 사용할 수 있다. repeat()함수를 사용할 수 있다.

 

12.1.2 grid-template-column – 명시적인 열의 크기를 정의, 라인의 이름도 지정가능. fr (fraction, 공간비율)단위를 사용할 수 있다. repeat()함수를 사용할 수 있다.

12.1.3 grid-rows/ grid-columns – 그리드 행/열을 하단의 그리드 선을 이용하여 자유롭게 배치할 수 있다.

예제 결과                                                                       그리드 라인넘버

12.1.4. grid-template-areas – 지정된 그리드 영역이름(grid-area)을 참조해 그리드 탬플릿을 생성한다.

*grid-area는 items에 적용되는 속성이다.

예제 결과 1

예제2 결과

12.1.5. row-gap, column-gap, gap – 그리드 사이의 간격을 정의한다

12.1.6. grid-auto-columns, grid-auto-row – 암시적 열의 크기를 지정한다. grid-template-column, grid-template-row으로 명시적으로 정의된 그리드 밖으로 배치되는 경우 grid-auto-column과 grid-auto-row에 정의된 크기로 적용된다.

12.1.6. grid-auto-flow – 배치하지 않은 아이템을 어떤 방식으로 자동 배치할지 설정

*배치한 items는 grid-area를 사용한 items를 의미합니다.

값	의미	기본값
row	각 행 축을 따라 차례로 배치	row
column	각 열 축을 따라 차례로 배치
row dense	각 행 축을 따라 차래로 배치, 빈영역을 메움.
column dense	각 열 축을 따라 차례로 배치, 빈 영역을 메움.

12.1.7. grid – grid-template-xxx, grid-auto-xxx의 단축속성

12.1.8. align-content – 그리드 컨텐츠의 수직 정렬을 정의한다. 그리드 items의 세로 너비가 그리드 컨테이너보다 작아야한다.

값	의미	기본값
normal	stretch와 같음	normal
start	시작점(위쪽)정렬
center	수직 가운데 정렬
end	끝점(아래쪽)정렬
space-around	각 행 위아래에 여백을 고르게 정렬
space-between	첫행은 시작점에, 끝행은 끝점에 정렬하고 나머지 여백은 고르게 정렬
space-evenly	모든 여백을 고르게 정렬
stretch	열 축을 채우기 위해 그리드 item의 사이즈를 늘림

12.1.9. justify-content – 그리드 컨텐츠의 수평축을 정렬한다. 그리드 item의 가로너비가 그리드 container보다 작아야 한다.

값	의미	기본값
normal	stretch와 같음	normal
start	시작점(왼쪽)정렬
center	수직 가운데 정렬
end	끝점(오른쪽)정렬
space-around	각 행 위아래에 여백을 고르게 정렬
space-between	첫행은 시작점에, 끝행은 끝점에 정렬하고 나머지 여백은 고르게 정렬
space-evenly	모든 여백을 고르게 정렬
stretch	열 축을 채우기 위해 그리드 item의 사이즈를 늘림

12.1.10. align-items – 그리드 아이템들을 수직정렬한다.

값	의미	기본값
normal	stretch와 같다	normal
start	시작점(위쪽)정렬
center	수직 가운데 정렬
end	끝점(아래쪽)정렬
stretch	열축을 채우기 위해 늘림

12.1.11. justify-items – 그리드 아이템들을 수평정렬한다. 그리드 아이템의 너비가 자신이 속한 그리드 열의 크기보다 작아야 한다.

값	의미	기본값
normal	stretch와 같다	normal
start	시작점(왼쪽)정렬
center	수직 가운데 정렬
end	끝점(오른쪽)정렬
stretch	열축을 채우기 위해 늘림

12.2. item에 부여되는 속성과 속성값

12.2.1. align-self – 단일 그리드 아이템을 수직 정렬합니다.(item에 개별적용)

*이외에 모든 컨셉은 align-item과 동일함

 

12.2.2. justify-self – 단일 그리드의 아이템을 수평 정렬합니다. (item에 개별적용)

*이외에 모든 컨셉은 justify-item과 동일함

 

12.2.3. order – 그리드 아이템의 배치 순서를 변경할 수 있다.(숫자가 낮을수록 우선순위)

12.2.4. z-index – 아이템이 쌓이는 순서를 정의한다(숫자가 높을수록 위로 올라옴)

12.3. 그리드에서 사용되는 함수들

12.3.1. repeat() 함수 – 행/열의 크기 정의를 반복합니다. 반복되는 획수와 행열의 크기 정의를 인수로 사용합니다. grid-template-rows, grid-template-columns 속성에서 사용되어진다.

12.3.2. minmax() 함수 – 행/열의 최소,최대크기를 정의한다. 첫번째인자는 최소값이고 두번째 인자는 최대값이다. grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns에서 사용된다.

*일반요소의 min-width, max-width와 비슷하다

12.3.3. fit-content() 함수 – 행/열의 크기를 그리드 아이템이 포함하는 내용 크기에 맞춘다. 내용의 최대 크기를 인자로 사용한다.

12.4. grid의 속성값에서 사용하는 단위들

12.4.1. fr – fractional unit의 약어이며 사용 가능한 공간의 비율을 의미한다.

12.4.2. min-content – 그리드 아이템이 포함하는 컨탠트의 최소크기를 의미한다.

12.4.4. max-content – 그리드 아이템이 포함하는 최대크기를 정의한다.

12.4.5. auto-fill, auto-fit – 행/열의 개수를 그리드 컨테이너 및 행/열 크기에 맞게 자동으로 조정한다. repeat() 함수와 같이 사용되며 행/열 아이템 개수가 명확할 필요가 없거나 명확하지 않을경우 유용하게 사용됨(반응형 그리드!!) auto-fill 과 auto-fit은 간단한 차이점을 제외하면 동일하게 작용된다.

*auto-fill과 auto-fit의 차이점

References: heropy.blog