✏️ [CSS] - 2. Grid (2)

📖 오늘은 이전 포스트 Grid Container Properties에 이어 Grid Item Properties에 대해 알아보겠습니다.

📌 Grid Item Properties

✏️ grid-row-start 및 grid-row-end

• 그리드 항목이 수직 축을 따라 시작하고 끝나는 위치를 정의합니다.

• 라인 번호, 키워드(auto, span), 또는 사용 가능한 공간의 일부인 분수를 사용할 수 있습니다.

• 예시:

  .item {
    grid-row-start: 2;
    grid-row-end: span 2;
  }

✏️ grid-column-start 및 grid-column-end

• 그리드 항목이 수평 축을 따라 시작하고 끝나는 위치를 정의합니다.

• 라인 번호, 키워드(auto, span), 또는 사용 가능한 공간의 일부인 분수를 사용할 수 있습니다.

• 예시:

  .item {
    grid-column-start: 1;
    grid-column-end: span 3;
  }

✏️ grid-row 및 grid-column

• 그리드 항목이 수직 및 수평 축을 따라 시작하고 끝나는 위치를 한 번에 설정하는 단축속성입니다.

• 라인 번호, 키워드, 그리고 분수의 조합을 사용할 수 있습니다.

• grid-row: ( grid-row-start / grid-row-end )

• grid-column: ( grid-column-start / grid-column-end )

• 예시:
  

  .item.example1 {
    background-color: lightyellow;
    grid-row: 1 / 3;
    grid-column: 1 / 3;
    }
   .item.example2 {
    background-color: lightpink;
    grid-row: span 2;
    grid-column: 3 / 4;
    }
    .item.example3 {
    background-color: lightblue;
    grid-row: 3 / 4;
    grid-column: span 3;
    }

이러한 속성들은 그리드 컨테이너 내에서 그리드 항목의 정확한 위치를 지정하는 데 중요합니다. 이러한 예시와 이미지는 이러한 속성들이 그리드 컨테이너 내에서 그리드 항목의 레이아웃을 정의하는 방식을 실제로 보여줍니다.

---

✏️ align-self / justify-self

• 그리드 항목을 컨테이너 내에서 수직 / 수평 으로 정렬합니다.
• 값: start, end, center, stretch, baseline.

💡 stretch (기본값): 아이템을 행 전체의 높이 / 넓이 에 맞게 늘립니다.
💡 baseline: 아이템을 행의 기준선에 정렬합니다.

✏️ place-self

• align-self와 justify-self를 한 번에 설정하는 단축속성 입니다.

.item {
  place-self: align-items / justify-items;
}

---

✏️ minmax( ) 함수

• 그리드 행 / 열 의 최소 및 최대 크기를 정의합니다.
• 예시:

.grid-container {
  grid-template-rows: minmax(min-value, max-value);
}

✏️ fit-content

• 그리드 행 /열 의 크기를 콘텐츠에 맞추고 지정된 최대 크기까지 조절합니다.
• 예시:

.grid-container {
  grid-template-rows: fit-content(minimum) fit-content(maximum);
}

---

✏️ auto-fill vs. auto-fit

• auto-fill: 가능한 만큼 많은 트랙을 만들어 사용 가능한 공간을 채웁니다.
• auto-fit: auto-fill과 유사하지만 빈 트랙을 축소합니다.
• 예시:

   ```css
   .container {
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
   }
   ```

  
  

Grid의 속성들에 대해 차근차근 정리를 해보니 조금씩 머릿속에 들어오는 듯 합니다.
정리한 내용은 앞으로 Grid를 활용하면서 다시 또 참고하러 올 수도 있겠네요!