gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(curriculum) fixes for grammar and missing articles (#41335)

Browse Source 
* fix(curriculum) fixes for grammar and missing articles

* Update curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
This commit is contained in:
Sem Bauke
2021-03-02 20:27:45 +01:00
committed by GitHub
parent b98f2ecee3
commit f328bdb93e
10 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md
View File

@ -17,7 +17,7 @@ Use `grid-gap` to introduce a `10px` gap between the rows and `20px` gap between
# --hints--
`container` class should have a `grid-gap` property that introduces `10px` gap between the rows and `20px` gap between the columns.
`container` class should have a `grid-gap` property that introduces a `10px` gap between the rows and a `20px` gap between the columns.
```js
assert(

2
curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md
View File

@ -9,7 +9,7 @@ dashedName: add-rows-with-grid-template-rows
# --description--
The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the `grid-template-rows` property in the same way you used `grid-template-columns` in previous challenge.
The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the `grid-template-rows` property in the same way you used `grid-template-columns` in the previous challenge.
# --instructions--

2
curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md
View File

@ -19,7 +19,7 @@ In the second grid, use `auto-fit` with `repeat` to fill the grid with columns t
# --hints--
`container2` class should have a `grid-template-columns` property with `repeat` and `auto-fit` that will fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`.
`container2` class should have a `grid-template-columns` property with `repeat` and `auto-fit` that will fill the grid with columns that have a minimum width of `60px` and a maximum of `1fr`.
```js
assert(

2
curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md
View File

@ -9,7 +9,7 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property
# --description--
After creating an area's template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the `grid-area` property on an item like this:
After creating an area template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the `grid-area` property on an item like this:
```css
.item1 {

2
curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md
View File

@ -17,7 +17,7 @@ This is what the lines look like for a 3x3 grid:
<div style='position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;'><p style='left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;'>column lines</p><p style='left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>1</p><p style='left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>2</p><p style='left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>3</p><p style='left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>4</p><p style='left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;'>row lines</p><p style='left:-10%;top:-10%;font-size:130%;position:absolute;'>1</p><p style='left:-10%;top:21%;font-size:130%;position:absolute;'>2</p><p style='left:-10%;top:53%;font-size:130%;position:absolute;'>3</p><p style='left:-10%;top:85%;font-size:130%;position:absolute;'>4</p><div style='left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;'></div></div>
To control the amount of columns an item will consume, you can use the `grid-column` property in conjunction with the line numbers you want the item to start and stop at.
To control the number of columns an item will consume, you can use the `grid-column` property in conjunction with the line numbers you want the item to start and stop at.
Here's an example: