그리드의 자동 흐르는 힘의 고밀도 키워드

우리가 뉴스 웹 사이트의 홈페이지 작업을하고 있다고 가정 해 봅시다. 그리드 레이아웃에서 일부 카드 기반 콘텐츠를 보는 데 익숙합니까? 다음은 전형적인 예입니다. New York Times :

그래, 그런 것.

다른 카드/요소/상자/다른 공간보다 더 많은 공간을 차지하는 데 필요한 모든 카드가있을 것입니다. 주요 기사가 떠 오릅니다.

CSS 그리드는 행과 열이라는 두 방향으로 작업하기 때문에 여기에서 이상적입니다. 또한이 구운 기능이있어 사용 가능한 공간을 기반으로 그리드에 항목을 자동으로 배치합니다. 우리가 부모 요소의 그리드를 단순히 정의하고 다른 것이 없다면, 각 어린이는 열과 행 모두에서 사용할 수있는 공간이 얼마나 많이 이용 가능한지에 따라 동일한 공간으로 할당됩니다.

다시 말해, 우리가 그리드에 항목을 배치하기 위해 엄격하거나 명백 할 필요는 없습니다.

신문 사이트는 실제로 이것으로부터 혜택을받을 수 있습니다. 아마도 페이지의 기사 수는 다를 수 있습니다. 어쩌면 어떤 상황에서는 광고가 표시되지만 다른 상황에서는 표시되지 않을 수도 있습니다. 콘텐츠를 예측할 수 없더라도 CSS 그리드는 항목을 자동으로 제자리에 설치하여 레이아웃을 예측할 수있게 할 수 있습니다.

완벽하게 맞는 9 개의 이야기를 갖는 것은 좋지만 아마도 우리는 하루에 8 명만있을 것입니다. 글쎄, CSS 그리드는 항목이 셀로 균일하게 흘러 들어가도록 덮었습니다.

물건이 약간 끈적 거리는 곳은 여러 행이나 열에 걸쳐있는 항목이있을 때입니다. 특집 기사 아이디어로 돌아가서 행의 마지막 두 열에 걸쳐 있어야한다고 규정합시다.

 . 입학-기능을 갖춘 {
  그리드-컬럼 : 2 / 스팬 2;
}

우리는 언젠가 6 개의 기사를 가질 수 있습니다. 다시 말하지만, 우리의 내용은 예측할 수 없기 때문입니다.

 <div>
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
</div>

걱정하지 마세요! 우리는 그리드의 자동 배치 기능이 우리를 위해 특징 기사를 둘러 볼 것으로 기대합니다. 그러나 우리가 거기에 특징 기사를 떨어 뜨리면 다음은 다음과 같습니다.

흠, 그것은 우리가 생각한 것이 아닙니다. 5 개의 기사가 주요 기사를 중심으로 흘러 나오면 훨씬 나을 것입니다.

실제로 일어나고있는 것은 그리드가 특집 기사의 명시 적 배치를 취하고 소스의 기사가 나온 후 두 번째 및 세 번째 열을 차지할 수있는 충분한 공간이있는 곳을 배치한다는 것 입니다. 그것은 두 번째 줄이 발생하고 HTML에는 다른 기사가 없기 때문에 그 앞에 빈 공간이 있습니다. 그리드는 추천 기사를 말한대로 배치하고 그에 따라 나머지 항목을 흐릅니다.

HTML의 주요 기사 이후에도 그리드가 소스 순서를 무시하고 다음으로 사용 가능한 항목을 흐르도록 강요 할 수 있습니다.

그런 힘을 가진 마법의 너겟은 무엇입니까? 자동 흐름 : 밀도!

 .Articles {
  디스플레이 : 그리드;
  그리드-아우토 플로우 : 밀도;
  그리드 갭 : 1em;
  그리드-템플릿-컬럼 : 반복 (3, 100px);
  그리드-템플릿 열 : 반복 (3, 1fr);
}

우리는 간다! 이제 우리는 그리드에 컨텐츠가 얼마나 많은지에 관계없이 레이아웃이 재치 될 것이라고 확신 할 수 있습니다.

위 내용은 그리드의 자동 흐르는 힘의 고밀도 키워드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!