속성 grid-column-end

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

속성 grid-column-end의 중요한 뉘앙스는 지정된 열 번호가 요소의 종료 위치에 포함되지 않는다는 것입니다. 만약 숫자 3을 설정하면, 요소는 첫 번째와 두 번째 열만 차지합니다.

구문

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

예제

그리드에서 요소들의 종료 위치를 설정해 보겠습니다:

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

css#parent {
  display: grid;
  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: 1;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: 4;
}

Результат:

예제

이제 속성 grid-column-start를 사용하여 첫 번째, 두 번째, 세 번째 요소가 첫 번째 행에 위치하도록 만들어 보겠습니다. 그리고 네 번째 요소는 두 번째 행 전체를 차지하도록 합니다:

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;
}

Результат:

예제

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

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

css#parent {
  display: grid;
  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: 1;
  grid-column-end: -3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: -2;
}

Результат:

함께 보기