Skip to content

Commit

Permalink
Grid Sizing Added
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sumeet-Parab-2003
Sumeet-Parab-2003 committed Sep 13, 2023
1 parent 9b2a183 commit a783b31
Show file tree
Hide file tree
Showing 7 changed files with 341 additions and 0 deletions.
34 changes: 34 additions & 0 deletions 10.1 Grid Sizing/auto-size.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Size Grid</title>
<style>
.grid-container {
display: grid;
grid-template-rows: 100px auto;
grid-template-columns: 200px auto;
}

.grid-item {
font-size: 3rem;
background-color: darkviolet;
border: 5px solid goldenrod;
color: white;
}
</style>
</head>

<body>
<h1>Auto Size Grid</h1>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>

</html>
35 changes: 35 additions & 0 deletions 10.1 Grid Sizing/fixed-size.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Size Grid</title>
<style>

.grid-container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 400px 800px;
}

.grid-item {
font-size: 3rem;
background-color: darkviolet;
border: 5px solid goldenrod;
color: white;
}
</style>
</head>

<body>
<h1>Fixed Size Grid</h1>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>

</html>
35 changes: 35 additions & 0 deletions 10.1 Grid Sizing/fractional-size.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fractional Size Grid</title>
<style>

.grid-container {
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 1fr 2fr;
}

.grid-item {
font-size: 3rem;
background-color: darkviolet;
border: 5px solid goldenrod;
color: white;
}
</style>
</head>

<body>
<h1>Fractional Size Grid</h1>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>

</html>
49 changes: 49 additions & 0 deletions 10.1 Grid Sizing/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Fundamentals</title>
<style>
body {
font-family: sans-serif;
}

.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
background-color: #f2f2f2;
}

.item {
width: 200px;
margin: 20px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 2;
font-size: 24px;
}
</style>
</head>

<body>
<div class="container">
<h1>Grid Sizing</h1>
<a class="item" href="./fixed-size.html">Fixed Size</a>
<a class="item" href="./auto-size.html">Auto Size</a>
<a class="item" href="./fractional-size.html">Fractional Size</a>
<a class="item" href="./minmax-size.html">MinMax Size</a>
<a class="item" href="./repeat.html">Repeat</a>
<a class="item" href="./test.html">Test</a>


</div>
</body>

</html>
34 changes: 34 additions & 0 deletions 10.1 Grid Sizing/minmax-size.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MizMax Size Grid</title>
<style>
.grid-container {
display: grid;
grid-template-rows: 200px minmax(400px, 5fr);
grid-template-columns: 200px minmax(400px, 5fr);
}

.grid-item {
font-size: 3rem;
background-color: darkviolet;
border: 5px solid goldenrod;
color: white;
}
</style>
</head>

<body>
<h1>MinMax Size Grid</h1>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>

</html>
36 changes: 36 additions & 0 deletions 10.1 Grid Sizing/repeat.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repeat Grid</title>
<style>
.grid-container {
display: grid;
grid-template-rows: repeat(2, 200px);
grid-template-columns: repeat(2, 200px);
grid-auto-rows: 300px;
}

.grid-item {
font-size: 3rem;
background-color: darkviolet;
border: 5px solid goldenrod;
color: white;
}
</style>
</head>

<body>
<h1>Repeat</h1>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
</div>
</body>

</html>
118 changes: 118 additions & 0 deletions 10.1 Grid Sizing/test.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Sizing Exercise</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
background-color: #f0f0f0;
}

textarea {
width: 80%;
min-height: 150px;
margin-top: 20px;
resize: vertical;
font-family: monospace;
}

button {
margin-top: 10px;
padding: 10px 20px;
background-color: #4285f4;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}

.parent {
display: grid;
grid-template-rows: 1fr 1fr 2fr;
grid-template-columns: auto 400px minmax(200px, 500px);
grid-auto-rows: 50px;
width: 80%;
background-color: #ddd;
padding: 20px;
margin: 2rem;
}

.parent>* {
background-color: seagreen;
color: white;
font-size: 18px;
padding: 20px;
border: 2px solid white;
}

.grid-container {
width: 80%;
background-color: #ddd;
padding: 20px;
margin: 2rem;
}

.grid-item {
background-color: darkviolet;
color: white;
font-size: 18px;
padding: 20px;
border: 2px solid goldenrod;
}
</style>
</head>

<body>
<h1>CSS Grid Sizing Exercise</h1>
<div class="parent">
<div class="child">width expands to fill space</div>
<div class="child">400px wide</div>
<div class="child">min 200px max 500px wide</div>
<div class="child">width expands to fill space</div>
<div class="child">400px wide</div>
<div class="child">min 200px max 500px wide</div>
<div class="child">width expands to fill space</div>
<div class="child">400px wide</div>
<div class="child">min 200px max 500px wide</div>
<div class="child">50px high</div>
</div>
<div class="grid-container" id="container">
<div class="grid-item">width expands to fill space</div>
<div class="grid-item">400px wide</div>
<div class="grid-item">min 200px max 500px wide</div>
<div class="grid-item">width expands to fill space</div>
<div class="grid-item">400px wide</div>
<div class="grid-item">min 200px max 500px wide</div>
<div class="grid-item">width expands to fill space</div>
<div class="grid-item">400px wide</div>
<div class="grid-item">min 200px max 500px wide</div>
<div class="grid-item">50px high</div>
</div>
<textarea id="user-css" placeholder="Write your CSS code here..." rows="25">
/* Write your CSS code below to make the purple items size, grow and shrink like the green ones.*/

.grid-container {

}

</textarea>
<button onclick="applyUserCss()">Apply CSS</button>

<script>
function applyUserCss() {
const userCss = document.getElementById('user-css').value;
const style = document.createElement('style');
style.innerHTML = userCss;
document.head.appendChild(style);
}
</script>
</body>

</html>

0 comments on commit a783b31

Please sign in to comment.