grid 란
수평선과 수직선이 교차해서 이루어진 집합체이다.
하나의 집합체는 세로 열을 그리고 다른 하나는 가로 행을 정의합니다.
각 요소는 이러한 열과 행으로 된 라인으로 배치할 수 있다.-원하는 레이아웃에 맞도록 px을 이용해서 트랙 크기를 고정시킬 수 있다.
-fr을 지정해 좀 더 유연한 성질의 그리드를 만들 수도 있다.
-아이템은 라인 번호, 이름 또는 그리드 영역을 지정해서 그리드의 정확한 위치에 배치할 수 있습니다.
-콘텐츠에 대응하여 필요에 따라 행과 열을 추가할 수 있다.
-그리드에는 정렬 기능이 있어서 그리드 영역에 어떻게 정렬할지 전체 그리드가 정렬되는 방식을 제어할 수 있다.
-그리드셀에 하나 이상의 아이템을 배치하거나 그리드 영역을 부분적으로 서로 겹치게 할 수 있다.(우선 순위는 z-index로 제어할 수 있다.)
-그리드컨테이너는 display: grid 또는 display: inline-grid를 선언하여 만듭니다.
-그리드의 행과 열은 grid-template-columns (en-US) 및 grid-template-rows (en-US) 프로퍼티로 정의
-1fr 1fr 1fr: fr 단위는 그리드 컨테이너에 남아 있는 사용 가능한 공간의 일정 비율을 나타냅니다. 다음에 정의된 그리드에서는 남아 있는 공간에 따라 확장 및 축소되는 같은 너비의 트랙 3개를 생성합니다.
-repeat은 많은 트랙을 포함하는 커다란 그리드는 repeat() 표기법을 사용하여 트랙의 전체 또는 일부분을 반복해서 나열해 줄 수 있다.
-가로 행은 그리드가 콘텐츠에 맞게 알아서 새로운 행을 만들도록 했습니다. 이렇게 만들어진 행은 잠재적 그리드 안에서 생성된다.
-minmax: 가로 행의 높이가 100픽셀 밑으로 줄어드는 것은 막고 싶지만, 콘텐츠가 300픽셀 높이까지 늘어나면 그에 따라 행의 높이도 같이 늘어나길 원할 때가 있다.
-그리드라인 그리드를 정의할때 라인이 아닌 그리드 트랙을 정의한다.
-display
그리드 컨테이너(Container)를 정의grid-template-rows
명시적 행(Track)의 크기를 정의grid-template-columns
명시적 열(Track)의 크기를 정의grid-template-areas
이름을 참조해 템플릿 생성grid-template
grid-template-xxx의 단축 속성row-gap(grid-row-gap)
행과 행 사이의 간격(Line)을 정의column-gap(grid-column-gap)
열과 열 사이의 간격(Line)을 정의gap(grid-gap)
xxx-gap의 단축 속성grid-auto-rows
트랙의 크기를 정의grid-auto-columns
암시적인 열(Track)의 크기를 정의grid-auto-flow
자동 배치 알고리즘 방식을 정의align-content
그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬justify-content
그리드 콘텐츠를 수평(행 축) 정렬place-content
align-content와 justify-content의 단축 속성align-items
그리드 아이템(Items)들을 수직(열 축) 정렬justify-items
그리드 아이템들을 수평(행 축) 정렬place-items
align-items와 justify-items의 단축 속성display
그리드 컨테이너(Container)를 정의
grid-template-rows
명시적 행(Track)의 크기를 정의
grid-template-columns
명시적 열(Track)의 크기를 정의
grid-template-areas
이름을 참조해 템플릿 생성
grid-template
grid-template-xxx의 단축 속성
row-gap(grid-row-gap)
행과 행 사이의 간격(Line)을 정의
column-gap(grid-column-gap)
열과 열 사이의 간격(Line)을 정의
gap(grid-gap)
xxx-gap의 단축 속성
grid-auto-rows
트랙의 크기를 정의
grid-auto-columns
암시적인 열(Track)의 크기를 정의
grid-auto-flow
아이템이 자동 배치되는 흐름을 결정
row : 아이템을 왼쪽부터 오른쪽으로 채우고 많으면 다음 행으로 넘어간다.
column : 위에서 아래로 채우고 많으면 다음 열로 넘어간다.
dense : 기본형align-content
그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
start : 상단 좌측에 정렬한다.
end : 하단 좌측에 정렬한다.
center : 중앙 좌측에 정렬한다.
space-around : 각 열의 상하 여백을 동일하게 정렬한다.
space-between : 첫 행은 상단에, 마지막 행은 하단에, 나머지는 고르게 정렬한다.
space-evenly : 상하 모든 여백을 고르게
stretch : 상하로 늘려justify-content
그리드 콘텐츠를 수평(행 축) 정렬
start : 좌측 상단에 정렬한다.
end : 우측 상단에 정렬한다.
center : 중앙 상단에 정렬한다.
space-around : 각 열의 좌우 여백을 동일하게 정렬한다.
space-between : 시작점을 좌측, 끝점을 우측, 나머지 고르게 정렬한다.
space-evenly : 모든 여백을 고르게
stretch : normal과 동일하며 가로 축을 가득 채우기 위해 그리드를 늘린다.
place-content
align-content와 justify-content의 단축 속성
align-items
그리드 아이템(Items)들을 수직(열 축) 정렬
start : 상단 좌측에 정렬한다.
end : 하단 좌측에 정렬한다.
center : 중앙 좌측에 정렬한다.
stretch : 세로축을 가득 채운다.justify-items
그리드 아이템들을 수평(행 축) 정렬
start : 아이템들을 그리드 위, 왼쪽으로 각각 정렬
end : 아이템들을 그리드 위, 오른쪽으로 각각 정렬
center : 위 중앙에 정렬
stretch : width를 채우기place-items
align-items와 justify-items의 단축 속성
align-self
개별 아이템 세로 정렬
start : 왼쪽 위
end : 왼쪽 아래
center : 왼쪽 중앙
stretch : 늘리기justify-self
개별 아이템 가로 정렬
start : 왼쪽 위
end : 왼쪽 아래
center : 왼쪽 중앙
stretch : 늘리기place-self : align-self 와 justify-self 를 같이 쓸 수 있는 속성
order : 배치순서
z-index : z축 정렬
