CSS 그리드의 자동 배치 알고리즘에 대한 안내서

이 자습서는 CSS 그리드 레이아웃 모듈의 자동 배치 알고리즘을 자세히 설명하며 속성을 ​​기반으로 요소를 배치합니다. 이전의 기사는 CSS 그리드 기본 사항을 다루었지만 이것은 알고리즘 자체에 중점을 두어 요소가 최종 위치에서 어떻게 끝나는 지 설명합니다.

. grid-auto-flow

주요 개념 :

(로 기본값)에 의해 통제되는 자동 배치 알고리즘은 그리드 항목을 위치시킵니다. 익명 그리드 항목을 처리합니다 (그리드 컨테이너 내에서 직접 스타일링되지 않은 텍스트). 명시 적으로 위치한 요소 ( 사용)가 먼저 배치됩니다 행 위치가 정의되었지만 정의되지 않은 열 위치가 정의 된 요소는 스파 스 (기본값) 또는 밀도가 높은 포장을 사용하여 다음에 배치됩니다. 알고리즘은 암시 적 그리드의 열 수를 결정하여 특정 열 위치 또는 큰 스팬이있는 항목을 수용하기 위해 필요에 따라 확장됩니다. 마지막으로, 나머지 항목은 에 따라 배치되며, 암시 적 그리드의 왼쪽 상단에서 시작되는 자동 배치 커서를 사용하여 배치됩니다.

알고리즘 이해 :

다이빙을하기 전에 이러한 핵심 개념을 이해하십시오 익명 그리드 항목 태그로 싸지 않은 그리드 컨테이너 내의 텍스트는 익명 그리드 항목이됩니다. 직접 스타일을 지정할 수는 없지만 부모 스타일을 물려받습니다. Whitespace는 익명 항목을 생성하지 않습니다 그리드 스팬 :

지정되지 않으면 그리드 스팬 기본값이 1 (1 셀). 암시 적 그리드 : , 및 로 정의 된 그리드는 명시 적 그리드입니다. 암시 적 그리드는 바운드 외부에 배치 된 항목을 수용하기 위해 이것을 넘어 확장됩니다.

다음 설명은
• 를 가정합니다. grid-auto-flow의 경우, 설명에서 "행"및 "열"을 바꾸십시오 1 단계 : 익명 그리드 항목 생성 : 알고리즘은 그리드 컨테이너 내의 텍스트에서 익명 그리드 항목을 생성하여 시작합니다. 이것들은 자극이 없지만 상위 부모 스타일입니다 2 단계 : 명시 적으로 배치 된 요소를 배치 : row
• 를 사용하여 명시 적으로 정의 된 위치를 가진 요소가 먼저 배치됩니다. 알고리즘은
• 3 단계 : 설정 행이있는 요소를 배치하고, 열이 없음. 다음, 지정된 및

  (열 위치는 아님)가있는 요소가 배치됩니다. 알고리즘은 희소 또는 조밀 한 포장을 사용합니다 스파 스 패킹 (기본값) : 요소는 기존 항목을 겹치지 않고 가장 초기에 사용 가능한 열에 배치됩니다. 이 단계에서

  가 배치 된 항목 만 고려합니다.

  grid-row-start 조밀 한 포장 () : grid-row-end 요소는이 단계에 배치 된 동일한 행에 다른 항목 앞에 놓는 것을 의미하더라도 가장 초기의 열에 배치됩니다.

  (스파 스) (밀도) 4 단계 : 암시 적 그리드 열 계산 결정 :
  • 알고리즘은 암시 적 그리드의 열 수를 결정합니다 :

    는 명시 적 그리드의 열 수에서 시작합니다 정의 된 열 위치가있는 항목을 수용하기 위해 열을 추가합니다 나머지 항목 중 가장 큰 열 범위가 현재 암시 적 그리드 너비를 초과하는 경우 열을 추가합니다. 5 단계 : 남은 항목 배치 : 자동 배치 커서 (처음에는 왼쪽 상단)는 나머지 품목을 배치하는 데 사용됩니다. 포장 모드 (드문 또는 조밀)는 배치에 영향을 미칩니다 : 스파 스 패킹 : 커서는 겹치지 않는 위치가 발견 될 때까지 열을 가로 질러 이동합니다. 현재 행에 공간이 없으면 다음 행으로 이동합니다.

  • 조밀 한 포장 : 커서는 각 항목에 대한 암시 적 그리드의 왼쪽 상단으로 재설정되어 가장 초기에 사용 가능한 비 겹치는 위치를 찾습니다. grid-auto-flow: row dense (스파 스) (밀도)

    결론 :
  이 자세한 연습은 CSS 그리드 자동 배치 알고리즘을 명확하게합니다. 다른 레이아웃을 실험하여 이해를 강화하십시오. 핵심 알고리즘 설명이 이미 매우 포괄적이므로 원본 텍스트의 FAQ 섹션은 간결하게 생략되었습니다.

위 내용은 CSS 그리드의 자동 배치 알고리즘에 대한 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!