Skip to content

committed code #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

committed code #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0efa534
added colums
AngelinaSchaffer Jan 17, 2023
47b39e3
added colums
AngelinaSchaffer Jan 17, 2023
8e7b51a
my commits
AngelinaSchaffer Jan 18, 2023
f4188d7
Update full-bleed-blog-START.html
AngelinaSchaffer Jan 18, 2023
4cd7172
wes bos grid 22 of 25
JesseRate Jan 19, 2023
740ac5c
Merge pull request #1 from JesseRate/master
JesseRate Jan 19, 2023
4160f14
Merge branch 'master' into master
AngelinaSchaffer Jan 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions 02 - Starter Files and Tooling Setup/test-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,13 @@
font-size: 50px;
border-bottom: 10px solid var(--yellow);
color: var(--black);
text-shadow: 0 2px 0 rgba(0, green0, blue0, alpha0.07);
}
</style>

<body>
<p>Hello!</p>

</body>

</html>
42 changes: 42 additions & 0 deletions 03 - CSS Grid Fundamentals/css-grid-fundamentals-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,49 @@
</head>

<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>

<Style>
.container {
display: grid;
grid-template-columns: 200px 500px;
grid-template-rows: 200px 100px 400px;
grid-gap: 20px;
}
</Style>

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>

<style>
.container {
display: grid;
grid-template-columns: 200px 500px;
grid-template-rows: 200px 100px 400px;
grid-gap: 20px;
}
</style>
</body>

</html>
4 changes: 3 additions & 1 deletion 04 - CSS Grid Dev Tools/dev-tools-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,10 @@
<style>
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: 100px 200px;
}
</style>
</body>

</html>
</html>
10 changes: 10 additions & 0 deletions 05 - CSS Grid Implicit vs Explicit Tracks/implicit-vs-explicit-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,21 @@
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>

<style>
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: 200px 400px;
grid-template-rows: 50px 100px;
grid-auto-rows: 100px;
grid-auto-rows: 100px 500px;
grid-auto-columns: 100px;
}
</style>
</body>
Expand Down
18 changes: 18 additions & 0 deletions 06 - CSS grid-auto-flow Explained/autoflow-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,30 @@
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">3</div>
<div class="item">3</div>
<div class="item">3</div>
<div class="item">3</div>
<div class="item">3</div>
<div class="item">3</div>
<div class="item">3</div>
<div class="item">3</div>
<div class="item">3</div>
<div class="item">3</div>
<div class="item">3</div>
</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

<style>
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: 400px 200px;
grid-auto-flow: column;
grid-auto-columns: 200px;
}
</style>
</body>
Expand Down
7 changes: 6 additions & 1 deletion 07 - Sizing tracks in CSS Grid/sizing-tracks-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">Wes Bos Is Cool</div>
<div class="item">wes bos is cool</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
Expand All @@ -30,7 +31,11 @@
<style>
.container {
display: grid;
height: 600px;
grid-gap: 20px;
border: 10px solid var(yellow);
border: 10px solid var(--yellow);
grid-template-columns: auto 1fr auto 1fr;
}
</style>
</body>
Expand Down
3 changes: 3 additions & 0 deletions 08 - CSS Grid repeat function/repeat-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: 100px repeat(2, 1fr auto) 200px repeat(2, 5fr);
grid-template-columns: repeat(2, 1fr auto);
200px repeat(2, 5fr);
}
</style>
</body>
Expand Down
41 changes: 40 additions & 1 deletion 09 - Sizing Grid Items/sizing-items-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,52 @@

<body>
<div class="container">

<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item">poop</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
<div class="item item11">11</div>
<div class="item item12">12</div>
<div class="item item13">13</div>
<div class="item item14">14</div>
<div class="item item15">15</div>
<div class="item item16">16</div>
<div class="item item17">17</div>
<div class="item item18">18</div>
<div class="item item19">19</div>
<div class="item item20">20</div>
<div class="item item21">21</div>
<div class="item item22">22</div>
<div class="item item23">23</div>
<div class="item item24">24</div>
<div class="item item25">25</div>
<div class="item item26">26</div>
<div class="item item27">27</div>
<div class="item item28">28</div>
<div class="item item29">29</div>
<div class="item item30">30</div>
</div>

