![[CSS_study] display : grid_7 minmax & min-content & max-content](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbmijry%2FbtrCoWg0qcM%2FAAAAAAAAAAAAAAAAAAAAACsDPEGBGKtz7NkDjEKcGZh1RVh5wkbSSCFxyDm_3_Hh%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1751295599%26allow_ip%3D%26allow_referer%3D%26signature%3DcHxvHe78bEAFnQFf4ML1O1Af%252B8A%253D)
* 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 |