● [CSS] grid (자식에게 주는 속성)

● [CSS] grid (자식에게 주는 속성)

• grid-column
• grid-row
• justify-self, align-self

 

먼저, 설명하기 이전에 아래와 같이 부모에는 grid가 적용되어있고 12개의 div를 4개의 fr로 나누어 정렬하였다.

 

• grid-column
  • 각 요소들이 x축에서 얼만큼 차지 할 수 있을지 설정할 수 있다.
  • 첫 번째 사진은 grid-column: 2;  / 두 번째 사진은 grid-column: 1 / span3; 으로 설정하였다.

 

• 또 그리드 형식은 아래와 같이 선을 기준으로 위치를 지정할 수 있다. 
  • 첫 번째 사진은 그리드의 형식을 볼 수 있다.
  • 두 번째 사진은 1이라는 <div>에 grid-column: 2 / -2; 값을 적용한 것이다.
  • 세 번째 사진은  1이라는 <div>에 grid-column: 1 / -1; 값을 적용한 것이다.

선이 정해지는 기준

grid-column: 2 / -2;

grid-column: 1 / -1;

즉, x축 기준으로 꽉 채우고 싶다면 grid-column: 1 / -1; 로 적으면 된다. (늘 개수를 셀 필요가 없다.)

 

• grid-row
  • column와 같이 y축으로도 설정할 수 있다.
  • 첫 번째 사진은 grid-row: 2;
  • 두 번째 사진은 grid-row: 1 / span 2;
  • 세 번째 사진은 grid-row: 1 / 5 ;

grid-row: 2;

grid-row: 1 / span2;

grid-row: 1 / 5;

 

• jusify-self, align-self는 grid안에서도 x축과 y축에서의 시작점을 설정할 수 있다.