grid ( fr, grid-template, place-items )

fr

fr는 픽셀이나 %와 같은 측정 단위이다. 그리고 이건 사용 가능한 공간을 뜻한다.

만약 부모 div의 width값이 500px이라면 grid-template-columns : 1fr 1fr 1fr 1fr로 준 경우에 500을 4등분 하게 되는 것이다.

 

우리가 이전까지 100px이렇게 px단위로 지정해주어왔다.이는 작아보일 지 모르지만 컴퓨터가아닌 핸드폰에서 100px은 엄청 크기 때문에 fr을 사용하여 적절히 표시해줘야할 필요성이 있다.

 

 

grid-tempate

전에 우리가 사용했던 방식은

grid-template-columns : repeat(4,100px)

grid-template-rows : repeat(4,100px)

grid-template-areas = "header header header header" ... 이런식으로 해주었지만

이걸 한번에 해줄 수도 있다.

grid-template:
 "header header header header" 1fr #  header의 height의 크기를 1fr로 지정
 "content content content nav" 2fr #  content와 nav의 height의 크기를 2fr로 지정
 "footer footer footer footer" 1fr # footer의 height의 크기를 1fr로 지정
 / 1fr 1fr 1fr 1fr # 각 컬럼의 크기를 1fr로 지정

 

각 클래스안에 grid-area를 header, content, footer, nav로 지정해두어야 사용이 가능하다.

 

전에 했던 방법과 비교하면 상당히 간단하게 만들 수 있게 되었다.

column을 지정한 1fr 1fr 1fr 1fr 이 부분을 repeat(4, 1fr)로 할 수는 없다. grid-template에서는 repeat가 적용되지 않는다.

 

place-items

flex-box때와 마찬가지로 부모의 div에 justify-items, align-items를 사용해보자. 둘다 기본 값인 stratch가 적용이 되어 있기 때문에 꽉차보인다. 먼저 justify-item을 center로 줘보면 확 달라지는 것을 볼 수 있을 것이다.

기존의 stratch 였기 때문에 가득 차보였지만 이젠 center의 값을 갖고 있어 가운데만 보이게 되었다.

아래로 쭉 내려져 있는 것도 align-items의 기본값인 stratch때문이다. 이 역시 값을 center로 바꾸어줘보자

가득차있는 부분이 사라진 것을 볼 수 있다. 만약 우리가 div.header에 width값과 height값을 주면 기본값인 stratch는 아무 힘을 쓰지 못한다. 

 

flex-box에서 align-items를 사용하면 div들이 wrap되어있을 경우 그 wrap 줄 마다 마다의 간격을 설정해주었지만  

여기서 사용한 것은 줄이아닌 각 grid 내용물 마다 마다를 설정하는 역할을 하는 것 같다.

 

이 두개를 동시에 사용할 수 있는 것이 place-items이다. 첫번째 인자에 수직(align-items)의 옵션을 넣고 두번째 인자에 수평(justify-items)의 옵션을 넣는다.