102 lines
2.3 KiB
JSON
102 lines
2.3 KiB
JSON
|
{
|
||
|
|
"name": "CSS Grid",
|
||
|
|
"dashedName": "css-grid",
|
||
|
|
"order": 6,
|
||
|
|
"time": "5 hours",
|
||
|
|
"template": "",
|
||
|
|
"required": [],
|
||
|
|
"superBlock": "responsive-web-design",
|
||
|
|
"superOrder": 1,
|
||
|
|
"challengeOrder": [
|
||
|
|
[
|
||
|
|
"5a858944d96184f06fd60d61",
|
||
|
|
"Create Your First CSS Grid"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a9036d038fddaf9a66b5d32",
|
||
|
|
"Add Columns with grid-template-columns"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a9036e138fddaf9a66b5d33",
|
||
|
|
"Add Rows with grid-template-rows"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a9036ee38fddaf9a66b5d34",
|
||
|
|
"Use CSS Grid units to Change the Size of Columns and Rows"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a9036ee38fddaf9a66b5d35",
|
||
|
|
"Create a Column Gap Using grid-column-gap"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a9036ee38fddaf9a66b5d36",
|
||
|
|
"Create a Row Gap using grid-row-gap"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a9036ee38fddaf9a66b5d37",
|
||
|
|
"Add Gaps Faster with grid-gap"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a90372638fddaf9a66b5d38",
|
||
|
|
"Use grid-column to Control Spacing"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a90373638fddaf9a66b5d39",
|
||
|
|
"Use grid-row to Control Spacing"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a90374338fddaf9a66b5d3a",
|
||
|
|
"Align an Item Horizontally using justify-self"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a90375238fddaf9a66b5d3b",
|
||
|
|
"Align an Item Vertically using align-self"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a90376038fddaf9a66b5d3c",
|
||
|
|
"Align All Items Horizontally using justify-items"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a94fdf869fb03452672e45b",
|
||
|
|
"Align All Items Vertically using align-items"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a94fe0569fb03452672e45c",
|
||
|
|
"Divide the Grid Into an Area Template"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a94fe1369fb03452672e45d",
|
||
|
|
"Place Items in Grid Areas Using the grid-area Property"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a94fe2669fb03452672e45e",
|
||
|
|
"Use grid-area Without Creating an Areas Template"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a94fe3669fb03452672e45f",
|
||
|
|
"Reduce Repetition Using the repeat Function"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a94fe4469fb03452672e460",
|
||
|
|
"Limit Item Size Using the minmax Function"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a94fe5469fb03452672e461",
|
||
|
|
"Create Flexible Layouts Using auto-fill"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a94fe6269fb03452672e462",
|
||
|
|
"Create Flexible Layouts Using auto-fit"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a94fe7769fb03452672e463",
|
||
|
|
"Use Media Queries to Create Responsive Layouts"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"5a94fe8569fb03452672e464",
|
||
|
|
"Create Grids within Grids"
|
||
|
|
]
|
||
|
|
],
|
||
|
|
"helpRoom": "Help",
|
||
|
|
"fileName": "01-responsive-web-design/css-grid.json"
|
||
|
|
}
|