auto-fill또는 중 하나를 표기법 auto-fit의 반복 번호로 사용하십시오 repeat().
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
를 auto-fill반복 횟수로 지정하면 그리드 컨테이너가 해당 축에 명확한 크기 또는 최대 크기를 가지고있는 경우 반복 횟수는 그리드가 그리드 컨테이너를 넘치지 않도록 가능한 가장 큰 양의 정수입니다.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
그리드는 컨테이너를 넘치지 않고 가능한 한 많은 트랙을 반복합니다.
이 경우 위의 예 (이미지 참조) 에서 5 개의 트랙 만 넘치지 않고 그리드 컨테이너에 들어갈 수 있습니다. 그리드에는 4 개의 항목 만 있으므로 나머지 공간에 빈 트랙으로 다섯 번째 항목이 생성됩니다.
나머지 공간 인 트랙 # 6은 명시 적 그리드를 끝냅니다. 이것은 다른 트랙을 배치 할 공간이 충분하지 않았 음을 의미합니다.
auto-fit
auto-fit키워드와 동일하게 동작 auto-fill후 것을 제외하고, 그리드 항목 배치 알고리즘 나머지 공간 내에서 빈 트랙에 붕괴 될 것이다 0.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
그리드는 컨테이너를 넘치지 않고 가능한 한 많은 트랙을 반복하지만 빈 트랙은로 축소됩니다 0.
접힌 트랙은 고정 트랙 크기 조정 기능이있는 것으로 처리됩니다 0px.
auto-fill이미지 예제 와 달리 빈 다섯 번째 트랙은 축소되어 네 번째 항목 바로 뒤에 명시 적 격자가 끝납니다.
auto-fill vs auto-fit
이 둘의 차이점은 minmax()기능을 사용할 때 눈에 .니다.
그리드 컨테이너에서 남은 공간의 일부 를 더하기 minmax(186px, 1fr)위해 항목의 범위를 지정하는 데 사용 합니다 .186px186px
를 사용할 때 auto-fill빈 트랙을 배치 할 공간이 없으면 항목이 커집니다.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
를 사용하면 auto-fit모든 빈 트랙이로 축소되므로 나머지 공간을 채우도록 항목이 커집니다 0px.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
운동장:
자동 채우기 트랙 검사
자동 맞춤 트랙 검사
grid-template-columns: auto auto auto auto;이 경우 작동합니까? =)