auto-fit / auto-fill
- auto-fit, auto-fill은 전부 repeat() 함수 안에서만 동작한다.
- 이 둘을 이용하면 responsive website(반응형 웹사이트)를 손쉽게 만들 수 있다. (최고의방법)
- repeat()의 첫번째 인자로 직접 숫자를 쓰는 것보다 auto-fill, auto-fit을 쓰는것이 좋음
auto-flll
- 우리가 정해준 크기 안에서 가능한 한 많은 빈 column(row)를 만들어준다.
- (남는 공간을 빈 cell로 가득 채움)
auto-fit
- 현재 element를 stretch해서 colum(row) 딱 맞게(fit) 해준다.
- 남는 공간에 현재 요소를 stretch해서 가득 채움
<body>
auto-fill
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
auto-fit
<div class="grid">
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</body>
.grid {
color: white;
display: grid;
gap: 5px;
grid-auto-rows: 100px;
}
.grid:first-child {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.grid:nth-child(2) {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.item:nth-child(odd) {
background-color: green;
}
.item:nth-child(even) {
background-color: blue;
}
- 여기서 상자가 추가될 때 auto-fill은 빈 cell에 박스가 채워지고(사이즈 유지)
- auto-fit은 이미 화면이 꽉 차있는 상태에서 개수를 늘려야하니 사이즈가 유동적으로 변함(사이즈 축소)
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를 최소값으로 두면, 창이 줄었을 때, 컨텐츠가 들어갈 수 있는 최소한의 영역만 보존됨
grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end
- grid-column와 grid-row 모두를 입력하는게 너무 많은경우,
다른 속성을 이용하여 줄일 수 있습니다.
- grid-area은 /(슬래쉬)로 구분지어 grid-row-start, grid-column-start, grid-row-end, grid-column-end순으로 입력 가능합니다.
grid-area: 1 / 1 / 3 / 6;
order
- 기본적으로 그리드의 모든요소들은 order 값이 0이지만, z-index와 같이 양수와 음수의 값 모두 설정 가능함
댓글남기기