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;
}
Span은 grid-area 속성과 함께 사용할 수도 있습니다. 예를 들어 항목을 자동으로 배치하지만 제공된 수의 행과 열에 걸쳐 있기를 원하는 경우:
.item {
grid-area: span 6 / span 4;
}