CSS 그리드를 사용하여 마지막 행을 왼쪽 정렬하여 상자를 중앙에 배치하려면 어떻게 해야 합니까?

마지막 행 왼쪽 정렬로 가운데 정렬

이 쿼리는 컨테이너 내의 상자를 수평으로 가운데 정렬하되 마지막 행을 기준으로 정렬하는 문제를 해결합니다. 행을 왼쪽으로 정렬했습니다. 중요한 문제는 일반적인 ul 요소가 콘텐츠에 따라 너비를 맞추는 경향이 있어 수동으로 조정할 여지가 없다는 것입니다.

이 문제를 해결하기 위해 요소 배치를 더 효과적으로 제어할 수 있는 CSS 그리드를 활용할 수 있습니다. 업데이트된 CSS 및 HTML 코드 조각은 다음과 같습니다.

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 here */
  grid-auto-rows: 40px; /* height here */
  grid-gap: 4px;
  justify-content: center; /* this will do the magic */
}

ul li {
  background-color: wheat;
}

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

justify-content: center;를 추가하면 됩니다. ul 요소로 콘텐츠를 중앙으로 이동합니다. 그러나 우리는 CSS 그리드의 고유 속성인 마지막 행에 대해 왼쪽 정렬을 유지합니다.

요소의 너비와 높이를 조정하려면 Grid-template-columns 및 Grid-auto- 행. 디자인 요구 사항에 맞게 div의 패딩 및 너비 속성을 조정하세요.

CSS 그리드의 유연성을 수용함으로써 수동 조정이나 스크립트에 의존하지 않고도 동적 콘텐츠 정렬을 달성할 수 있습니다.

위 내용은 CSS 그리드를 사용하여 마지막 행을 왼쪽 정렬하여 상자를 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!