Creating a React app has led me to a situation where I need to exhibit a grid to the user. The definition of this grid is extracted from the backend as an object. My objective is for the page to occupy all available space, with a header and footer in place, while the grid should consume the remaining space between them.
In my scenario, the grid must be structured as a 50 columns by 50 rows layout.
To display certain boxes within the grid, the position (x and y) on the grid along with the number of rows and columns each box needs to encompass are defined.
I was able to achieve this successfully, but then I encountered an issue when attempting to insert images inside these boxes. Strangely, as soon as I incorporate images into the boxes, they expand and cause the grid to overflow its parent container. This behavior is undesired; I want the images to fit within the respective box at their original size.
This marks my first time using the CSS property display: grid, making it evident that there might be gaps in my understanding of its functionality.
If anyone can shed light on why this occurs and how I could modify it to align with my intentions, please share your insights.
Here's a basic example illustrating the issue I faced. Simply uncomment the <img/> line below to observe the overflow:
const elements = [{
x: 36,
y: 2,
rows: 7,
cols: 7,
},
{
x: 43,
y: 14,
rows: 7,
cols: 7,
},
{
x: 36,
y: 26,
rows: 7,
cols: 7,
}];
const App = () => {
return (
<div className="App">
<div className="header">
<h2>Header</h2>
</div>
<div className="grid">
{elements.map((elt) => (
<div
className="grid-elt"
style={{
gridColumn: `${elt.x} / ${elt.x + elt.cols}`,
gridRow: `${elt.y} / ${elt.y + elt.rows}`,
}}
>
{/* uncomment the img to see the overflow */}
{/* <img
className="img"
src="https://cdn-icons-png.flaticon.com/512/13371/13371271.png"
/> */}
</div>
))}
</div>
<div className="footer">
<h3>Footer</h3>
</div>
</div>
);
};
// Render it
ReactDOM.render(
<App/>,
document.getElementById("root")
);html {
display: flex;
width: 100%;
height: 100%;
flex: 1;
}
body {
display: flex;
flex: 1;
height: 100%;
margin: 0;
}
#root {
display: contents;
}
.App {
font-family: sans-serif;
text-align: center;
background-color: cadetblue;
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
height: 100%;
margin: 0;
}
.header {
height: 100px;
background-color: bisque;
}
.footer {
background-color: blueviolet;
height: 50px;
}
.grid {
display: grid;
grid-template-columns: repeat(50, 1fr);
grid-template-rows: repeat(50, 1fr);
height: 100%;
width: 100%;
}
.grid-elt {
border: 1px solid red;
}
.grid-elt1 {
grid-com
}
.img {
width: 100%;
height: 100%;
object-fit: contain;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>Although I delved into the documentation on display: grid, no definitive clarification regarding my predicament seemed apparent. It’s plausible that the issue arises due to defining the grid cells and rows utilizing repeat(50, 1fr), but this remains uncertain.