CSS 그리드: 그리드 항목

여보세요. 오늘 저는 CSS 그리드의 주요 빌딩 블록 중 하나인 그리드 항목 요소에 대해 이야기하고 싶습니다. CSS 그리드를 사용하여 가장 기본적인 레이아웃을 구축하려면 그리드 항목 요소가 무엇이며 어떤 역할을 하는지 알아야 합니다. 이 콘텐츠가 유용하기를 바랍니다. 의 시작하자.

이 기사는 내 CSS 그리드 소개 시리즈의 일부입니다. 이전 게시물을 확인하려면 전체 목차를 찾을 수 있습니다.

그리드 항목 정의.

Grid-item은 grid-container 내부에 직접 중첩되는 HTML 요소입니다.

<div class="container">
  <div> <!-- grid-item -->
    <div></div> <!-- not grid-item -->
  </div>
</div>

grid-item 요소는 콘텐츠(다른 HTML 요소 또는 텍스트)를 포함할 수 있어야 합니다. 그러나 일부 빈 요소(예: <img/> 또는 <input> )도 그리드 항목으로 처리될 수 있습니다.

<!-- All elements inside this container are grid-items -->
<div class="container">
  <div></div>
  <span></span>
  <img src="..." />
  <input value="..."/>
</div>

중요한 것은 다른 그리드도 그리드 항목 요소의 역할을 할 수 있다는 것입니다. 이를 내포된 그리드라고 하며 향후 기사 중 하나에서 이에 대해 설명할 것입니다.

그리드 내부의 그리드 항목 요소의 기본 배치입니다.

그리드 항목 요소는 그리드 내부에 조직적인 방식으로 배치되어야 합니다. 이에 대한 책임은 소위 자동 배치 알고리즘입니다. 각 그리드 항목은 그리드의 별도 부분에 할당됩니다. 기본적으로 이 그리드 부분은 고유한 단일 그리드 셀입니다.



그리드 항목 요소는 특정 순서로 셀에 할당됩니다. 기본적으로 왼쪽에서 오른쪽으로 첫 번째 행의 모든 ​​셀이 먼저 할당됩니다. 그런 다음 두 번째 행의 셀이 할당되고 모든 그리드 항목이 할당될 때까지 계속됩니다.

그리드 셀 내부의 기본 그리드 항목 정렬.

기본적으로 그리드 항목 요소의 크기는 할당된 셀의 크기와 같습니다. 그리드 항목 요소는 셀 내부의 사용 가능한 공간을 채웁니다.

사용자 정의 그리드 항목 배치 또는 정렬.

언급한 바와 같이 이전에 설명한 그리드 항목 배치/정렬 방법은 자동 배치 알고리즘에서 사용하는 기본 방법입니다. 그러나 이러한 메서드는 개발자가 재정의할 수 있습니다. 예는 다음과 같습니다.

개발자는 동일한 그리드 셀에 둘 이상의 그리드 항목을 할당할 수 있습니다.

개발자는 그리드 항목을 셀에 할당하는 순서를 변경할 수 있습니다.

개발자는 단일 셀보다 큰 그리드 부분에 그리드 항목을 할당할 수 있습니다.

개발자는 그리드 항목의 크기를 늘리거나 줄일 수 있습니다.

개발자는 셀 내부의 그리드 항목 정렬을 변경할 수 있습니다.

사용자 지정 그리드 항목 배치 또는 정렬의 주제는 좀 더 광범위하므로 별도의 기사에서 자세히 설명하겠습니다.

엣지 케이스.

이 기사에서 다루지 않은 grid-item 주제와 관련된 몇 가지 특정 사례가 있음을 언급해야 합니다. 예를 들어:

텍스트를 사용하거나 언급되지 않은 빈 요소를 그리드 항목으로 사용하면 어떻게 됩니까?

셀보다 그리드 항목이 더 많으면 어떻게 됩니까?

이러한 질문은 중요하지만 그리드 항목에 대한 간단한 소개 범위를 벗어납니다. 따라서 이 주제와 관련된 보다 발전된 문제를 논의할 때 곧 답변하도록 노력하겠습니다.


짧은 글 읽어주셔서 감사합니다. 이와 같은 더 많은 콘텐츠를 읽고 싶다면 내 dev.to 또는 계정을 팔로우할 수 있습니다. 또한 어떤 형태로든 피드백을 제공해주세요. 나는 당신의 의견을 읽고 싶습니다. 다음 기사에서 곧 만나요!


추신. 제 작업을 지원하고 싶다면 커피 한 잔에 감사하겠습니다. 고맙습니다. ❤️