Menu
How do I force a css grid container take the full width and height of the device screen for a single page app? Modified example is from Mozilla: Firefox documentation
.wrapper { display: grid; border-style: solid; border-color: red; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 10px; } .one { border-style: solid; border-color: blue; grid-column: 1 / 3; grid-row: 1; } .two { border-style: solid; border-color: yellow; grid-column: 2 / 4; grid-row: 1 / 3; } .three { border-style: solid; border-color: violet; grid-row: 2 / 5; grid-column: 1; } .four { border-style: solid; border-color: aqua; grid-column: 3; grid-row: 3; } .five { border-style: solid; border-color: green; grid-column: 2; grid-row: 4; } .six { border-style: solid; border-color: purple; grid-column: 3; grid-row: 4; }<html> <div class="wrapper"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> </div> </html>
988
auto-fit behavior: “make whatever columns you have fit into the available space. Expand them as much as you need to fit the row size. Empty columns must not occupy any space. Put that space to better use by expanding the filled (as in: filled with content/grid items) columns to fit the available row space.”
The grid-template-columns Property The value is a space-separated-list, where each value defines the width of the respective column. If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.
If you take advantage of width: 100vw; and height: 100vh;, the object with these styles applied will stretch to the full width and height of the device.
Also note, there are times padding and margins can get added to your view, by browsers and the like. I added a * global no padding and margins so you can see the difference. Keep this in mind.
*{ box-sizing: border-box; padding: 0; margin: 0; } .wrapper { display: grid; border-style: solid; border-color: red; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 10px; width: 100vw; height: 100vh; } .one { border-style: solid; border-color: blue; grid-column: 1 / 3; grid-row: 1; } .two { border-style: solid; border-color: yellow; grid-column: 2 / 4; grid-row: 1 / 3; } .three { border-style: solid; border-color: violet; grid-row: 2 / 5; grid-column: 1; } .four { border-style: solid; border-color: aqua; grid-column: 3; grid-row: 3; } .five { border-style: solid; border-color: green; grid-column: 2; grid-row: 4; } .six { border-style: solid; border-color: purple; grid-column: 3; grid-row: 4; }<html> <div class="wrapper"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> </div> </html>Two important CSS properties to set for full height pages are these:
Allow the body to grow as high as the content in it requires.
html { height: 100%; } Force the body not to get any smaller than then window height.
body { min-height: 100%; } What you do with your gird is irrelevant as long as you use fractions or percentages you should be safe in all cases.
Have a look at this common dashboard layout.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
