CSS Grid - 컨테이너 설정

 

 

 

justify-content & align-content

   - 바깥쪽 컨테이너가 안쪽 컨테이너보다 커서 남는 여백이 존재해야 적용됩니다.

   - flex 레이아웃에서는 각자 주축/교차축 에 대한 정렬방법을 지정했습니다.

   - grid 레이아웃에서는 행 / 열에 대한 item들의 배치방법을 결정합니다.

   justify-content

      - columns의 배치 방법을 설정합니다.

      - start, end, center, space-between, space-around 등 flexbox에서 쓰는 값을 대부분 사용할 수 있습니다.

   align-items

     - rows의 배치 방법을 결정합니다.

     - start, end, center, space-between, space-around 등 flexbox에서 쓰는 값을 대부분 사용할 수 있습니다.

 

 

 

 

justify-items & align-items

   - 틀 내부에 존재하는 items의 정렬 방법을 결정합니다.

   - grid 틀의 크기보다 item의 크기가 작아 여백이 존재할 때 작동합니다.

   - 기본값은 stretch로, 차지할 수 있는 전체 값만큼 확장됩니다.

   - justify-items를 설정 시 grid 내부 items의 값만큼 재정의됩니다.