css-24: min-content / max-content
min-content / max-content
<body>
<div class="grid">
<div class="item">This is a very long text</div>
<div class="item">This is a very longer longer long text</div>
<div class="item">This is a text</div>
<div class="item">
Not long at all, or maybe, who knows? Maybe you know, love you.
</div>
<div class="item">This is a very longer long text</div>
</body>
.grid {
color: white;
display: grid;
gap: 5px;
grid-auto-rows: 100px;
}
.grid {
grid-template-columns: repeat(5, minmax(max-content, 1fr));
}
.item:nth-child(odd) {
background-color: green;
}
.item:nth-child(even) {
background-color: blue;
}
- div 내부 컨텐츠에 따라서 셀의 크기를 조절하는 것.
- Grid-template-columns: max-content min-content; //1열은 컨텐츠를 나타내는 최대 사이즈로, 2열은 최소 사이즈로 열의 너비를 조정
- Minmax와 결합가능
- Grid-template-columns: repeat(auto-fit, minmax(20px,max-content));
- Max-content를 최소값으로 두면, 컨텐츠를 다 싸고 있는 영역으로 최소값이 설정
- Min-content를 최소값으로 두면, 창이 줄었을 때, 컨텐츠가 들어갈 수 있는 최소한의 영역만 보존됨
댓글남기기