27 lines
840 B
Markdown
27 lines
840 B
Markdown
---
|
||
title: Create Flexible Layouts Using auto-fill
|
||
localeTitle: 使用自动填充创建灵活布局
|
||
---
|
||
## 使用自动填充创建灵活布局
|
||
|
||
此挑战将通过向_重复_功能添加**自动填充**值来阐述先前的挑战。这将导致div的数量根据视口的大小而不是先前指定的列值进行扩展。在下面的**Before**部分中，指定了**grid-template-column**值“3”。
|
||
|
||
_请记住，以下代码段仅是示例，而不是freeCodeCamp课程的确切挑战。_
|
||
|
||
### 之前
|
||
|
||
```css
|
||
grid-template-columns: repeat(3, minmax(50px, 2fr));
|
||
```
|
||
|
||
### 后
|
||
|
||
```css
|
||
grid-template-columns: repeat(auto-fill, minmax(50px, 2fr));
|
||
```
|
||
|
||
* * *
|
||
|
||
### 资源
|
||
|
||
您可以参考下一页的**语法**部分来查看**自动填充**值： [Mozilla开发者网络](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat) |