CSS 그리드 레이아웃에서 항목의 마지막 행을 중앙에 배치하는 방법은 무엇입니까?

CSS 그리드의 마지막 행에서 중앙 정렬을 달성하는 방법

CSS 그리드를 사용하여 요소를 레이아웃할 때 중앙 정렬을 달성하기가 어려워집니다. 그리드 트랙의 특성으로 인해 마지막 행의 중앙 정렬이 이루어집니다. 그러나 Flexbox는 이러한 정렬 요구 사항에 더 적합한 솔루션을 제공합니다.

항목의 마지막 행을 중앙에 가로로 정렬하려면 컨테이너 요소에 Flexbox 속성을 적용하세요.

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

flexbox -wrap: 랩 속성을 사용하면 필요한 경우 항목이 여러 행으로 흐를 수 있으며, justify-content: 중앙에서는 전체 항목을 기준으로 가로 방향으로 모든 항목을 압축합니다. row.

다음으로 개별 항목에 대한 flex 동작을 설정합니다.

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

여기서 flex: 0 0 calc(16.66% - 20px)는 항목의 크기를 지정하고 모든 항목이 같은 크기. box-sizing: border-box는 정확한 계산을 위해 포함되어야 합니다.

결과적으로 항목은 행 전체에 고르게 분포되고 justify-content: center 속성으로 인해 마지막 행은 중앙에 배치됩니다. 이 접근 방식은 CSS 그리드의 한계를 제거하고 임의 개수의 요소에 대해 마지막 행 항목을 중앙에 배치하는 유연한 솔루션을 제공합니다.

위 내용은 CSS 그리드 레이아웃에서 항목의 마지막 행을 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!