CSS Grid를 정리하면서

flex는 1차원 레이아웃 구조를 만들 수 있고,

Grid는 2차원 레이아웃 구조를 만들 수 있다.

 

Grid container에서 사용하는 CSS

그리드 사용법

display : grid

인라인 그리드

dsiplay : inline-grid

 

행과 열 지정하는 방법

grid-template-rows : 100px 100px;
grid-template-columns : 200px 200px 200px;

 

전체 컨테이너의 비율로 행과 열을 지정하는 방법

grid-template-columns: 1fr 1fr 1fr;

 

위 방식을 간편하게 사용하는 방법 

grid-template-columns: repeat(3,1fr);

 

1fr을 사용하면서 만약 grid요소에 내용이 없다면 grid요소는 자동으로 최소 높이가 지정이된다.

즉, 요소안의 컨텐츠가 없으면 0의 높이를 가진다.

그래서 1fr과 같은 단위를 사용하려면 grid로 설정한 요소에는 너비나 높이가 설정이 되어있어야한다.

 

grid의 명시적 template와 암시적 template

//명시적
grid-template-rows: 200px 200px;
grid-template-columns : 200px 200px;
//암시적
grid-auto-rows : 100px;

- 만약 명시적으로 지정한 grid 요소에 grid item이 넘칠 경우 

grid-auto-rows 또는 grid-auto-columns로 설정한 값으로 지정이된다.

 

 

grid-auto-flow : dense;

- grid item 요소들이 만약 암시적인 속성으로 인해 빈 공간이 생겼을 때 

위 속성을 이용하면 빈 공간을 메워주는 형식으로 만들어준다.

- 기본 값은 row이다.

- 만약 column으로 지정하면 열축을 기준으로 메워주게 된다.

 

현재 dense 속성은 아래와 같이 되어있는데 row가 생략되어있는 것이다.

grid-auto-flow : row dense

만약 row대신 columns로 바뀌면 

열축을 기준으로 dense가 가능해진다.

 

 

display: grid도 justify-content와 align-content 사용이 가능하다!

justify-content

- justify-content의 기본 값은 normal,  stretch을 사용해도 동일

 

justify-content : space-evenly; 속성이 추가된다.

- 행축의 모든 여백을 동일하게 해준다.

 

align-content

-align-content의 기본 값은 normal, stretch을 사용해도 동일

 

justify-content : space-evenly; 속성이 추가된다.

- 열 축의 모든 여백을 동일하게 해준다.

 

 

display: grid도 justify-items와 align-items 사용이 가능하다!

해당 속성은 하나의 그리드 영역내에 여러 셀이 있고

한 셀 안의 item이 그 셀 보다 크기가 작아서 행축이나 열축에 빈공간이 생기면

내부 셀의 정렬을 할 수 있게한다.

 

 

grid-template-areas

- 먼저 각 grid item에 아래와 같이 grid-area속성을 임의의 이름으로 지정해줘야한다.

-grid-template-areas를 아래와 같이 사용한다.

마침표 대신 none도 가능하다.

-그럼 아래와 같이 그려지게 된다.

-grid-gap: 10px 속성을 추가하면 아래와 같이도 가능하다.

-gird-gap : 10px 40px로 적용하면 아래와 같이 행과 열의 gap을 다르게 줄 수 있다.