그리드 레이아웃에서 "align-items"와 "align-content"의 차이점 이해

그리드 레이아웃 모듈은 두 가지 세트를 소개합니다. 속성, "justify/align-items" 및 "justify/align-content"는 그리드 컨테이너 내에서 그리드 항목과 그리드 자체를 정렬하는 데 서로 다른 역할을 합니다.

그리드 용어 설명

• 그리드 컨테이너: 전체 그리드 공간을 정의하는 상위 컨테이너입니다.
• 그리드: 그리드 공간을 나누는 구조화된 선 그리드입니다. 그리드 컨테이너를 그리드 영역으로.
• 그리드 항목: 그리드 영역 내에 유입 콘텐츠를 포함하는 상자.

항목 정렬 대 Align-content

"align-items" 및 "align-content" 속성은 이름에서 알 수 있듯이 각각 그리드 항목과 그리드를 정렬합니다. 구체적으로:

• justify-content 및 align-content 그리드 컨테이너의 콘텐츠 상자 내에서 그리드 트랙을 정렬합니다.
• justify-self 및 justify-items 인라인 차원에서 그리드 항목을 정렬합니다(기본적으로 가로).
• align-self 및 align-items 블록 차원에서 그리드 항목을 정렬합니다(기본적으로 수직).

저자의 주장 해결

저자의 주장은 " -content" 속성은 "때때로 그리드의 전체 크기가 그리드 컨테이너의 크기보다 작을 수 있음"이 다음을 강조하기 때문에 존재합니다.

• 그리드가 그리드 컨테이너보다 작을 때 사용 가능한 여유 공간.
• "justify-content" 및 "align-content" 속성은 이 공간을 활용하여 그리드를 중앙에 정렬하거나 컨테이너 내에서 정렬할 수 있습니다.
• 반대로, 그리드가 크기가 컨테이너 크기와 같고 여유 공간이 없으며 이러한 정렬 속성은 효과가 없습니다.

Clarity를 ​​위한 일러스트레이션

[W3C의 일러스트레이션 이미지 컨테이너 내에서 그리드를 정렬하는 "justify-content" 및 "align-content"를 사용하여 컨테이너보다 작은 그리드를 표시합니다.]

사양에서 발췌

명확성을 위해 CSS 그리드 레이아웃 사양에서 관련 발췌문이 제공됩니다.

• "그리드 항목은 그리드 항목의 justify-self 속성 또는 그리드 항목의 justify-items 속성을 사용하여 인라인 차원에서 정렬될 수 있습니다. 그리드 컨테이너."
• "그리드 항목의 align-self 속성이나 그리드 컨테이너의 align-items 속성을 사용하여 그리드 항목을 블록 차원에서 정렬할 수도 있습니다."
• "그리드의 외부 가장자리가 그리드 컨테이너의 콘텐츠 가장자리와 일치하지 않으면 그리드 컨테이너의 justify-content 및 align-content 속성에 따라 그리드 트랙이 콘텐츠 상자 내에서 정렬됩니다."