2018-10-12 15:37:13 -04:00
|
|
|
---
|
|
|
|
title: Create Your First CSS Grid
|
|
|
|
---
|
2019-07-24 00:59:27 -07:00
|
|
|
# Create Your First CSS Grid
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
## Hints
|
2018-10-12 15:37:13 -04:00
|
|
|
|
|
|
|
### Hint 1
|
|
|
|
|
|
|
|
To change display of any element, the following syntax is used:
|
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
```css
|
2018-10-12 15:37:13 -04:00
|
|
|
display: propertyName;
|
2019-07-24 00:59:27 -07:00
|
|
|
```
|
2018-10-12 15:37:13 -04:00
|
|
|
|
|
|
|
### Hint 2
|
|
|
|
|
|
|
|
Change the display property of the .container element
|
|
|
|
|
|
|
|
### Hint 3
|
|
|
|
|
|
|
|
Set the display of the .container element to grid
|
|
|
|
|
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
|
|
|
|
|
|
|
To set the display of the .container element to grid:
|
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
```css
|
2018-10-12 15:37:13 -04:00
|
|
|
display: grid;
|
2019-07-24 00:59:27 -07:00
|
|
|
```
|
|
|
|
|
|
|
|
</details>
|