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: 12px;
}
* cf)
참고로, 관리자모드(F12)로 들어가서, [요소] 탭의
<div class="container"> .. </div> 옆
버튼을 누르면;
위 예제 박스 그리드 컨테이너에서의 행/열 라인 번호들이 표시됩니다..