정렬관련 CSS

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 : 기본형