---
id: 5a9036ee38fddaf9a66b5d34
title: Use CSS Grid units to Change the Size of Columns and Rows
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS网格单位更改列和行的大小
---
## Description
您可以在CSS Grid中使用绝对和相对单位(如px
和em
来定义行和列的大小。您也可以使用这些: fr
:将列或行设置为可用空间的一小部分, auto
: auto
将列或行设置为其内容的宽度或高度, %
:将列或行调整为百分比宽度它的容器。这是在预览中生成输出的代码: grid-template-columns:auto 50px 10%2fr 1fr;
此代码段创建了五列。第一列与其内容一样宽,第二列是50px,第三列是其容器的10%,最后两列;剩下的空间分为三个部分,两个分配给第四列,一个分配给第五个。
## Instructions
创建一个包含三列的网格,其宽度如下:1fr,100px和2fr。
## Tests
```yml
tests:
- text: 'container
类应该有一个grid-template-columns
属性,该属性有三列,宽度如下: 1fr, 100px, and 2fr
。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi), "container
class should have a grid-template-columns
property that has three columns with the following widths: 1fr, 100px, and 2fr
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```