grid-column-start in css

예) 4개의 열로 구성된 그리드 컨테이너가 있다고 가정해봅시다.

<div class="grid-container">
  <div class="item item1">1번 아이템</div>
  <div class="item item2">2번 아이템</div>
  <div class="item item3">3번 아이템</div>
</div>

위 HTML을 위한 CSS는 다음과 같습니다.

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px; /* 4개의 열, 각각 100px */
  gap: 10px; /* 아이템 사이에 10px 간격 */
  background-color: #eee;
  padding: 10px;
}

.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
  font-weight: bold;
}

/* 2번 아이템의 시작 위치를 조정 */
.item2 {
  grid-column-start: 3; /* 이 아이템은 3번째 열에서 시작 */
}

이 코드의 동작 원리

1. 그리드 컨테이너 설정:

   • grid-template-columns: 100px 100px 100px 100px;는 컨테이너 안에 4개의 열을 만들고, 각각의 너비를 100px로 설정합니다.
   • 그리드 라인:
     • 열이 4개라면 왼쪽 가장자리부터 오른쪽 가장자리까지 총 5개의 그리드 라인(경계선)이 생깁니다.
     • 이 라인들은 1, 2, 3, 4, 5번으로 번호가 붙습니다.

2. 기본 배치:

   • 특별한 위치 지정 없이 아이템은 첫 번째 그리드 라인부터 차례대로 배치됩니다.
   • 따라서, item1은 1번째 열, item2는 기본적으로 2번째 열, item3은 3번째 열에 위치합니다.

3. grid-column-start 사용:

   • .item2 { grid-column-start: 3; }는 2번 아이템이 기본 순서와 상관없이 3번째 그리드 라인에서 시작하도록 지시합니다.
   • 즉, 아이템은 3번째 열에서 시작하게 됩니다.
   • 만약 grid-column-end 속성과 함께 사용한다면, 아이템이 몇 개의 열을 차지할지도 지정할 수 있습니다.

시각적 예시

• 원래 배치:

  • 아이템1: 1번 열
  • 아이템2: 2번 열
  • 아이템3: 3번 열

• grid-column-start: 3; 적용 후!!

  • 아이템1: 여전히 1번 열
  • 아이템2: 3번 열부터 시작
  • 아이템3: 자동 배치되므로 4번 열(혹은 그리드 설정에 따라 달라짐)

이처럼 grid-column-start를 사용하면,
특정 아이템을 원하는 열에서 시작하게 하여 레이아웃을 보다 세밀하게 조정 가능~