diff --git a/day-2-grid/09-mondrian-painting-demo/begin/painting.css b/day-2-grid/09-mondrian-painting-demo/begin/painting.css index 6fb21ea0..89215bd3 100644 --- a/day-2-grid/09-mondrian-painting-demo/begin/painting.css +++ b/day-2-grid/09-mondrian-painting-demo/begin/painting.css @@ -1,43 +1,48 @@ /* Based on "Composition II in Red, Blue, and Yellow," by Piet Mondrian (1930): https://en.wikipedia.org/wiki/Piet_Mondrian */ .wrapper { + display: grid; + gap: 30px 20px; + grid-template-rows: 170px 210px 61px; + grid-template-rows: 124px 376px 42px; width: 600px; height: 600px; - background: url(painting.png) no-repeat; - + /* background: url(painting.png) no-repeat; */ + background-color: black; } div { - border: 1px solid black; - background-color: white; - opacity: 0.5; + border: 1px solid black; + background-color: white; + /* opacity: 0.5; */ } .a { - + grid-row: 1/2; + grid-column: 1/2; } .b { - + grid-row: 2/3; + grid-column: 1/2; } .c { - + grid-row: 1/3; + grid-column: 2/4; + background-color: red; } .d { - + grid-row: 3/5; + grid-column: 1/2; + background-color: blue; + color: white; } .e { - + grid-row: 3/5; + grid-column: 2/3; } .f { - + grid-row: 3/4; + grid-column: 3/4; } .g { - -} - - - - - - - - - - + grid-row: 4/5; + grid-column: 3/4; + background-color: yellow; +} diff --git a/day-2-grid/09-mondrian-painting-demo/painting.png b/day-2-grid/09-mondrian-painting-demo/begin/painting.png similarity index 100% rename from day-2-grid/09-mondrian-painting-demo/painting.png rename to day-2-grid/09-mondrian-painting-demo/begin/painting.png diff --git a/day-2-grid/10-mondrian-you-try-it/begin/youtryit.css b/day-2-grid/10-mondrian-you-try-it/begin/youtryit.css index f5983031..71138b29 100644 --- a/day-2-grid/10-mondrian-you-try-it/begin/youtryit.css +++ b/day-2-grid/10-mondrian-you-try-it/begin/youtryit.css @@ -3,50 +3,33 @@ width: 633px; height: 458px; background: url(mondrian2.png) no-repeat; - + display: grid; + gap: 10px; + grid-template-rows: 4fr 1fr 2fr 1fr; + grid-template-columns: ; } div { - border: 1px solid black; - background-color: white; - opacity: 0.5; + border: 1px solid black; + background-color: white; + opacity: 0.5; } .a { - } .b { - } .c { - } .d { - } .e { - } .f { - } .g { - } .h { - } .i { - } .j { - -} - - - - - - - - - - +} diff --git a/day-2-grid/10-mondrian-you-try-it/begin/youtryit.html b/day-2-grid/10-mondrian-you-try-it/begin/youtryit.html index e0cfe494..dbbfebf9 100644 --- a/day-2-grid/10-mondrian-you-try-it/begin/youtryit.html +++ b/day-2-grid/10-mondrian-you-try-it/begin/youtryit.html @@ -1,23 +1,23 @@ - - - Mondrian painting - - - - -
-
a
-
b
-
c
-
d
-
e
-
f
-
g
-
h
-
i
-
j
-
- - \ No newline at end of file + + + Mondrian painting + + + + +
+
a
+
b
+
c
+
d
+
e
+
f
+
g
+
h
+
i
+
j
+
+ + diff --git a/day-2-grid/13-grid-nesting/begin/nesting.css b/day-2-grid/13-grid-nesting/begin/nesting.css index 7cf5359b..5f0e0ff6 100644 --- a/day-2-grid/13-grid-nesting/begin/nesting.css +++ b/day-2-grid/13-grid-nesting/begin/nesting.css @@ -1,54 +1,62 @@ .wrapper { - display: grid; - grid-gap: 10px; - font-family: Arial, sans-serif; + display: grid; + grid-gap: 10px; + font-family: Arial, sans-serif; } .wrapper > * { - padding: 1em; - border-radius: 1em; + padding: 1em; + border-radius: 1em; } header { - background-color: blue; - color: white; + background-color: blue; + color: white; } article { - background-color: green; - color: white; + background-color: green; + color: white; } aside { - background-color: yellow; + background-color: yellow; } article aside { - background-color: white; - color: black; - padding: 0.5em; - border-radius: 0.5em; -} -@media (min-width: 650px) { - header { - grid-column: 1 / 2; - grid-row: 2 / 3; - } - article { - grid-column: 1 / 2; - grid-row: 1 / 2; - } - aside { - grid-column: 2 / 3; - grid-row: 1 / 3; - } -} -@media (min-width: 1000px) { - header { - grid-column: 2 / 3; - grid-row: 1 / 2; - } - article { - grid-column: 2 / 3; - grid-row: 2 / 3; - } - aside { - grid-column: 1 / 2; - grid-row: 1 / 3; - } -} \ No newline at end of file + background-color: white; + color: black; + padding: 0.5em; + border-radius: 0.5em; +} +.nested { + display: grid; + grid-gap: 1em; + grid-template-columns: auto; +} +@media (min-width: 650px) { + header { + grid-column: 1 / 2; + grid-row: 2 / 3; + } + article { + grid-column: 1 / 2; + grid-row: 1 / 2; + } + .sidebar { + grid-column: 2 / 3; + grid-row: 1 / 3; + } + .nested { + grid-template-columns: repeat(3, 1fr); + } +} +@media (min-width: 1000px) { + header { + grid-column: 2 / 3; + grid-row: 1 / 2; + } + article { + grid-column: 2 / 3; + grid-row: 2 / 3; + } + .sidebar { + grid-column: 1 / 2; + grid-row: 1 / 3; + } +} diff --git a/day-2-grid/13-grid-nesting/begin/nesting.html b/day-2-grid/13-grid-nesting/begin/nesting.html index 4f92993c..81f5bb5e 100644 --- a/day-2-grid/13-grid-nesting/begin/nesting.html +++ b/day-2-grid/13-grid-nesting/begin/nesting.html @@ -1,42 +1,66 @@ - - - Nesting - - - - -
-
-

