* minmax(min, max)
- element가 가능한 한 엄청 크길 원하는데, 동시에 엄청 작게 되는것은 원치 않을 때
ex) grid-template-columns: repeat(5, minmax(100px, 1fr));
- 최소 100px, 최대 1fr
* max-content
- content의 크기만큼 cell의 크기를 늘린다.
* min-content
- content의 크기를 최대한 줄여 cell의 크기를 줄인다.
어떻게 content가 보여야 하는지 디자인하는 것이다.
(참고) repeat(), auto-fit, auto-fill, minmax와 결합하여 반응형 디자인을 만들 수 있다.
* min-content & max-content 예시 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="test.css" />
</head>
<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>
<div class="item">This is a very longer long text</div>
<div class="item">This is a very longer long text</div>
<div class="item">This is a very longer long text</div>
</div>
</body>
</html>
.grid {
color: white;
display: grid;
gap: 5px;
grid-template-columns: min-content max-content;
grid-auto-rows: 100px;
margin-bottom: 30px;
}
.item:nth-child(odd) {
background-color: #2ecc71;
}
.item:nth-child(even) {
background-color: #3498db;
}
'Study > HTML,CSS' 카테고리의 다른 글
[CSS_study] display : grid_8 auto-fit & auto-fill (0) | 2022.05.18 |
---|---|
[CSS_study] display : grid_6 place-self & auto columns and rows (0) | 2022.05.17 |
[CSS_study] display : grid_5 place-items & place-content (0) | 2022.05.17 |
[CSS_study] display : grid_4 grid-template & fr (fraction) (0) | 2022.05.17 |
[CSS_study] display : grid_3 (Line Naming) (0) | 2022.05.14 |