CSS 심화 공부(14) - grid(3) : row-start, end / column-start, end
플렉스 박스에서 플렉스 컨테이너와 플렉스 아이템으로 나뉜 것처럼
그리드 또한 컨테이너와 아이템이 있다.
그중 아이템의 위치와 크기를 정밀하게 제어하는 방법이 있는데 그것이 바로
grid-row-start, grid-row-end, grid-column-start, grid-column-end 속성이다.
grid-row-start, grid-row-end, grid-column-start, grid-column-end
그리드 컨테이너에 위치할 아이템의 위치를 정하는 속성이다.
예를 들어 그리드 컨테이너가 체스 판이라고 한다면 그리드 아이템은 체스 말이다.
해당 속성은 체스 말을 체스판의 어느 위치에, 어떤 크기로 놓을지 결정하는 역할을 한다.
때문에 해당 속성을 사용할 경우 좀 더 유연하게 레이아웃을 배치할 수 있게 된다.
속성
기본적으로 번호는 1부터 시작한다.
(음수를 취할 경우 끝에서부터 1번째(-1), 2번째(-2) 식으로 역방향으로 위치를 지정할 수도 있다.)
1. grid-row-start:
- 그리드 아이템의 행 시작 위치를 지정합니다.
- 그리드 라인 번호 또는 span 키워드를 사용하여 위치를 지정할 수 있습니다.
2. grid-row-end:
- 그리드 아이템의 행 끝 위치를 지정합니다.
- 그리드 라인 번호 또는 span 키워드를 사용하여 위치를 지정할 수 있습니다.
3. grid-column-start:
- 그리드 아이템의 열 시작 위치를 지정합니다.
- 그리드 라인 번호 또는 span 키워드를 사용하여 위치를 지정할 수 있습니다.
4. grid-column-end:
- 그리드 아이템의 열 끝 위치를 지정합니다.
- 그리드 라인 번호 또는 span 키워드를 사용하여 위치를 지정할 수 있습니다.
그리드 라인
그리드 로우와 그리드 컬럼을 쉽게 구분하기 위한 가상의 선이다.
시작 지점이 1이기 때문에 1부터 시작한다는 것을 생각하면된다.
예시 1 : 아이템이 행만 차지할 경우
예시를 보면 이해가 쉽다.
<div class="grid-container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
총 9개의 아이템이 있다.
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
background-color: #eee;
padding: 20px;
border: 1px solid #ccc;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}그중 아이템 1에 grid-column-start: 1; grid-column-end: 3; 속성을 적용했다.
그렇다면 아이템1이 1~3열까지의 공간을 차지하도록 바뀌게 된다는 의미다. 실제로 적용하게 되면 1이 차지한 공간만큼 다른 아이템들이 밀려난 것을 확인 할 수 있다.
실제 현실에서도 체스판에 1개의 기물을 놓는다면 원래 그 자리에 있던 기물이 옆으로 밀려나는 것처럼 말이다.
예시2 : 아이템이 열과 행을 모두 차지할 경우
그렇다면 item1코드를 다음과 같이 바꾼다면 어떻게 될까?
.item1 {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 3;
}아이템 1이 차지한 공간 만큼 다른 모든 아이템이 밀려난 것을 볼 수 있다.
예시3 : 아이템의 시작 위치가 다를 경우
그렇다면 아예 시작 라인을 다르게 하면 어떻게 될까?
.item1 {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 4;
}
이렇게 시작 라인을 바꿀 경우 아예 아이템의 위치 자체도 그만큼 밀려나서 다른 아이템들이 더 위쪽으로 올라온 것을 확인 할 수 있다.
음수 사용
앞서 말했듯이 시작과 끝 위치에 음수를 사용하는 방법 또한 있다. 이는 시작 번호로 부터 역수를 취하면 된다.
.item1 {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: -3;
grid-column-end: -1;
}
