I couldn't quite grasp the intention behind your current CSS layout as it didn't seem to fully utilize the web page space effectively. Here are some suggestions you might want to consider:
SOLUTION
- Ensure that both your
<html> and <body> tags occupy the entire height of the viewport using CSS to allow your grid to fill the entire page (refer to the HTML snippet below for guidance).
- Make sure that elements within the body, such as your grid
<div>, also use CSS to take up the full height of the viewport. It's recommended to set the <body> tag as the parent for the grid, ensuring complete page width and height.
- When working with grids, decide whether rows or columns should dictate how the page is filled. Specify this logic in your code to avoid any ambiguity for the browser. In the provided example, I used rows to ensure vertical filling by setting
auto-fit, which removes excess space while maintaining full window coverage.
- If you mentioned using 6 rows but the design doesn't reflect that, consider allowing for dynamic row creation based on the number of child cells added. This approach ensures all cells share the vertical space evenly, adapting to different amounts of content.
- The demonstrated layout accommodates an unlimited number of cells, dynamically adjusting to fit the entire browser viewport space.
This design will fluidly adapt to varying viewport sizes, either stacking vertically by rows like in the initial example or horizontally by columns, depending on your requirements.
All examples showcase a responsive design that fills the entire browser viewport proportionally.
<!doctype html>
<html style="width:100%;height:100%;">
<head>
</head>
<body style="margin:0;padding:0;height:100%;">
<style type="text/css">
.container {
min-width:100%;
min-height:100%;
padding: 0;
margin: 0;
display: grid;
grid-template-rows: auto-fit;
grid-template-columns: repeat(3,1fr);
}
.container div[class^=item] {
grid-column: 1 / 4;
border: 1px solid black;
background:green;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
<!-- I added this cell to show how items not part of the grid CSS stack under the full viewport grid. -->
<div>6</div>
To align the cells horizontally within the available columns while permitting rows to expand as new cells are added to the viewport, remove the "grid-column" property from the CSS block as outlined below. This adjustment allows the blocks to stack horizontally within the space, potentially achieving the desired outcome more effectively.
.container div[class^=item] {
border: 1px solid black;
background:green;
}