[css] 텍스트 길이에 맞춰 너비 조절하기 grid-template-columns: minmax(최소너비, max-content) 1fr;

가나다

가나다라마바사아자차카파타하

 

 

위와 같은 경우, 간혹 "텍스트 길이에 맞춰 너비가 늘어나게 해주세요~" 라는 요청 때문에 <table>로 변경하는 경우가 있다.

더이상 그러지 말자, 우리에겐 grid가 있다.

 

가나다

가나다라마바사아자차카파타하

 

grid-template-columns: minmax(최소너비, max-content) 1fr;

예로, grid-template-columns: minmax(100px, max-content) 1fr; 일 때, grid 첫번째 요소의 기본 너비는 100px이다. 하지만 콘텐츠가 길어 너비가 120px이 된다면, 화면에 그려지는 너비는 grid-template-columns: 120px 1fr과 같다. 결론은 <table>과 이별하자.

 

---

<div class="grid">
   <div>가나다</div>
   <div></div>
   <div>가나다라마바사아자차카파타하</div>
   <div></div>
</div>

.grid {
  display: grid;
  grid-template-columns: minmax(100px, max-content) 1fr;
  gap: 10px;
  width: 300px;
  margin: auto;
  div {
    color: #fff;
    padding: 5px 10px;
    &:nth-child(even) {
      background-color: #06beb6;
    }
    &:nth-child(odd) {
      background-color: #48b1bf;
    }
  }
}