[grid/flexbox] justify-items and align-items 차이란?

gird axis 축의 main 중심이냐 아니면 block 중심이냐 차이

 

justify-items:

• CSS 그리드의 justify-items 속성은 그리드 셀 내의 인라인(main) 축을 따라 그리드 항목을 정렬하는 데 사용됩니다.
• 이 속성은 행 축을 따라 그리드 컨테이너 내부의 모든 그리드 항목의 정렬에 영향을 줍니다.

 The justify-items property in CSS Grid is used to align grid items along the inline (main) axis within their grid cells.
 It affects the alignment of all the grid items inside the grid container along the row axis.

 

 

align-items:

• CSS 그리드의 align-items 속성은 그리드 셀 내의 블록(십자) 축(the block 'cross' axis)을 따라 그리드 항목을 정렬하는 데 사용됩니다.
• 이 속성은 열 축을 따라 그리드 컨테이너 내부의 모든 그리드 항목의 정렬에 영향을 줍니다..

The align-items property in CSS Grid is used to align grid items along the block (cross) axis within their grid cells.
It affects the alignment of all the grid items inside the grid container along the column axis.