강의 목표

• grid의 개념
• grid contaniner의 프로퍼티

grid layout의 기본

• 격자 레이아웃
• lines
  • grid를 이루는 모든 행과 열의 선들
• Track
  • 평행한 grid Line 두 줄 사이의 공간
• Area
  • line 4줄로 둘러싸인 공간
  • area안에 더 이상 쪼개지지 않는 한칸을 ⇒ grid cell
• Gap
  • 행 여러 개, 열 여러 개 사이의 간격
  • grid lines의 두께
• grid container, grid items로 구성되어 있음

grid container : template

• 일단 display를 통해 grid 선언을 해줘야 한다.
  • display : grid
    • block 느낌
  • display : inline-grid
    • inline-grid 느낌
• grid-template-rows/columns

  • grid Track의 크기를 정의

  • repeate() 함수를 활용해 반복을 할 수 있다.

  • fr

    • grid container에 남은 공간의 비율을 나타내는 유연한 단위
    • 비율이기 때문에 너비가 변하더라도 비율을 유지한!

  • grid-template-areas

    • grid area의 이름을 할당할 수 있다.

    grid-template-areas: 
    		"hd hd hd"
    		"nav content ad"
    		". ft none";
    }
    
    header { 
    	grid-area: hd;
    	border-color: purple;
    }
    

    • . 이나 none은 빈공간으로 표현 할 수 있다.
• grid-template

  • 한번에 할 수 있다.

    .main {
    	display: grid;
    	grid-template: 
    		"hd hd hd" 128px
    		"nav content ad" auto
    		"ft ft ft" 240px
    		/ 1fr 3fr 1fr;
    }
    
    .main {
    	display: grid;
    	grid-template-rows: 128px auto 240px;
    	grid-template-columns: 1fr 3fr 1fr;
    	grid-template-areas: 
    		"hd hd hd"
    		"nav content ad"
    		"ft ft ft";
    }
    

grid container : gap

• 간격 조절

  grid-row-gap: 16px;
  grid-column-gap: 16px;
  /* 위와 아래의 코드는 동일합니다. */
  grid-gap: 16px 16px;
  /* 모두 동일한 코드입니다. */
  grid-gap: 16px;
  

grid container : auto