[CSS] grid 정리 (3) : align-items, justify-items,

 

 

💡 그리드 속성 몇 개 더 알아보자.

 

기본 세팅!

.container {
  display: grid;
  height: 500px;

  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

 

✳️ align-items : 플렉스박스 방식에서와 유사한 역할을 한다.
그리드 컨테이너 행 트랙의 높이, 수직축(열)을 기준으로 그리드 아이템의 배치를 결정한다.

✳️ align-self : 각각의 그리드 아이템이 어떤 식으로 배치될 것인지를 스스로 결정

속성값	의미
stretch	기본값! 그리드 아이템들이 트랙 높이만큼 확장된다.
start	트랙 상단으로부터 하단을 향해 배치
end	트랙 하단으로부터 상단을 향해 배치
center	할당된 공간의 중심부에 배치

 

⬇️ align-items : start 로 지정하니 행의 시작점에 붙는다.

align-items: start; /* 컨테이너에 지정 */

 

⬇️ align-self : li 에 직접 지정하면!

li:nth-child(2) { align-self: center; }
li:nth-child(4) { align-self: end; }

 

✳️ justify-items : 수평축(행) 을 따라 아이템을 정렬할 때 사용하는 속성
그리드 컨테이너에 지정한다. 아이템에 할당된 열 방향 너비가 기준이 된다.

✳️ justify-self : 그리드 아이템에 지정한다. align-items & align-self 의 관계와 유사

속성값	의미
stretch	기본값! 그리드 아이템들이 트랙 너비만큼 확장된다.
start	트랙 시작점으로부터 끝점을 향해 배치
end	트랙 끝점으로부터 시작점을 향해 배치
center	할당된 공간의 중심부에 배치

 

⬇️ justify-items : end 로 지정하니 열의 끝점에 붙는다.

justify-items: end; /* 컨테이너에 지정 */

 

⬇️⬇️🌟⬇️⬇️ 행, 열을 둘 다 지정해 보면 ~

align-items: center;
justify-items: center;

 

✳️ align-content & justify-content : 플렉스박스 방식과 유사하게 사용
그리드 컨테이너의 수직축과 수평축에서의 아이템 정렬 방식을 결정한다.
컨테이너에 여유 공간이 있을 때 사용할 수 있다.

속성값	의미
start	트랙 시작점으로부터 끝점을 향해 배치
end	트랙 끝점으로부터 시작점을 향해 배치
center	트랙의 중심부에 배치
space-between	트랙에서 일정한 간격을 둔 채 양끝 정렬 배치

 

여유 공간이 생기도록 최댓값에 1fr 이 아닌 100px 을 넣어주자.

.container {
  display: grid;
  height: 500px;

  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
}

 

⬇️ align-content : 수직축, 즉 열 정렬!
(align-items 는 행을 건드려서 헷갈릴 수 있는데, 행의 수직축(열)을 건드리는 거다. )
얘는 컨테이너의 전체 수직축을 정렬한다.

align-content: center; /* 컨테이너에 지정 */

 

❗️ space-around, space-evenly 등 활용 가능

align-content: space-evenly; /* 모든 여백 동일하게 */

 

⬇️ justify-content : 수평축, 즉 행 정렬!

수직축 정렬과 같이 넣어보자!

align-content: space-evenly;
justify-content: space-evenly;