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

feat(seed): An HTML illustration added (#16939)

Browse Source
This commit is contained in:
Ahmad Abdolsaheb
2018-03-23 20:19:22 +03:00
committed by mrugesh mohapatra
parent 7c38b2c89b
commit c6c090b95c
1 changed files with 2 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
challenges/01-responsive-web-design/css-grid.json
View File

@ -373,6 +373,8 @@
"description": [ "description": [
"Up to this point, all the properties that have been discussed are for grid containers. The <code>grid-column</code> property is the first one for use on the grid items themselves.", "Up to this point, all the properties that have been discussed are for grid containers. The <code>grid-column</code> property is the first one for use on the grid items themselves.",
"The hypothetical horizontal and vertical lines that create the grid are referred to as <dfn>lines</dfn>. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward.", "The hypothetical horizontal and vertical lines that create the grid are referred to as <dfn>lines</dfn>. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward.",
"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 <code>grid-column</code> property in conjunction with the line numbers you want the item to start and stop at.", "To control the amount of columns an item will consume, you can use the <code>grid-column</code> property in conjunction with the line numbers you want the item to start and stop at.",
"Here's an example:", "Here's an example:",
"<blockquote>grid-column: 1 / 3;</blockquote>", "<blockquote>grid-column: 1 / 3;</blockquote>",