Assignments Of Class 16: Grid Layout - Part 1
CSS Grid Layout - Assignment 1: Basic Grid Creation
Objective: To create a basic grid layout with 2 rows and 3 columns.
Task:
Create a grid layout with 2 rows and 3 columns. Each grid item should have a different background color to make them visible.
Step-by-Step Solution:
1. HTML Structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Grid
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item item1">Item 1
</div>
<div class="item item2">Item 2
</div>
<div class="item item3">Item 3
</div>
<div class="item item4">Item 4
</div>
<div class="item item5">Item 5
</div>
<div class="item item6">Item 6
</div>
</div>
</body>
</html>
2. CSS Styles:
css
.container {
display: grid;
grid-template-columns:
repeat(
3,
1fr);
/* 3 equal-width columns */
grid-template-rows:
repeat(
2,
100px);
/* 2 equal-height rows */
gap:
10px;
}
.item {
text-align: center;
padding:
20px;
color: white;
}
.item1 {
background-color:
#4CAF50; }
.item2 {
background-color:
#2196F3; }
.item3 {
background-color:
#f44336; }
.item4 {
background-color:
#FF9800; }
.item5 {
background-color:
#9C27B0; }
.item6 {
background-color:
#3F51B5; }
Explanation:
- The
.container
is a grid with 3 columns and 2 rows. - Each
.item
has different background colors to distinguish them.
CSS Grid Layout - Assignment 2: Spanning Grid Items
Objective: To create a grid layout where an item spans multiple columns and rows.
Task:
Create a grid with 3 columns and 2 rows. Make the first item span across both columns and the second item span across two rows.
Step-by-Step Solution:
1. HTML Structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spanning Items
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item item1">Item 1
</div>
<div class="item item2">Item 2
</div>
<div class="item item3">Item 3
</div>
<div class="item item4">Item 4
</div>
</div>
</body>
</html>
2. CSS Styles:
css
.container {
display: grid;
grid-template-columns:
repeat(
3,
1fr);
grid-template-rows:
repeat(
2,
100px);
gap:
10px;
}
.item {
text-align: center;
padding:
20px;
color: white;
}
.item1 {
background-color:
#4CAF50;
grid-column: span
3;
/* Spans across all columns */
}
.item2 {
background-color:
#2196F3;
grid-row: span
2;
/* Spans across both rows */
}
.item3 {
background-color:
#f44336;
}
.item4 {
background-color:
#FF9800;
}
Explanation:
.item1
spans across all columns (grid-column: span 3
)..item2
spans across both rows (grid-row: span 2
).
CSS Grid Layout - Assignment 3: Grid with Unequal Columns
Objective: Create a grid with unequal column widths.
Task:
Create a grid with 3 columns. The first column should take up twice as much space as the other two columns.
Step-by-Step Solution:
1. HTML Structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unequal Columns
</title>
<link rel="stylesheet" href="styles.css">
</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>
2. CSS Styles:
css
.container {
display: grid;
grid-template-columns:
2fr
1fr
1fr;
/* 2:1:1 ratio */
gap:
10px;
}
.item {
text-align: center;
padding:
20px;
color: white;
background-color:
#4CAF50;
}
Explanation:
- The
grid-template-columns: 2fr 1fr 1fr;
defines a 2:1:1 ratio for the column widths.
CSS Grid Layout - Assignment 4: Adding Gap Between Grid Items
Objective: Add gaps between grid items in a grid layout.
Task:
Create a 3x3 grid and add a gap of 20px between the items.
Step-by-Step Solution:
1. HTML Structure:
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 Gaps
</title>
<link rel="stylesheet" href="styles.css">
</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 class="item">Item 7
</div>
<div class="item">Item 8
</div>
<div class="item">Item 9
</div>
</div>
</body>
</html>
2. CSS Styles:
css
.container {
display: grid;
grid-template-columns:
repeat(
3,
1fr);
grid-template-rows:
repeat(
3,
100px);
gap:
20px;
}
.item {
text-align: center;
padding:
20px;
color: white;
background-color:
#4CAF50;
}
Explanation:
- The
gap: 20px;
property creates a 20px space between the grid items.
CSS Grid Layout - Assignment 5: Grid with Explicit Row and Column Sizes
Objective: Define explicit row and column sizes.
Task:
Create a grid with 3 columns, where the first column is 200px wide, the second column is 1fr, and the third column is 150px wide.
Step-by-Step Solution:
1. HTML Structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explicit Sizes
</title>
<link rel="stylesheet" href="styles.css">
</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>
2. CSS Styles:
css
.container {
display: grid;
grid-template-columns:
200px
1fr
150px;
/* Explicit column sizes */
gap:
10px;
}
.item {
text-align: center;
padding:
20px;
color: white;
background-color:
#4CAF50;
}
Explanation:
- The
grid-template-columns: 200px 1fr 150px;
defines explicit column sizes: 200px, flexible (1fr
), and 150px.
CSS Grid Layout - Assignment 6: Nested Grid
Objective: Create a grid where one of the grid items is itself a grid.
Task:
Create a grid with 3 items. The first item should be a grid that contains 2 items inside it.
Step-by-Step Solution:
1. HTML Structure:
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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item nested">
<div class="nested-item">Nested Item 1
</div>
<div class="nested-item">Nested Item 2
</div>
</div>
<div class="item">Item 2
</div>
<div class="item">Item 3
</div>
</div>
</body>
</html>
2. CSS Styles:
css
.container {
display: grid;
grid-template-columns:
1fr
1fr
1fr;
gap:
10px;
}
.item {
text-align: center;
padding:
20px;
color: white;
background-color:
#4CAF50;
}
.nested {
display: grid;
grid-template-columns:
1fr
1fr;
gap:
5px;
}
.nested-item {
background-color:
#FF9800;
padding:
10px;
}
Explanation:
- The
.nested
class defines a grid inside the first item, which contains 2 columns.
CSS Grid Layout - Assignment 7: Auto Placement with auto-fill
Objective: Create a grid that automatically adjusts the number of columns based on available space.
Task:
Create a grid with as many columns as will fit within the container, using auto-fill
to automatically place items.
Step-by-Step Solution:
1. HTML Structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Fill
</title>
<link rel="stylesheet" href="styles.css">
</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>
</body>
</html>
2. CSS Styles:
css
.container {
display: grid;
grid-template-columns:
repeat(auto-fill,
minmax(
150px,
1fr));
/* Auto-fill columns */
gap:
10px;
}
.item {
text-align: center;
padding:
20px;
color: white;
background-color:
#4CAF50;
}
Explanation:
- The
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
automatically adjusts the number of columns based on the available space.
CSS Grid Layout - Assignment 8: Responsive Grid
Objective: Create a responsive grid layout that adjusts based on the screen size.
Task:
Create a grid with 3 columns for large screens and 1 column for small screens.
Step-by-Step Solution:
1. HTML Structure:
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>
<link rel="stylesheet" href="styles.css">
</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>
2. CSS Styles:
css
.container {
display: grid;
grid-template-columns:
repeat(
3,
1fr);
gap:
10px;
}
@media (
max-width:
768px) {
.container {
grid-template-columns:
1fr;
}
}
.item {
text-align: center;
padding:
20px;
color: white;
background-color:
#4CAF50;
}
Explanation:
- By default, the grid has 3 columns.
- When the screen width is below 768px, it switches to 1 column (
@media (max-width: 768px)
).
CSS Grid Layout - Assignment 9: Overlapping Grid Items
Objective: Make two grid items overlap.
Task:
Create a grid with 2 items. The second item should overlap the first item.
Step-by-Step Solution:
1. HTML Structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overlapping Items
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item item1">Item 1
</div>
<div class="item item2">Item 2
</div>
</div>
</body>
</html>
2. CSS Styles:
css
.container {
display: grid;
grid-template-columns:
1fr
1fr;
gap:
10px;
position: relative;
}
.item1 {
background-color:
#4CAF50;
}
.item2 {
background-color:
#2196F3;
position: absolute;
top:
20px;
left:
20px;
}
Explanation:
- The
.item2
is absolutely positioned to overlap.item1
.
CSS Grid Layout - Assignment 10: Centering Grid Items
Objective: Center grid items inside the container.
Task:
Create a grid where items are centered both vertically and horizontally.
Step-by-Step Solution:
1. HTML Structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centering Grid Items
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item">Item 1
</div>
<div class="item">Item 2
</div>
</div>
</body>
</html>
2. CSS Styles:
css
.container {
display: grid;
place-items: center;
/* Centers items both horizontally and vertically */
height:
100vh;
}
.item {
background-color:
#4CAF50;
color: white;
padding:
20px;
}
Explanation:
- The
place-items: center;
property centers the items both vertically and horizontally.
No comments:
Post a Comment