1. justify-items
: justify-item
은 그리드 내부의 엘리먼트들의 가로 정렬에 쓰인다.
main {
display: grid;
grid-template-columns: repeat(3, 400px);
justify-items: center;
}
- start : 아이템들을 그리드 위, 왼쪽으로 각각 정렬
- end : 아이템들을 그리드 위, 오른쪽으로 각각 정렬
- center : 위 중앙에 정렬
- stretch : width를 채우기
2. justify-content
: justify-content
는 그리드 컨테이너를 화면(height로 설정한 값)에서 가로 정렬하는데 쓰인다.
- start : 좌측 상단에 정렬한다.
- end : 우측 상단에 정렬한다.
- center : 중앙 상단에 정렬한다.
- space-around : 각 열의 좌우 여백을 동일하게 정렬한다.
- space-between : 시작점을 좌측, 끝점을 우측, 나머지 고르게 정렬한다.
- space-evenly : 모든 여백을 고르게
- stretch : normal과 동일하며 가로 축을 가득 채우기 위해 그리드를 늘린다.
3. align-items
: align-items
는 엘리먼트들을 그리드 내부에서 세로정렬에 쓰인다.
- start : 상단 좌측에 정렬한다.
- end : 하단 좌측에 정렬한다.
- center : 중앙 좌측에 정렬한다.
- stretch : 세로축을 가득 채운다.
4. align-content
: align-content
는 그리드 컨테이너를 화면 전체(height로 설정한 값)에서 세로 정렬하는데 쓰인다.
- start : 상단 좌측에 정렬한다.
- end : 하단 좌측에 정렬한다.
- center : 중앙 좌측에 정렬한다.
- space-around : 각 열의 상하 여백을 동일하게 정렬한다.
- space-between : 첫 행은 상단에, 마지막 행은 하단에, 나머지는 고르게 정렬한다.
- space-evenly : 상하 모든 여백을 고르게
- stretch : 상하로 늘려
5. justify-self
: 위에서 전체 그리드를 정렬했고 이제 각각의 엘리먼트들을 정렬해본다.
6. align-self
: 위에서 전체 그리드를 정렬했고 이제 각각의 엘리먼트들을 정렬해본다.
- start : 왼쪽 위
- end : 왼쪽 아래
- center : 왼쪽 중앙
- stretch : 늘리기
7. grid-auto-flow
: 자동 배치
- row : 아이템을 왼쪽부터 오른쪽으로 채우고 많으면 다음 생으로 넘긴다.
- column : 위에서 아래로 채우고 많으면 열을 작성한다.
- dense : 기본형