강의목표

• grid item에서 사용할 수 있는 프로퍼티

grid item : row, column

• grid lines은 아래의 그림처럼 인덱스가 배정 받는다

• grid-row,grid-column

  • grid-(row/column)-(start/end)의 축약형입니다.

    • grid item의 행방향으로 시작, 끝 위치를 지정합니다.

    .item:nth-child(1) {
      grid-column: 1 / 3;
    
    }
    .item:nth-child(2) {
      grid-row: 1 / 3;
    	grid-column: 3;
    }
    .item:nth-child(4) {
      grid-column: 2 / span 2;
    
    }
    .item:nth-child(3) {
      grid-row: span 2 / 4;
    	
    }
    

  • span은 2칸을 채운다는 의미고 ‘/’을 기준으로 시작,끝점을 잡는다

grid item: area

• grid - area는 이름 부여 말고도 row/column의 단축 속성 역할도 가짐

  grid-area: <Grid Area 이름>
  grid-area: <grid-row-start> / <grid-column-start> /
  					 <grid-row-end> / <grid-column-end>;
  

• <grid-row-start>와 <grid-column-start>를 생략하면 자동으로 기본값인 1이 설정됩니다.

• <grid-row-end>와 <grid-column-end>를 생략하면 자동으로 기본값인 span 1이 설정됩니다.

grid item: self

• grid item을 정렬하는 사용

• justify-self: grid item을 수평 방향으로 정렬합니다.

  • (start, center, end, stretch)

• align-self: grid item을 수직 방향으로 정렬합니다.

  • (start, center, end, stretch)

• place-self

  • justify-self, align-self의 단축 프로퍼티다

  place-self: <align-self> <justify-self>;