display: contents로 gird 문제 해결하기

위의 사진과 같이 gird를 나누기 위해 아래의 코드를 작성하였다.

 

<div class="calendar-grid">
  <div class="date-week">
    <div class="sun">SUN</li>
    <div class="mon">MON</li>
    <div class="tue">TUE</li>
    <div class="wed">WED</li>
    <div class="thu">THU</li>
    <div class="fri">FRI</li>
    <div class="sat">SAT</li>
  </div>

  <div class="date-day"></div>
</div>

 

.calendar-grid {
  height: 240px;
  background-color: white;
  border-radius: 0 0 10px 10px;
  display: grid;
  grid-template-rows: repeat(7, auto);
  grid-template-columns: repeat(7, 1fr);
  grid-template-areas:
    'sun mon tue wed thu fri sat'
    'day day day day day day day'
    'day day day day day day day'
    'day day day day day day day'
    'day day day day day day day'
    'day day day day day day day'
    'day day day day day day day';
}

.date-week {
  display: flex;
  color: #b2b2b2;
  font-size: 12px;
}

.sun {
  grid-area: sun;
}

.mon {
  grid-area: mon;
}

.tue {
  grid-area: tue;
}

.wed {
  grid-area: wed;
}

.thu {
  grid-area: thu;
}

.fri {
  grid-area: fri;
}

.sat {
  grid-area: sat;
}

이렇게 코드를 작성하고 구현 화면을 확인하면 위의 사진이 아닌 아래의 결과가 나오는 오류가 발생한다.

 

이는 '.date-week' 요소가 그리드의 일부가 아니기 때문에 발생한다. '.date-week' 는 단순히 텍스트를 포함하는 요소이지만 그리드 영역을 가지고 있지 않기 때문이다. 

-> 라고 chat gpt가 대답했는데 말이 계속 바뀌는 걸 보니 정확하지 않은듯 하다.

 

display: contents 속성은 속성이 부여된 요소의 자식이 자신의 부모를 무시하고 조부모의 직계 자손인 것 처럼 동작하는 것이다. 즉 위의 코드에서

<div class="calendar-grid">
  <ul class="date-week">
    <li class="sun">SUN</li>
    <li class="mon">MON</li>
    <li class="tue">TUE</li>
    <li class="wed">WED</li>
    <li class="thu">THU</li>
    <li class="fri">FRI</li>
    <li class="sat">SAT</li>
  </ul>

  <div class="date-day"></div>
</div>

'.date-week' 클래스를 가진 div 태그를 ul 태그로 변경하고 그 자식들도 li 태그로 변경한 다음

.date-week {
  display: contents;
  color: #b2b2b2;
  font-size: 12px;
}

display: flex 가 아닌 display: contents 를 적용하면 '.date-week' 요소의 자식인 7개의 li 태그들은 조부모인 '.calendar-grid' 의 자식인 것 처럼 동작하게 되어 원하던 대로 그리드가 적용된다.

 

'.date-week' 요소는 '.calendar-grid' 요소의 자식이기 때문에 '.calendar-grid' 에 그리드를 적용하면 당연히 '.date-week' 에도 그리드가 적용되는 것 아닌가? 왜 적용되지 않았는지 모르겠어서 gpt에게 여러 번 물어봤으나 계속 다른 답변을 해서 확답을 얻지 못했다.

 

그래서 이유를 알기 위해 구글링을 해보니 그리드가 적용되길 원하는 요소들을 감싼 div 태그 때문에 그리드가 제대로 적용되지 않는 경우가 있다고 한다. 더 정확한 것은 자료를 더 찾아봐야 할 것 같다.