My Fine Header

-
-
-

Article Title

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?

-
- - - -
-
- -
- - \ No newline at end of file + + + Nesting + + + + +
+
+

My Fine Header

+
+
+

Article Title

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci + laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque + quis incidunt? +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci + laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque + quis incidunt? +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci + laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque + quis incidunt? +

+
+ + + +
+
+ +
+ + diff --git a/day-2-grid/14-grid-offsets/begin/offsets.css b/day-2-grid/14-grid-offsets/begin/offsets.css index e5ab846b..479b7eea 100644 --- a/day-2-grid/14-grid-offsets/begin/offsets.css +++ b/day-2-grid/14-grid-offsets/begin/offsets.css @@ -1,56 +1,77 @@ .wrapper { - display: grid; - grid-gap: 10px; - font-family: Arial, sans-serif; + display: grid; + grid-gap: 10px; + font-family: Arial, sans-serif; } .wrapper > * { - padding: 1em; - border-radius: 1em; + padding: 1em; + border-radius: 1em; } header { - background-color: blue; - color: white; + background-color: blue; + color: white; } article { - background-color: green; - color: white; + background-color: green; + color: white; } aside { - background-color: yellow; + background-color: yellow; } article aside { - background-color: white; - color: black; - padding: 0.5em; - border-radius: 0.5em; -} - -@media (min-width: 650px) { - header { - grid-column: 1 / 2; - grid-row: 2 / 3; - } - article { - grid-column: 1 / 2; - grid-row: 1 / 2; - } - .sidebar { - grid-column: 2 / 3; - grid-row: 1 / 3; - } -} -@media (min-width: 1000px) { - header { - grid-column: 2 / 3; - grid-row: 1 / 2; - } - article { - grid-column: 2 / 3; - grid-row: 2 / 3; - } - .sidebar { - grid-column: 1 / 2; - grid-row: 1 / 3; - } - -} \ No newline at end of file + background-color: white; + color: black; + padding: 0.5em; + border-radius: 0.5em; +} +/* .nested { + display: grid; + grid-template-columns: auto; + grid-template-rows: auto; + grid-template-areas: 'aside'; + gap: 1em; +} */ +.nested { + display: block; +} +@media (min-width: 650px) { + header { + grid-column: 1 / 2; + grid-row: 2 / 3; + } + article { + grid-column: 1 / 2; + grid-row: 1 / 2; + } + .sidebar { + grid-column: 2 / 3; + grid-row: 1 / 3; + } + .nested { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + grid-template-rows: auto; + grid-template-areas: 'aside1 .. aside3'; + } + .nested aside:first-child { + grid-area: aside1; + } + .nested aside:last-child { + grid-area: aside3; + } +} +@media (min-width: 1000px) { + header { + grid-column: 2 / 3; + grid-row: 1 / 2; + } + article { + grid-column: 2 / 3; + grid-row: 2 / 3; + } + .sidebar { + grid-column: 1 / 2; + grid-row: 1 / 3; + } +}