TIL: 27일차 "CSS Grid -2-"

Grid-template

grid-template에선 기본적으로 grid-template-area의 이름을 사용하게 된다.
한가지 다른점은 배치만을 다루던 grid-template-area을 사용함과 동시에, 해당 컨텐츠의 크기도 함께 지정 할 수 있는 차이가 있다.
코드로 만들어서 살펴보도록 하자.

content {
  display: grid;
  height: 50vh;
  grid-template:
  "header header header header" 1fr
  "content content content content" 1fr
  "content content content content" 1fr
  "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr ;
}

과 같이 나타 낼 수 있다.
이렇게 총 16칸의 아이템을 나타낼 수 있고,

content {
  display: grid;
  height: 50vh;
  grid-template:
  "header header header header" 1fr  /* row */
  "content content content content" 2fr /* row */
  "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr ; /* row / column */
}

차지 하는 아이템이 어느정도 크기인가에 따라 단축 하는것도 가능하다.

단, grid-template에서는 repeat를 사용 할 수 없기때문에, column부분은 하나하나 크기를 정해주는 작업이 필요해진다.
이렇게 만들어진 grid는 정해진 크기가 아닌 화면의 크기에 따라 움직이게 되므로, 화면 크기가 변해도 비율이 일정한, 반응형 디자인이 된다.

Grid에서의 justify/align - items

grid에서 justify-items의 기본값은 stretch이다.
때문에 차지하는 칸 안에 다 들어갈 수 있도록 아이템의 크기를 stretch하고 있는것이다.
이 속성은 변경이 가능한데, 이 경우 할당된 칸을 모두 사용 하지 않을 수 있다.
또한 justify속성이기에 기본적으론 main axis(기본 가로축)으로 움직이게 된다.
alin-items도 마찬가지로, justify-items를 cross axis(기본 세로축)으로 움직이게 하는 속성이다.
alin-items의 기본값도 물론 stretch이다.

Grid에서의 justify/align - content

grid에서의 justify/align-content은 items와는 조금 다르게 동작한다.
items는 기본적으로 하나의 셀안에서의 정렬을 다룬다면, content는 grid 전체의 간격을 조정한다.
padding border margin과 같은 식으로 생각한다면, border를 기준에 두고, items는 padding의 영역을, content는 margin의 영역을 다루는것이다.
이 속성을 이용해서, 우리는 각 items간의 간격을 늘릴수도, 줄일 수도 있고, 해당 grid의 위치를 직접적으로 조정 할 수 있게 된다.
start위치 혹은 end위치, 그리고 중앙에 배치하는것도 물론 가능하다.

justify/align - self

grid에서의 justify/align - self는 grid가 있는 부모 요소가 아니라, 자식에게 할당 가능하다.
justify/align - self를 자식 요소에 할당하게 되면, 전체 셀은 움직이지 않고, 해당 속성을 가진 셀만 조정을 할 수 있다.
단, 이 속성으론 grid 전체를 움직일 수는 없고, 하나의 item에만 justify/align - items를 적용 한다 생각하면 된다.

Grid-auto

grid-auto는 먼저 grid-template-column/row를 사용하여 크기와 수를 정한것보다 반영 해야할 HTML 요소가 많을때 유용한 속성이다. 기본적으로 grid-template-column/row에서 100px * 100px로 16칸의 items를 만들었는데, HTML요소가 그보다 많을때는 나머지 요소들이 크기를 가지지 못하기에, 높이를 가지지 못한채로 출력이 된다.
이 상황에서 grid-auto로 값을 주면, 미리 grid-template-column/row로 정한 item 이외의 items에 한해서 column/row를 자동으로 부여해준다.
그렇기때문에 html요소가 얼마나 있던, grid-template-column과 grid-auto-row를 함께 사용하게 되면 두줄의 코드만으로 item의 크기를 동일하게 맞출 수 있는 것이다.

grid-auto-flow라는 속성도 있다.
이 속성은 grid에서 마치 flex-direction처럼 작동한다.
예를 들면, 위의 예시에선 높이를 가지지 못한채 row를 만들면서 여분의 HTML요소들이 출력 되었다면 grid-auto-flow가 column이 되었을때, 이들은 높이는 있지만 길이를 가지지 못한채 옆으로 출력이 되게 된다.
동시에 순서도 바뀌게 된다.
마치 flex-direction인것이다.