내가 쓸려고 정리한 CSS grid

willy·2022년 1월 25일
0

1. justify-items

justify-item 은 그리드 내부의 엘리먼트들의 가로 정렬에 쓰인다

main {
  display: grid;
  grid-template-columns: repeat(2, 200px);
  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과 동일하며 가로 축을 가득 채우기 위해 그리드를 늘린다.

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

참고 : Xedni님의 css그리드 편

profile
같은 문제에 헤매지 않기 위해 기록합니다.

0개의 댓글