<style>
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(5, 1fr);
}
.item9{
background: mistyrose;

.item9 {
background: blue;
grid-column: span 10;
grid-row: span 2;
}
</style>
</body>
Expand Down
12 changes: 11 additions & 1 deletion 10 - Placing Grid Items/placing-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item8">💩</div>
<div class="item poop">💩</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
<div class="item item11">11</div>
Expand Down Expand Up @@ -48,6 +48,16 @@
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
}
.poop{
background: #bada55;
grid-column: span 2;
grid-row: 1 / -1;
.poop {
grid-column: span 2;
grid-row: 1/ -1;
background: red;
}
</style>
</body>
Expand Down
52 changes: 51 additions & 1 deletion 11 - Spanning and Placing Cardio/get-sweaty-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,23 +47,73 @@
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(5, 1fr 2fr);
grid-template-rows: repeat(10, sopx);


/* Make the grid 10 columns wide, every other taking up twice the free space */
grid-template-columns: repeat(5, 1fr 2fr);
/* Make the grid have 10 explicit rows, 50px high each */
grid-template-rows: repeat(10, 50px);
}

.item1 {
grid-column: 3/5;
}
.item2 {
grid-column: 5/ -1;
}
>item5 {
grid-column: span2;
grid-row: span2;
}
.item8 {
grid-row: span 2;
}
.item15 {
grid-column: 1/ -1;
}
.item18 {
grid-column: span 4/ 9;
}
.item20 {
grid-row: 4/ span 3;
}

/* With Item 1, start at col 3 and go until 5 */
.item1 {
grid-column: 3 / 5;
}

/* With Item 2, start at col 5 and go until the end */
.item2 {
grid-column: 5 / -1;
}

/* Make Item 5 double span 2 cols and rows */
.item5 {
grid-column: span 2;
grid-row: span 2;
}

/* Make Item 8 two rows high */
.tem8 {
grid-row: 8;
}

/* Make Item 15 span the entire grid width */
.item15 {
grid-column: 1 / -1;
}

/* Make item 18 span 4 widths, but end at 9 */
.item18 {
grid-column: span 4 / 9;
}

/* Make item 20 start at row 4 and have a height of 3 rows */
.item20 {
grid-row: 4 / span3;
}
</style>
</body>

Expand Down
23 changes: 7 additions & 16 deletions 12 - auto-fit and auto-fill/auto-fit-and-auto-fill-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,30 +13,21 @@
<div class="item item1">Item 01</div>
<div class="item item2">Item 02</div>
<div class="item item3">Item 03</div>
<div class="item item4">Item 04</div>I
<div class="item item4">Item 04</div>
<div class="item item5">Item 05</div>
<div class="item item6">Item 06</div>
<div class="item item7">Item 07</div>
<div class="item item8">Item 08</div>
<div class="item item9">Item 09</div>
<div class="item item10">Item 10</div>
<div class="item item11">Item 11</div>
<div class="item item12">Item 12</div>
<div class="item item13">Item 13</div>
<div class="item item14">Item 14</div>
<div class="item item15">Item 15</div>
<div class="item item16">Item 16</div>
<div class="item item17">Item 17</div>
<div class="item item18">Item 18</div>
<div class="item item19">Item 19</div>
<div class="item item20">Item 20</div>
20</div>
</div>

<style>
.container {
display: grid;
grid-gap: 20px;
border: 10px solid var(--yellow);
grid-template-columns: repeat(auto-fit, 150px);
}
.item4 {
grid-column: -1;
grid-column-end: -1;
}
</style>
</body>
Expand Down
4 changes: 3 additions & 1 deletion 13 - Using minmax() for Responsive Grids/minmax-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@
display: grid;
grid-gap: 20px;
border: 10px solid var(--yellow);
grid-template-columns: repeat(auto-fill, 150px);
/* grid-template-columns: repeat(auto-fit, minmax (150px, 1fr)); */
/*grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));*/
grid-template-columns: fit-content(100px) 150px 150px 150px;
}
</style>
</body>
Expand Down
17 changes: 17 additions & 0 deletions 14 - Grid Template Areas/area-line-names-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,23 @@
.container {
display: grid;
grid-gap: 20px;
grid-template-areas:
"poop poop poop poop hamburger hamburger hamburger hamburger"
"poop poop poop poop hamburger hamburger hamburger hamburger"
"poop poop poop poop hamburger hamburger hamburger hamburger"
"poop poop poop poop hamburger hamburger hamburger hamburger";
}
.item3 {
grid-column: poop-start / hamburger-end;
grid-row: poop-end;
grid-template-areas:
"p p p p h h h h"
"p p p p h h h h"
"p p p p h h h h"
"p p p p h h h h"
}
.item {

}
</style>
</body>
Expand Down
Loading