2018-10-12 15:37:13 -04:00
|
|
|
---
|
|
|
|
title: Create a Column Gap Using grid-column-gap
|
|
|
|
---
|
2019-07-24 00:59:27 -07:00
|
|
|
# Create a Column Gap Using grid-column-gap
|
2018-10-12 15:37:13 -04:00
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
---
|
|
|
|
## Problem Explanation
|
2018-10-12 15:37:13 -04:00
|
|
|
This challenge requires you to add a gap of 20px between all the columns of the CSS Grid in .container.
|
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
|
|
|
|
---
|
|
|
|
## Hints
|
|
|
|
|
|
|
|
### Hint 1
|
2018-10-12 15:37:13 -04:00
|
|
|
|
|
|
|
To add the gap between the columns of a grid, we use:
|
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
```css
|
2018-10-12 15:37:13 -04:00
|
|
|
grid-column-gap: parameter;
|
2019-07-24 00:59:27 -07:00
|
|
|
```
|
2018-10-12 15:37:13 -04:00
|
|
|
|
|
|
|
where parameter is the required gap.
|
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
|
|
|
|
---
|
|
|
|
## Solutions
|
|
|
|
|
|
|
|
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
2018-10-12 15:37:13 -04:00
|
|
|
|
|
|
|
Since the challenge has you adding a gap of 20px, you would add the following line to the .container CSS codeblock.
|
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
```css
|
2018-10-12 15:37:13 -04:00
|
|
|
grid-column-gap: 20px;
|
2019-07-24 00:59:27 -07:00
|
|
|
```
|
|
|
|
|
|
|
|
</details>
|