grid 레이아웃
먼저 CSS 레이아웃의 흐름을 보자
float는 최근엔 많이안씀
Flex와 Grid는 현재쓰는 레이아웃들의 양대산맥, 서로 특징이 달라서 상황에 따라서 혼용함.
Grid 레이아웃 시스템의 구조
flex의 경우는 동시에 가로 세로를 동시에 정리할 수 없기에
위처럼 위쪽따로 아래쪽 따로, 아래에서도 우측의 3개로 나뉜부분으 또다시 따로
이런식으로 구성할 수 밖에 없음.
위같은 페이지도 grid를 사용하면 한번에 만들어 줄 수 있게됨.
grid 레이아웃 속성
1. 요소의 속성을 grid로 변경
요소에 display: grid 를 주게되면 해당 요소는 grid-container가됨.
자식 요소들은 grid-item이 됨 = 여기까지는 flex와 비슷
grid-item이 내가 설정하는 것에 따라 flex처럼 한 열이나 행에 제한되지 않고 2차원 공간에 좀 더 넓게 퍼질 수 있다는 점이 다름.또한 그리드 에는 grid-line, grid-number 라는 개념이 있음
grid-line : 열과 행을 나누는 각각의 경계
grid-number : 각각의 라인이 몇번째 라인인지를 표시함.
이 경계명과 숫자들이 추후 그리드 아이템들을 배치할 때 중요한 기준 역할을 함.
2. grid-template-rows,columns
위 예시 코드는
해당 그리드 행은 3개 각 행의 규격은 1fr, 2fr, 200px 로 이루어져있음.
rows 뿐 아니라 columns도 똑같이 작성 가능
행이 아닌 열에 대한 세팅
fr 은 fraction , 분수 라는 뜻.
그리드의 해당 영역을 지정한 비율로 쪼개서 나눌 수 있음.
이런식으로도 사용이 가능함.
혼용도 가능함.
예시
grid-column / grid-row
예시
column은 1번 ~ 3번
row는 2번 ~ 3번
