diff --git a/grid/01-grid-layout-1/solution/solution.css b/grid/01-grid-layout-1/solution/solution.css index 23d7392..47e0a91 100644 --- a/grid/01-grid-layout-1/solution/solution.css +++ b/grid/01-grid-layout-1/solution/solution.css @@ -1,5 +1,13 @@ +body, html { + height: 100%; + margin: 0; +} + .container { text-align: center; + height: 100%; + padding: 16px; + box-sizing: border-box; } .container div { @@ -42,32 +50,19 @@ .container { display: grid; - grid-template-columns: 300px 900px; - grid-template-rows: 100px 100px 500px 100px; - gap: 15px; + grid-template-columns: 300px 1fr; + grid-template-rows: 80px 80px 1fr 80px; + gap: 16px; } .header { grid-column: 1 / 3; - grid-row: 1 / 2; } .sidebar { - grid-column: 1 / 2; grid-row: 2 / 4; } -.nav { - grid-column: 2 / 3; - grid-row: 2 / 3; -} - -.article { - grid-column: 2 / 3; - grid-row: 3 / 4; -} - .footer { grid-column: 1 / 3; - grid-row: 4 / 5; } diff --git a/grid/01-grid-layout-1/style.css b/grid/01-grid-layout-1/style.css index 1c4478d..ecf1a42 100644 --- a/grid/01-grid-layout-1/style.css +++ b/grid/01-grid-layout-1/style.css @@ -1,5 +1,13 @@ +body, html { + height: 100%; + margin: 0; +} + .container { text-align: center; + height: 100%; + padding: 16px; + box-sizing: border-box; } .container div {