Assignments Of Class 17: Grid Layout - Part 2
Assignment 1: Create a Simple Grid Layout with 3 Equal Columns
Objective: Create a grid with three columns of equal width and a gap between the columns.
Steps:
1. Create a div container with three child div elements inside it.
2. Apply display: grid on the container.
3. Use the grid-template-columns property to set 3 equal columns.
4. Use the gap property to add space between the grid items.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Grid Layout</title> <style> .container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */ gap: 20px; /* Gap between grid items */ padding: 20px; } .item { background-color: lightblue; padding: 20px; text-align: center; } </style></head><body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div></body></html>Explanation:
grid-template-columns: 1fr 1fr 1fr;divides the container into three equal-width columns.gap: 20px;ensures a 20px space between each column.
Assignment 2: Create a Responsive Grid with 4 Columns (3 for Larger Screens, 2 for Smaller Screens)
Objective: Make the grid responsive, where it displays 4 columns on larger screens and 2 columns on smaller screens.
Steps:
1. Set up the basic grid structure.
2. Use media queries to adjust the number of columns based on screen width.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Grid</title> <style> .container { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 columns */ gap: 15px; padding: 20px; } .item { background-color: lightcoral; padding: 20px; text-align: center; } @media (max-width: 800px) { .container { grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */ } } </style></head><body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div></body></html>Explanation:
- By default, the grid displays 4 columns using
grid-template-columns: repeat(4, 1fr);. - The
@media (max-width: 800px)query ensures that the grid changes to 2 columns when the screen width is less than 800px.
Assignment 3: Create a Grid with Different Width Columns
Objective: Create a grid with columns of different widths.
Steps:
1. Set up a grid with varying column widths using fixed values (e.g., px, em).
2. Apply different column widths using the grid-template-columns property.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Different Width Columns</title> <style> .container { display: grid; grid-template-columns: 200px 300px 1fr; /* Fixed width for 1st and 2nd, flexible for 3rd */ gap: 10px; padding: 20px; } .item { background-color: lightseagreen; padding: 20px; text-align: center; } </style></head><body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div></body></html>Explanation:
- The first column is set to
200px, the second column is300px, and the third column takes up the remaining space (1fr).
Assignment 4: Create a Grid with 3 Rows of Equal Height
Objective: Create a grid layout with 3 equal-height rows.
Steps:
1. Use the grid-template-rows property to set 3 rows of equal height.
2. Add content to each row and style them.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Equal Height Rows</title> <style> .container { display: grid; grid-template-rows: 1fr 1fr 1fr; /* 3 equal rows */ gap: 20px; padding: 20px; } .item { background-color: lightpink; padding: 20px; text-align: center; } </style></head><body> <div class="container"> <div class="item">Row 1</div> <div class="item">Row 2</div> <div class="item">Row 3</div> </div></body></html>Explanation:
grid-template-rows: 1fr 1fr 1fr;ensures that all rows have equal height.
Assignment 5: Create a Grid with Rows and Columns Having Different Sizes
Objective: Create a grid where both rows and columns have different sizes.
Steps:
1. Define the rows and columns with different sizes using both fixed and fractional units.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid with Different Sizes</title> <style> .container { display: grid; grid-template-columns: 200px 300px 1fr; grid-template-rows: 100px 2fr 1fr; gap: 15px; padding: 20px; } .item { background-color: lightgoldenrodyellow; padding: 20px; text-align: center; } </style></head><body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div></body></html>Explanation:
grid-template-columns: 200px 300px 1fr;defines the column sizes.grid-template-rows: 100px 2fr 1fr;defines rows with different sizes (100px for the first, 2 fractions for the second, and 1 fraction for the third).
Assignment 6: Create a Grid Layout with a Dynamic Gap
Objective: Adjust the gap dynamically between grid items based on screen size.
Steps:
1. Set up the grid layout.
2. Use gap property and adjust it with media queries.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Gap</title> <style> .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; /* Default gap */ padding: 20px; } .item { background-color: lightcyan; padding: 20px; text-align: center; } @media (max-width: 800px) { .container { gap: 10px; /* Smaller gap on smaller screens */ } } </style></head><body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div></body></html>Explanation:
gap: 20px;sets a 20px gap by default, but@media (max-width: 800px)reduces the gap to 10px on smaller screens.
Assignment 7: Create a 2-Column Layout with Sidebar and Main Content
Objective: Create a layout with two columns: one for a sidebar and the other for main content.
Steps:
1. Set up a two-column grid layout.
2. Make the sidebar a fixed width and the main content flexible.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Two-Column Layout</title> <style> .container { display: grid; grid-template-columns: 200px 1fr; /* Sidebar 200px, Main content takes remaining space */ gap: 20px; padding: 20px; } .sidebar { background-color: lightgray; padding: 20px; } .main-content { background-color: lightyellow; padding: 20px; } </style></head><body> <div class="container"> <div class="sidebar">Sidebar</div> <div class="main-content">Main Content</div> </div></body></html>Explanation:
grid-template-columns: 200px 1fr;ensures the sidebar is fixed at 200px and the main content takes the remaining space.
Assignment 8: Create a Grid with Nested Grid Items
Objective: Create a grid with nested grids inside one of the items.
Steps:
1. Set up a parent grid with multiple items.
2. Make one item a grid itself (nested grid).
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nested Grid</title> <style> .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px; } .item { background-color: lightpink; padding: 20px; text-align: center; } .nested-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } </style></head><body> <div class="container"> <div class="item">Item 1</div> <div class="item nested-grid"> <div>Nested Item 1</div> <div>Nested Item 2</div> </div> <div class="item">Item 3</div> </div></body></html>Explanation:
- The
.nested-gridclass turns one of the grid items into a nested grid with 2 columns.
Assignment 9: Create a Grid with Fixed and Flexible Layout Items
Objective: Create a grid where some items have fixed sizes and others are flexible.
Steps:
1. Define the grid with both fixed and flexible items.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fixed and Flexible Layout</title> <style> .container { display: grid; grid-template-columns: 200px 1fr 200px; /* Fixed sizes with flexible column */ gap: 20px; padding: 20px; } .item { background-color: lightgray; padding: 20px; text-align: center; } </style></head><body> <div class="container"> <div class="item">Fixed 1</div> <div class="item">Flexible</div> <div class="item">Fixed 2</div> </div></body></html>Explanation:
- The first and third columns are fixed at 200px, while the middle column is flexible using
1fr.
Assignment 10: Create a Grid Layout with 3 Items in One Row
Objective: Create a single row with 3 equally spaced items using CSS grid.
Steps:
1. Use the grid-template-columns property to define 3 equal columns.
2. Apply the same gap between items.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3 Items in One Row</title> <style> .container { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 equal columns */ gap: 20px; padding: 20px; } .item { background-color: lightgreen; padding: 20px; text-align: center; } </style></head><body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div></body></html>Explanation:
grid-template-columns: repeat(3, 1fr);divides the row into 3 equal-width columns.
No comments:
Post a Comment