grid-column 속성

grid-column 속성은 그리드 또는 그리드 레이아웃에서 열을 기준으로 요소의 시작 및 끝 위치를 설정합니다. 속성 값은 슬래시로 구분된 양수 또는 음수일 수 있습니다. 첫 번째 숫자는 요소의 시작 위치를 나타내며, 두 번째 숫자는 끝 위치를 나타냅니다.

양수를 값으로 지정하면, 요소의 위치는 왼쪽에서 오른쪽으로 계산됩니다. 음수를 지정하면 요소는 역순으로 배치됩니다. 즉, 오른쪽에서 왼쪽으로 배치됩니다.

구문

css선택자 {
  grid-column: 시작 위치 / 끝 위치;
}

예제

그리드 내 요소의 시작 및 끝 위치를 설정해 보겠습니다:

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: 1 / 2;
}
#elem2 {
  grid-column: 1 / 3;
}
#elem3 {
  grid-column: 1 / 4;
}

Результат:

예제

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

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: 1 / -2;
}
#elem2 {
  grid-column: 1 / -3;
}
#elem3 {
  grid-column: 1 / -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: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}
#elem4 {
  grid-column: 1 / 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: 1 / 4;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 1 / 2;
}
#elem4 {
  grid-column: 3 / 4;
}

Результат:

예제

grid-column 속성과 grid-row 속성을 결합해 보겠습니다:

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;
  grid-template-columns: 2fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  height: 300px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 3;
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 1 / 2;
}
#elem4 {
  grid-row: 2 / 3;
  grid-column: 2 / 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 id="elem5">5</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  height: 300px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}
#elem2 {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}
#elem3 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}
#elem4 {
  grid-row: 3 / 3;
  grid-column: 2 / 4;
}
#elem5 {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}

Результат:

같이 보기