Article
grid-column: 2;
컬럼 라인번호 2(/auto) grid-row: 2;
행 라인번호 2(= auto)
grid-column: 1/3;
컬럼 라인번호 1에서 3까지 grid-row: 1;
행 라인번호 1(/auto)
grid-column: 2;
컬럼 라인번호 2(/auto) grid-row: 2;
행 라인번호 2(= auto)
.container {
display: grid;
grid-template-columns: 1fr 3fr; /* 1:3 비율의 2컬럼 */
gap: 1px;
}
☞ 마지막 열 또는 행 라인을 상대로 -1 값을 사용할 수도 있는데, 이렇게 음수값을 사용하면 끝에서 안쪽으로 카운트할 수 있다 ← 단, 음수 라인번호는 '명시적' 그리드에서만 작동하며, '암시적' 그리드로까지 확장되지는 않는다!
* cf)
참고로, 관리자모드(F12)로 들어가서, [요소] 탭의
<div class="container"> .. </div>
옆
버튼을 누르면;
위 예제 박스 그리드 컨테이너에서의 행/열 라인 번호들이 표시됩니다..