Wednesday, 19 February 2025

Home / Assignments / Assignments Of Class 16: Grid Layout - Part 1

Assignments Of Class 16: Grid Layout - Part 1

by on in

 


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.


By at
Tags

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Search This Blog
Powered by Blogger.