Challenges with Grid Layout
In my current project, I am facing a challenge in creating a responsive layout with a dynamic grid within a page structure that includes a header and footer. The main issue arises when the grid items, designed to resemble books with specific dimensions, are appended to the grid container. Initially, the goal is for the <main> section to expand to fill the available space on the page to prevent the footer from floating halfway up the screen. However, as the number of grid items increases, the page should vertically grow and allow scrolling.
Defining "Book Shape"
When referring to a "book shaped" grid item, it means that each column should occupy two-thirds of the total height allocated for the specific grid item.
Troubleshooting Issues
The primary problem lies in achieving consistent sizing for both columns and rows within the grid. While the columns display correctly, the subsequent rows fail to maintain the desired equal-height appearance. This results in the grid items losing their intended book-like shape.
Attempted Solutions
To address this issue, various strategies were tested, including adding flex: 1 to the <main> element to enable flexible growth. Additionally, using
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));An alternative approach involved setting fixed dimensions for both columns and rows:
grid-template-columns: repeat(auto-fill, 200px);
grid-template-rows: repeat(auto-fill, 300px);
Despite these efforts and additional research on CSS functions like repeat() and auto-fill, the issue persisted. Various suggestions from sources like Stack Overflow were explored, such as adjusting flex-grow and flex-basis, but no definitive solution was found.
Closest Resolution
A breakthrough came when defining rows explicitly rather than relying on auto-fill, leading to successful implementation of evenly sized rows.
grid-template-rows: repeat(12, minmax(250px, 1fr));
However, this workaround entails modifying the .grid style via JavaScript during child element additions. Yet, this method presents challenges if there's a change in page width affecting column count, necessitating constant adjustment of row calculations via JavaScript. Hence, an ideal solution involving solely CSS is sought after.
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 0;
}
header, footer {
height: 40px;
}
main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: grey;
width: 100%;
}
.grid {
display: grid;
width: 60vw;
margin: 5px var(--margin-size) 5px var(--margin-size);
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
gap: 10px;
}
.grid-item {
background-color: red;
}<body>
<header>
Header
</header>
<main>
<div class="grid">
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
</div>
</main>
<footer>
Footer
</footer>
<body>The main inquiry revolves around finding a CSS-based solution to enable the grid to surpass the screen boundaries while preserving the unique book-like appearance of its child elements.