이번에야말로 CSS Grid를 익혀보자

CSS Grid 완벽 가이드

• grid ⇒ 수평선과 수직선의 교차로 이뤄진 집합체 (행과 열)
• 하나의 집합체는 세로 열을 그리고, 다른 하나는 가로 행을 정의
• 각 요소는 열과 행으로 된 라인을 따라 생성된 그리드에 배치
• 픽셀(px) 단위 사용 ⇒ 트랙 크기가 고정된 그리드 생성 가능 (고정형 레이아웃)
• 퍼센트(%) 혹은 이런 목적에 적합하도록 설계된 새로운 fr 단위의 가변 크기를 지정하여 가변형 그리드 생성 가능 (유연한 성질의 그리드)
  • fr(fraction, 분수) : 부모를 기준으로 상대적인 비율

그리드 정의

• display : grid ⇒ flex와 동일하게 부모요소(grid 컨테이너)에 정의

• 그리드 형태 정의

  • grid-template-rows : 행 갯수, 행 크기 설정
  • grid-template-columns : 열 갯수, 열 크기 설정
  • grid-auto-rows: 기준으로 정한 행열을 초과했을 때 자동으로 크기 설정

  **.container{
  	grid-template-rows: 200px 200px 500px; // 3행
  	grid-template-columns: 200px 200px 500px; // 3열
  }
  
  // 전체크기가 최대 1600px일 경우
  .shop-con ul{
  	grid-template-rows: 200px 200px // 2행 
  	grid-template-columns: 1fr 1fr 1fr 1fr // 4열 (400px씩?)
  	grid-auto-rows: minmax(200px,auto);
  }**