마지막 행을 왼쪽 정렬하는 동안 CSS 그리드 센터 상자를 어떻게 사용할 수 있습니까?

CSS 그리드를 사용하여 상자 가운데 정렬 및 왼쪽 정렬

많은 사용자가 상자를 중앙에 정렬하는 동시에 마지막 행을 정렬하는 데 어려움을 겪었습니다. 왼쪽. 기본적으로 ul 요소는 내용에 맞지 않는 고정 너비를 갖는 경우가 많으므로 중앙 정렬과 왼쪽 정렬을 자동으로 달성하기 어렵습니다.

CSS 그리드 솔루션

이 문제를 해결하기 위해 CSS 그리드를 사용할 수 있습니다. 다음 CSS 속성을 구현하면 상자의 마지막 행을 왼쪽 정렬하면서 상자를 중앙에 배치할 수 있습니다.

div {
  padding: 20px;
  width: 200px;
  border: 1px solid;
  overflow: hidden;
  resize: horizontal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px); /* Width of elements */
  grid-auto-rows: 40px; /* Height of elements */
  grid-gap: 4px;
  justify-content: center; /* Centers boxes */
}

ul li {
  background-color: wheat;
}

HTML 코드

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

설명

grid-template-columns 및 Grid-auto-rows 속성은 그리드 수를 정의합니다. 그리드의 열과 행. Grid-gap 속성은 요소 사이의 간격을 설정합니다. 가운데 정렬과 왼쪽 정렬의 핵심은 justify-content 속성입니다. "center"로 설정하면 그리드 항목이 상위 컨테이너 내에서 사용 가능한 공간의 수평 중앙에 배치됩니다. 이렇게 하면 상자가 중앙에 배치되고 마지막 행이 그리드 끝에 올 때 왼쪽에 정렬됩니다.

위 내용은 마지막 행을 왼쪽 정렬하는 동안 CSS 그리드 센터 상자를 어떻게 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!