Grid

grid-column, grid-row

grid-area 대신 더 효율 적인 방법, 어디서부터 어디까지 공간 차지할지 정할 수 있다

.header {
  background-color: aqua;
  grid-column: 1 / span 2;
}

.content {
  background-color: pink;
  grid-column: 1 / -1;
  grid-row: 1 / -2;
}

span 은 grid로 쪼개진 cell중 몇개의 cell 을 가질지 정하는 속성이다 && 시작점을 결정할 수 있다

1/-1 시 첫 line 부터 끝 line 까지 채워줄 때 사용한다
끝에서부터 -1, -2, -3 ... 으로 진행되며 몇개의 column이나 row인지 모를 때 유용하다

.grid {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}

.header {
  background-color: aqua;
  grid-column: span 4;
}

.content {
  background-color: pink;
  grid-column: span 3;
  grid-row: 2 / -2;
}

.nav {
  background-color: yellowgreen;
  grid-row: span 2;
}

.footer {
  background-color: black;
  grid-column: span 4;
}