🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

Step 4 : grid 자식에게 줄 수 있는 속성들 ( grid cell ) Grid Line -grid-column-start , grid-column-end column을 기준으로 몇 번째 줄부터 몇 번째 줄까지 차지할 지 정의 .item2{ grid-column-start : 2; grid-column-end : 4; } -grid-row-start , grid-row-end row를 기준으로 몇 번째 줄부터 몇 번째 줄까지 차지할 지 정의 .item2{ grid-column-start : 2; grid-column-end : 4; grid-row-start : 1; grid-row-end : 3; } 단축형 .item2{ grid-column : 2 / 4; grid-row : 1 / 3; } ..

Step 1 : Grid vs Flexbox CSS Layout 을 배치할 수 있는 도구로는 Flexbox와 grid 두 가지가 있다. Flexbox의 경우 가로를 기준으로, 세로를 기준으로 1차원적으로 CSS 레이아웃을 배치할 수 있다. 가로로 묶거나 세로로 묶거나 Grid의 경우 가로축과 세로축을 기준으로 2차원적으로 CSS 레이아웃을 배치할 수 있다. Step 2 : Grid Grid는 container(부모)에 주는 속성과 grid cell(자식)에 주는 속성으로 나뉜다. container 에 꾸며줄 수 있는 속성들 - display - grid-template-columns - grid-template-rows - grid-template-areas - grid-gap grid cell에 꾸며줄..