그리드 레이아웃에서 항목을 주문하고 정렬하는 방법

이 튜토리얼은 CSS 그리드 레이아웃 내에서 항목 배치 및 정렬 제어를 보여줍니다. 우리는 주문 항목을 탐색하고 개별적으로 그리고 그룹으로 정렬 할 것입니다. . 이전에, 우리는 요소 배치 및 그리드 자동 배치 알고리즘을 포함한 그리드 레이아웃 기본 사항을 다루었습니다. 최적의 데모는 최신 버전의 Firefox (버전 52 이상) 또는 Chrome (버전 57 이상)을 사용하여 기본 그리드 레이아웃 지원을 제공합니다. 주요 개념 :

속성은 그리드의 항목 시퀀스를 지시하여 기본 DOM 순서를 재정의합니다. 이것은 특히 수많은 또는 동적으로 추가 된 항목에 도움이됩니다.

Row-Axis Alignment는 (모든 항목)를 사용합니다. 단일 항목을 정렬합니다. 그리드 내의 모든 항목을 정렬합니다 열 축 정렬은 ,

,

및 전체 그리드 정렬은 그리드 컨테이너에 적용되는

(행 축) 및 , , ,

,

,
• 및 order.
를 가진 항목 순서 제어 : justify-self justify-items 속성은 항목 배치 시퀀스를 지정합니다. 기본적으로 항목은 DOM 주문을 따릅니다. 그러나 는 특히 많은 또는 역동적 인 항목에 유리한 맞춤형 배열을 허용합니다. justify-self 하부 값은 먼저 나타납니다. 예 : justify-items html :
• CSS (그림 스 니펫) : align-self align-items start 기억하십시오 : end로 항목 순서를 변경하면 접근성에 영향을 줄 수 있습니다. 스크린 리더와 키보드 내비게이션은 시각적 변경 사항을 반영하지 않을 수 있습니다. center Row-Axis 정렬 (, ) : stretch
• 는 개별 항목을 정렬하고

  는 행 축을 따라 모든 항목을 정렬합니다. 둘 다 , justify-self, justify-items 및 start 열 축 정렬 (, ) : end center stretch 는 개별 항목을 정렬하고 열 축에 따라 모든 항목을 , ,

  . 전체 그리드 정렬 (, ) : align-self align-items (행 축) 및 (열 축) 전체 그리드를 컨테이너 내에 정렬합니다. , ,

  및

  외에도 ,

  및 .

  결론 : align-self CSS 그리드의 마스터 링 항목 순서 및 정렬은 정확한 레이아웃 제어를 제공합니다. 항목을 재정렬 할 때 접근성 고려 사항을 기억하십시오 align-items (Brevity를 위해 제거 된 FAQS 섹션. 제공된 FAQ는 이미 재 작성 튜토리얼 내에서 잘 덮여 있습니다.)

위 내용은 그리드 레이아웃에서 항목을 주문하고 정렬하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!