| 
									
										
										
										
											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> |