grid-column-start 속성

grid-column-start 속성은 그리드 또는 격자에서 열을 기준으로 요소의 시작 위치를 지정합니다. 속성 값은 양수 또는 음수가 될 수 있습니다. 양수를 지정하면, 요소의 시작 위치는 왼쪽에서 오른쪽으로 계산됩니다. 음수를 지정하면 요소는 역순, 즉 오른쪽에서 왼쪽으로 배치됩니다.

문법

css선택자 {
  grid-column-start: 양수 또는 음수;
}

예시

그리드 내 요소에 시작 위치를 지정해 보겠습니다:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column-start: 1;
}
#elem2 {
  grid-column-start: 2;
}
#elem3 {
  grid-column-start: 3;
}

Результат:

예시

이제 grid-column-start 속성에 음수를 지정해 보겠습니다:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column-start: -1;
}
#elem2 {
  grid-column-start: -2;
}
#elem3 {
  grid-column-start: -3;
}

Результат:

예시

이제 grid-column-end 속성을 이용하여 첫 번째, 두 번째, 세 번째 요소가 첫 번째 행에 위치하도록 합니다. 네 번째 요소는 두 번째 행 전체를 차지하도록 합니다:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column-start: 1;
  grid-column-end: 2;
}
#elem2 {
  grid-column-start: 2;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 3;
  grid-column-end: 4;
}
#elem4 {
  grid-column-start: 1;
  grid-column-end: 4;
}

Результат:

예시

인접한 요소들이 차지하는 열이 겹칠 경우, 각 후속 요소는 아래 행으로 이동합니다. 이 특성을 활용하여 첫 번째 요소는 첫 번째 행, 두 번째 요소는 두 번째 행, 세 번째와 네 번째 요소는 세 번째 행을 차지하도록 해보겠습니다:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column-start: 1;
  grid-column-end: 4;
}
#elem2 {
  grid-column-start: 2;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: 2;
}
#elem4 {
  grid-column-start: 3;
  grid-column-end: 4;
}

Результат:

같이 보기