• Fixed/Static layout – Size of the page and page elements are fixed, usually using pixels as the unit of measure
• Fluid/Flexible/liquid layout – The width of the page elements are set as a percent of the available screen width
• Adapative layout – Characterized by having defined layouts for different resolutions. Within each layout, resizing the window does not change the layout. You can think of Adaptive as a series of Static layouts.
• Responsive layout – Characterized by having defined layouts for different resolutions. Within each layout, the design is liquid and resizes the width of elements relative to the changing window size. You can think of Responsive as a series of Liquid layouts

Click the picture for example of three layouts.

Apply the following bullet points to the HTML code below.

• Create three boxes with a width and height of 250 x 250, apply a border radius of 14px for each box, apply a border that is 10px solid and color #333. Apply 12px of active white space around each box and float the boxes next to one another.
• Apply a background color of #BDD358, font-family of arial and a font-weight of bolder.

Apply the following bullet points to the HTML code below.

• Add a container to the webpage that is a width of 900px and center everything that displays in the browser.
• Change the content to the color white, center the text in each box and change the font size to 4em.
• Apply 14% padding to the top of each box elements.

• Primarily Involves the float and clear property
• When you float an element, you take it out of the normal flow
• The float property lets you build columnar layouts
• You can align content elements to either the right or left
• A typical Web page design can contain both floating and non-floating elements
• Remember to always use a width property for floating elements

Apply the following bullet points to the HTML code below.

• Add a container to the webpage that has a width of 80% and center everything that displays in the browser.
• Apply a 3px solid orangedred border to the container and a 3px solid green border to the immediate children of the container.
• Create flex items of all the immediate children of the container. Each aside box element should have a flex-grow of 1, a flex-shrink of 0 and flex basis of auto and a height of 325px. Apply 10px of margin around each flex item.
• Justify the content for each box to space evenly.

								
									.grid {
									 display: grid;
									 grid-template-columns: repeat(4, 1fr);
									 grid-template-rows: repeat(4, 75px);
									}
	
	
								
							

								
									.grid {
									 display: grid;
									 grid-template-columns: repeat(4, 1fr);
									 grid-template-rows: 40px 2fr repeat(2, minmax(75px, 1fr));
									}
	
	
								
							

								
									.grid {
									 	display: grid;
									 	grid-template-columns: repeat(4, 1fr);
									 	grid-template-rows: 40px 2fr repeat(2, minmax(75px, 1fr));
									}
									
									#item1{
										grid-column-start: 2;
										grid-column-end: 4;
										grid-row-start: 3;
										grid-row-end: -1;
										background-color: red;
									}
									
									#item2{
										grid-column: 3;
										grid-row: 1;
										background-color: red;
									}
	
	
								
							

								
									.grid {
									 	display: grid;
									 	grid-template-columns: repeat(4, 1fr);
									 	grid-template-rows: 40px 2fr repeat(2, minmax(75px, 1fr));
									 	grid-template-areas: ". . . ." 
                                                             "item1 . . ." 
                                                             "item1 item2 item2 item2" 
                                                             " . item2 item2 item2";
									}
									
									#item1{
										grid-area: item1;
										background-color: red;
									}
									
									#item2{
										grid-area: item2;
										background-color: red;
									}