웹사이트 검색

CSS 그리드 레이아웃: Span 키워드


grid-column 또는 grid-row를 사용하여 상위 그리드에 항목을 배치하는 경우 span 키워드를 사용하여 end를 지정하지 않도록 할 수 있습니다. 항목이 둘 이상의 열 또는 행에 걸쳐 있어야 하는 경우 줄.

3개의 열과 2개의 행에 걸쳐 있는 그리드 항목에 대한 다음 CSS 규칙이 주어집니다.

.item {
  grid-column: 2 / 5;
  grid-row: 1 / 3;
}

대신 다음과 같이 span 키워드를 사용할 수 있습니다.

.item {
  grid-column: 2 / span 3;
  grid-row: 1 / span 2;
}

끝 라인을 제공하고 스팬을 시작 라인으로 대신 사용할 수 있습니다. 이 경우 스팬은 반대로 작동하므로 다음도 동일합니다.

.item {
  grid-column: span 3 / 5;
  grid-row: span 2 / 3;
}

여러 줄의 이름이 같은 경우 다음 예와 같이 시작 줄과 끝 줄을 정의할 수 있습니다.

.item {
  grid-column: col 2 / col 7;
  grid-row: content 6 / content 10;
}

항목은 col이라는 두 번째 줄의 열에서 시작하여 역시 col이라는 이름의 7번째 줄에서 끝납니다. 마찬가지로 row라는 6번째 줄에서 시작하여 row라는 10번째 줄에서 끝납니다.

여기서 span 키워드도 도움이 될 수 있으며 다음은 동일합니다.

.item {
  grid-column: col 2 / span col 5;
  grid-row: content 6 / span content 4;
}

Spangrid-area 속성과 함께 사용할 수도 있습니다. 예를 들어 항목을 자동으로 배치하지만 제공된 수의 행과 열에 걸쳐 있기를 원하는 경우:

.item {
  grid-area: span 6 / span 4;
}