[CSS] grid ?

🚀 grid ? 가로, 세로를 정렬하는 레이아웃 시스템

 

 - 그리드를 사용전 , 알아야할 내용!

 

출처:위니브

 

그리드 라인 : 그리드 셀을 구분하는 선 , 가로 세로 번호가 매겨진 선을 잘 보고 따라옵시다!

 

 

1. template

열,행의 넓이, 높이를 설정한다.

 

( 우리가 표를 작성할때 몇행, 몇열로 작성할 지 정하는것 처럼!)

grid-template-columns // 열의 넓이 결정 
gird-template-rows // 행의 높이 결정

// repeat (적용할 트랙의 갯수 , 반복수치)

 

 

2. gap : 말 그대로 간격을 뜻한다

  row - gap  : 행사이 간격

  column-gap : 열사이 간격

  grid-gap : 행,열사이 간격

  gap  : 행,열사이 간격 (IE 지원하지 않음)

 

 

[예제] - 0.5배로 보세요.

See the Pen Untitled by mandelina (@mandelina) on CodePen.

 

 

- 여기서 fr의 단위는 유연한 크기를 갖는다 생각하면 된다.

코드에선 repeat(3,1fr)이라 하였으므로 2줄로 나눌껀데 알아서 간격에 맞게 나누어준다.

 

 

---

 

3.  grid-rows ,  grid-column 

각 셀의 영역을 지정한다. (마치 셀을 병합시킨 모습과 같다.)

 

위에서 그리드 라인을 보았을 것이다.

/*item*/
.item {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-column : 1 / span 2;
}

 

코드를 해석하면 열(cloumn)을 2줄 합친다는 뜻이다.

 

/*item*/
.item {
	grid-column : 1 / 3;
}

 

그렇다면 이코드는 ? 그리드라인을 1~3줄까지 합친다는 뜻이다.

즉 이 코드들은 모두 같은 코드이다.

 

[예제] - 0.5배로 보세요

See the Pen Untitled by mandelina (@mandelina) on CodePen.

 

 

 

🌈그밖에

 

grid 역시나 최신기술이기에 아직 지원하지 않는 브라우저가 몇몇 있긴하다.

 

🔥 회고

 

드디어 레이아웃을 잡는 float , flex , grid 를 모두 배웠다.

애매하게 알았던 부분을 확실히 알고나니 사이다를 마신 기분 . . .

이제 레이아웃 잡는 연습만 잘하면 될 것 같다 ^_^

 

내일은 코드라이언 시간이다. 

빠르게 듣고 밀렸던 포스팅과 과제를 끝내야지 ~!