[CSS] 레이아웃 - grid 속성 : align-content, justify-content( align-items와 차이점)

 

flex방식과 유사하게 사용. 그리드 컨테이너의 수직축과 수평축에서의 아이템 정렬 방식을 결정한다.

컨테이너에 여유공간이 있을 때 사용가능함

 

 

속성값

• start
• end
• center
• space-between : 트랙에서 일정한 간격을 둔 채 양 끝 정렬 배치

(유사 : space-evenly, space-around)

 

 

사용예시)

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

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

    align-content: space-between;
    justify-content: center;

}

 

 

★차이점 알기

align-items는 행(트랙) 안에서 배치방법을 결정

align-content는 컨테이너 전체 안에서 배치방법을 결정