코딩스쿨

▶ CSS Grid

CSS Grid Item: 그리드 아이템의 배치와 활용

CSS Grid Item은 CSS Grid Layout에서 그리드 컨테이너 안에 포함된 자식 요소들을 말합니다. 그리드 아이템은 그리드 컨테이너에 정의된 행(row)과 열(column) 안에서 배치되며, 그 위치와 크기를 조정할 수 있습니다. CSS Grid Layout은 그리드 아이템을 유연하게 배치할 수 있는 다양한 방법을 제공하여 복잡한 레이아웃도 손쉽게 구현할 수 있습니다.

이 가이드에서는 CSS Grid Item의 배치와 활용 방법을 소개하겠습니다.

1. CSS Grid Item이란?

CSS Grid Item은 그리드 컨테이너의 자식 요소입니다. 그리드 아이템은 display: grid 속성이 적용된 부모 요소(그리드 컨테이너) 내에서 배치됩니다. 그리드 컨테이너는 행과 열을 정의하며, 각 그리드 아이템은 이 그리드 안에서 위치를 지정하거나 자동으로 배치됩니다.

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
  .item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

설명:

*.container*는 그리드 컨테이너입니다. 3개의 열을 정의하고, 각 열은 동일한 너비(1fr)를 가집니다.
*.item*은 그리드 아이템으로, 그리드 컨테이너 안에서 자동으로 배치됩니다.

2. 그리드 아이템의 위치 지정: `grid-column`과 `grid-row`

*grid-column*과 grid-row 속성을 사용하면 그리드 아이템을 특정 열이나 행에 배치할 수 있습니다. 이 속성들은 아이템이 그리드 안에서 차지할 위치와 범위를 지정합니다.

<style>
  .item1 {
    grid-column: 1 / 3; /* 첫 번째에서 두 번째 열까지 차지 */
    grid-row: 1 / 2;    /* 첫 번째 행에 위치 */
  }
</style>

설명:

grid-column: 1 / 3: 첫 번째 열부터 두 번째 열까지 차지하는 것을 의미합니다.
grid-row: 1 / 2: 첫 번째 행에 위치합니다.

3. 그리드 아이템 크기 확장: `grid-column-span`과 `grid-row-span`

그리드 아이템이 여러 행이나 열에 걸쳐 확장되도록 설정할 수 있습니다. **grid-column**과 grid-row 속성을 사용하여 원하는 행과 열을 넘어서 배치할 수 있습니다.

<style>
  .item1 {
    grid-column: span 2; /* 두 개의 열을 차지 */
    grid-row: span 2;    /* 두 개의 행을 차지 */
  }
</style>

설명:

grid-column: span 2: 그리드 아이템이 두 개의 열을 차지하게 합니다.
grid-row: span 2: 그리드 아이템이 두 개의 행을 차지하게 합니다.

4. 그리드 아이템의 정렬: `align-self`와 `justify-self`

그리드 아이템을 그리드 셀 안에서 정렬할 수 있습니다. **align-self**는 수직 정렬을, **justify-self**는 수평 정렬을 제어합니다. 이를 통해 그리드 아이템을 셀 안에서 가운데, 시작, 끝 등 원하는 위치에 배치할 수 있습니다.

<style>
  .item1 {
    justify-self: center; /* 수평으로 가운데 정렬 */
    align-self: end;      /* 수직으로 하단 정렬 */
  }
</style>

설명:

justify-self: center: 그리드 아이템이 수평으로 셀의 가운데에 정렬됩니다.
align-self: end: 그리드 아이템이 수직으로 셀의 하단에 정렬됩니다.

5. 그리드 아이템을 자동으로 배치하기

CSS Grid는 그리드 아이템을 자동으로 배치하는 기능을 제공합니다. grid-auto-flow 속성을 사용하면 그리드 아이템이 자동으로 채워지거나, 특정 방향으로 배치될 수 있습니다. 기본적으로 그리드 아이템은 왼쪽에서 오른쪽, 위에서 아래로 배치되지만, **grid-auto-flow**를 사용하여 배치 방식을 변경할 수 있습니다.

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: column; /* 열을 먼저 채우도록 설정 */
  }
</style>

설명:

grid-auto-flow: column: 그리드 아이템이 행보다 열을 먼저 채우는 방식으로 배치됩니다.

6. 그리드 아이템에 이름 붙이기: `grid-area`

grid-area 속성은 그리드 아이템에 이름을 부여하여 그리드 템플릿을 정의할 때 쉽게 참조할 수 있도록 합니다. 이는 복잡한 레이아웃에서 특히 유용합니다.

<style>
  .container {
    display: grid;
    grid-template-areas:
      "header header header"
      "main main sidebar"
      "footer footer footer";
  }

  .header {
    grid-area: header;
  }
  .main {
    grid-area: main;
  }
  .sidebar {
    grid-area: sidebar;
  }
  .footer {
    grid-area: footer;
  }
</style>

<div class="container">
  <div class="header">Header</div>
  <div class="main">Main Content</div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>

설명:

grid-template-areas: 그리드 레이아웃을 텍스트 형태로 정의하여 각 그리드 아이템의 배치를 쉽게 설정할 수 있습니다.
grid-area: 그리드 아이템에 이름을 부여하여 그리드 영역을 참조할 수 있습니다.

7. 미디어 쿼리와 그리드 아이템

그리드 아이템을 다양한 화면 크기에 맞게 배치하려면 미디어 쿼리를 활용할 수 있습니다. 예를 들어, 작은 화면에서는 그리드 레이아웃을 한 열로 변경할 수 있습니다.

<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  @media (max-width: 600px) {
    .container {
      grid-template-columns: 1fr; /* 작은 화면에서는 한 열로 변경 */
    }
  }
</style>

설명:

@media (max-width: 600px): 화면 너비가 600px 이하일 때 그리드 레이아웃을 한 열로 변경합니다.

CSS Grid Item은 그리드 컨테이너 안에서 배치된 자식 요소로, grid-column, grid-row, align-self, justify-self 등의 다양한 속성을 사용해 그 위치와 크기를 유연하게 제어할 수 있습니다. CSS Grid Layout은 복잡한 레이아웃을 쉽게 만들고, 반응형 디자인에도 매우 효과적입니다. 그리드 아이템의 다양한 배치 방식과 정렬 기능을 활용하면 더 유연하고 강력한 레이아웃을 구현할 수 있습니다.

코딩 스쿨 Grid

CSS Grid Item

CSS Grid Item: 그리드 아이템의 배치와 활용

1. CSS Grid Item이란?

설명:

2. 그리드 아이템의 위치 지정: grid-column과 grid-row

설명:

3. 그리드 아이템 크기 확장: grid-column-span과 grid-row-span

설명:

4. 그리드 아이템의 정렬: align-self와 justify-self

설명: