I am encountering CSS issues while attempting to develop a React app using Next.js.
Here is the content of my home.module.css:
.grid_container {
/* display: grid; */
/* grid-template-columns: auto auto auto; */
/* column-count: 3;
align-items: flex-start; */
/* align-content: space-evenly; */
align-items: stretch;
column-count: 3;
/* column-gap: 500px; */
border: solid;
width: 100vw;
height: 100vh;
}
.left_pane {
justify-content: left;
border-style: solid;
float: left;
width: 25%;
height: 300px;
}
.center_pane {
justify-content: left;
border-style: solid;
float: left;
width: 50%;
height: 300px;
}
.right_pane {
justify-content: left;
border-style: solid;
width: 25%;
float: right;
height: 300px;
}
Next, here is index.js:
export default function Home() {
return (
<div className={styles.grid_container}>
<div>
<div className={styles.left_pane}>
<h2>Left Pane</h2>
</div>
<div className={styles.center_pane}>
<h2>Center Pane</h2>
</div>
<div className={styles.right_pane}>
<h2>Right Pane</h2>
</div>
</div>
)
}
Observation: https://i.sstatic.net/6K46K.png
Why are the columns wrapping instead of occupying the entire frame as intended?
.grid_container {
/* display: grid; */
/* grid-template-columns: auto auto auto; */
/* column-count: 3;
align-items: flex-start; */
/* align-content: space-evenly; */
align-items: stretch;
column-count: 3;
/* column-gap: 500px; */
border: solid;
width: 100vw;
height: 100vh;
}
.left_pane {
justify-content: left;
border-style: solid;
float: left;
width: 25%;
height: 300px;
}
.center_pane {
justify-content: left;
border-style: solid;
float: left;
width: 50%;
height: 300px;
}
.right_pane {
justify-content: left;
border-style: solid;
width: 25%;
float: right;
height: 300px;
} <div class="grid_container">
<div class="left_pane">
<h2>Left Pane</h2>
</div>
<div class="center_pane">
<h2>Center Pane</h2>
</div>
<div class="right_pane">
<h2>Right Pane</h2>
</div>
</div>