코딩스터디/CSS
[CSS] grid 그리드 배우기
*grid와 flex 차이점 flexbox는 한 방향 레이아웃 시스템(1차원) grid는 두 방향 레이아웃 시스템(2차원) -> grid는 flexbox보다 더 복합적인 레이아웃 표현이 가능! 그리드 사용 display grid 레이아웃을 위한 html의 기본 구조는 container(부모)와 item(자식)으로 이루어져 있음. flex와 마찬가지로 container에 display : grid; 를 입력해줌으로 시작! .container { display: grid; } 그리드 형태 정의 >각 row (행) 높이 / column (열) 넓이 지정하기 .container { grid-template-columns: 200px 200px 500px; grid-template-columns: 1fr 1fr ..
2021. 3. 16.
