Update README.md and add self checks
This commit is contained in:
parent
34328795e3
commit
dea1550672
|
@ -1,6 +1,6 @@
|
||||||
# Responsive Holy Grail Layout with Grid
|
# Responsive Holy Grail Layout with Grid
|
||||||
|
|
||||||
This one is easy! We are going to take our Holy Grail Layout from the first exercise and make it responsive. To do this we will simply change our fixed track sizes to be dynamic. Consider this a warmup for the next exercise and make sure your layout is responding properly when resizing the window.
|
This one is easy! We are going to take our Holy Grail Layout from the first exercise and make it responsive. To do this we will simply change our fixed track sizes to be dynamic. Consider this a warmup for the next exercise and make sure your layout is responding properly when resizing the browser window.
|
||||||
|
|
||||||
### Hints
|
### Hints
|
||||||
- You only need to add to the CSS selectors
|
- You only need to add to the CSS selectors
|
||||||
|
@ -17,3 +17,11 @@ When the browser is stretched wide:
|
||||||
![desired outcome wide](./desired-outcome-wide.png)
|
![desired outcome wide](./desired-outcome-wide.png)
|
||||||
|
|
||||||
### Self Check
|
### Self Check
|
||||||
|
- The gap is 15px
|
||||||
|
- The grid has two columns
|
||||||
|
- The grid has four rows
|
||||||
|
- The grid tracks do not use static sizes (no pixels!)
|
||||||
|
- The first column is three times larger than the other
|
||||||
|
- The third row is five times larger than the others
|
||||||
|
- The rows and columns stretch wider when making the browser window bigger
|
||||||
|
- The rows and columns stretch taller when making the browser window smaller
|
||||||
|
|
Loading…
Reference in New Issue