Skip to content
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

Wes Bos Grid CSS #66

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

Wes Bos Grid CSS #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
690cd3f
grid fundamentals
AngelinaMinshall Jan 17, 2023
575ab7f
dev tools
AngelinaMinshall Jan 17, 2023
06c65b5
Ilicit and explicit, autoflow, and sizing tracks
AngelinaMinshall Jan 18, 2023
28288e2
learning repeat
AngelinaMinshall Jan 18, 2023
54acd56
sizing items in a grid
AngelinaMinshall Jan 18, 2023
9a3432e
placing grid items
AngelinaMinshall Jan 18, 2023
1de4535
practice span and place
AngelinaMinshall Jan 19, 2023
fb02997
autofit auto fill
AngelinaMinshall Jan 19, 2023
fa22ab8
minmax
AngelinaMinshall Jan 19, 2023
aade853
grid template areas
AngelinaMinshall Jan 19, 2023
2095573
grid template areas
AngelinaMinshall Jan 19, 2023
fcd8370
Update area-line-names-START.html
AngelinaMinshall Jan 19, 2023
b2d0140
Update naming-lines-START.html
AngelinaMinshall Jan 19, 2023
38eac0a
flow dense
AngelinaMinshall Jan 19, 2023
59982f8
alignment and centering
AngelinaMinshall Jan 19, 2023
ab5e858
reordering grid items
AngelinaMinshall Jan 19, 2023
2f215c4
Merge branch 'master' of https://github.com/AngelinaMinshall/css-grid
AngelinaMinshall Jan 19, 2023
576bd79
grid centering
AngelinaMinshall Jan 20, 2023
40d1f07
Merge branch 'master' of https://github.com/AngelinaMinshall/css-grid
AngelinaMinshall Jan 20, 2023
c25e2f4
image gallery w js
AngelinaMinshall Jan 20, 2023
68b76b5
so many changes
AngelinaMinshall Jan 21, 2023
cda0dc2
codepen
AngelinaMinshall Jan 21, 2023
84948ea
bootsrap
AngelinaMinshall Jan 21, 2023
28b4698
making it responsive
AngelinaMinshall Jan 22, 2023
5aea260
bleed
AngelinaMinshall Jan 22, 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
20 changes: 20 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,6 +9,26 @@
</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>

</body>

Expand Down
2 changes: 2 additions & 0 deletions 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,6 +25,8 @@
<style>
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: 100px 200px;
}
</style>
</body>
Expand Down
10 changes: 9 additions & 1 deletion 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,19 @@
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</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-columns:100px;
}
</style>
</body>
Expand Down
12 changes: 12 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,24 @@
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">2</div>
<div class="item">2</div>
<div class="item">2</div>
<div class="item">2</div>
<div class="item">2</div>
<div class="item">2</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
4 changes: 4 additions & 0 deletions 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 @@ -30,7 +30,11 @@
<style>
.container {
display: grid;
height: 600px;
grid-gap: 20px;
border: 10px solid var(--yellow) ;
grid-template-columns: auto 1fr auto 1fr;

}
</style>
</body>
Expand Down
1 change: 1 addition & 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,7 @@
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: 100px repeat(2 1fr auto) 200px repeat(5fr);
}
</style>
</body>
Expand Down
38 changes: 38 additions & 0 deletions 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,51 @@

<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">poop</div>
<div class="item item">9</div>
<div class="item item">10</div>
<div class="item item">11</div>
<div class="item item">12</div>
<div class="item item">13</div>
<div class="item item">14</div>
<div class="item item">15</div>
<div class="item item">16</div>
<div class="item item">17</div>
<div class="item item">18</div>
<div class="item item">19</div>
<div class="item item">20</div>
<div class="item item">21</div>
<div class="item item">22</div>
<div class="item item">23</div>
<div class="item item">24</div>
<div class="item item">25</div>
<div class="item item">26</div>
<div class="item item">27</div>
<div class="item item">28</div>
<div class="item item">29</div>
<div class="item item">30</div>

</div>

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

}
</style>
</body>
Expand Down
8 changes: 7 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,12 @@
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;
}
</style>
</body>
Expand Down
24 changes: 24 additions & 0 deletions 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 @@ -48,22 +48,46 @@
display: grid;
grid-gap: 20px;
/* 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);
}

/* 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 */
.item8 {
grid-row: span 2;
}

/* 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/span 3 ;
}
</style>
</body>

Expand Down
21 changes: 5 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 @@ -14,29 +14,18 @@
<div class="item item2">Item 02</div>
<div class="item item3">Item 03</div>
<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>
</div>

<style>
.container {
display: grid;
grid-gap: 20px;
border: 10px solid var(--yellow);
grid-template-columns: repeat(auto-fit, 150px);

}
.item4 {
grid-column-end: -1;
}
</style>
</body>
Expand Down
3 changes: 2 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,8 @@
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: fit-content(100px) 150px 150px 150px;
}
</style>
</body>
Expand Down
9 changes: 9 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,7 +46,16 @@
.container {
display: grid;
grid-gap: 20px;
grid-template-areas:
"poop poop poop poop burger burger burger burger"
"poop poop poop poop burger burger burger burger"
"poop poop poop poop burger burger burger burger"
"poop poop poop poop burger burger burger burger"
}
.item3 {
grid-column: poop-start/burger-end;
grid-row-end: poop-end;

</style>
</body>

Expand Down
26 changes: 26 additions & 0 deletions 14 - Grid Template Areas/areas-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,32 @@
.container {
display: grid;
grid-gap: 20px;
grid-template-columns:1fr 500px 1fr;
grid-template-rows:150px 150px 100px ;
grid-template-areas:
"sidebar-1 content sidebar-2"
"sidebar-1 content sidebar-2"
"footer footer footer"
}
.footer {
grid-area: footer;
}
.item1 {
grid-area: sidebar-1;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: sidebar-2;
}
@media (max-width: 700px) {
.container {
grid-template-areas:
"content content content"
"sidebar-1 sidebar-1 sidebar-2"
"footer footer footer"
}
}
</style>
</body>
Expand Down
14 changes: 12 additions & 2 deletions 15 - Naming Lines in CSS Grid/naming-lines-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,18 @@
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 500px 1fr;
grid-template-rows: repeat(10, auto);
grid-template-columns: [sidebar-start site-left] 1fr [content-start] 500px [content-end] 1fr [sight-right];
grid-template-rows: [content-top] repeat(10, auto)
[content-bottom];
}
.item3 {
background: slateblue;
grid-column: content-start;
grid-row: content-top/ content-bottom;

/*grid-row: 1/span 10;*/


}
</style>
</body>
Expand Down
17 changes: 17 additions & 0 deletions 16 - grid-auto-flow dense Block Fitting/dense-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,23 @@
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(10, 1fr);
grid-auto-flow: dense;
}
.item:nth-child(6n) {
background: cornflowerblue;
grid-column: span 6;
}
.item:nth-child(8n) {
background: tomato;
grid-column: span 2;
}
.item:nth-child(9n) {
grid-row: span 2;
}
.item18 {
background: greenyellow !important;
grid-column-end: -1 !important;
}
</style>
</body>
Expand Down
16 changes: 15 additions & 1 deletion 17 - CSS Grid Alignment + Centering/alignment-and-centering-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,21 @@
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(10, 1fr);
grid-template-columns: repeat(5, 130px);
/* justify-items: center;
align-items: center; */
place-items: stretch stretch;
justify-content: space-between;
align-content: space-between;
}

.itm {
background: white;
}

.itm5 {
justify-self: center;
align-self: center;
}
</style>
</body>
Expand Down
Loading