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