앞서 공부한 flex는 한 방향 레이아웃 시스템이고 (1차원) grid는 두 방향 (가로 - 세로) 레이아웃 시스템(2차원) 이다. 그래서 gird 컨테이너가 더 복잡한 레이아웃 표현이 가능하다. CSS 디자인 제외하고 기본 설정이다. row 열, 가로 - 2개의 열 설정 columns 기둥, 세로 - 3개의 기둥 설정 각각 px 다르게 하면 어느 부분이 바뀌는지 보고 싶었다,,,!! fr -> fraction 단위를 뜻한다. 같은 비율을 가지게 된다. 하지만 열이 많아지면 계쏙 쓰는 것이 불편해지므로 그때 사용하는 것이 repeat() 이다. row와 column 모두 repeat를 활용한 모습이다. grid-column:1/3;를 통해 item1을 1-3번의 위치까지 늘린 모습이다. 2개의 번호만큼 ..
