Here is how my div looks: https://i.sstatic.net/2A4vL.png
I came across some discussions on stack overflow but couldn't quite grasp how to implement it in my project. Imagine if I move the mouse pointer between column1 and column2, I want an arrow to appear and adjust the width based on the mouse position. Similarly, if I hover between column2 and column3, I want the height of column2 and column3 to automatically adjust. Here's a snippet of my react code:
const test = () => {
return (
<div className="container">
<div className="column1">
<div className="content">
<h2>Column 1</h2>
{/* Add content for Column 1 here */}
</div>
</div>
<div className="column2">
<div className="content">
<h2>Column 2</h2>
{/* Add content for Column 2 here */}
</div>
</div>
<div className="column3">
<div className="content">
<h2>Column 3</h2>
{/* Add content for Column 3 here */}
</div>
</div>
</div>
);
};
And this is my CSS:
.editor {
display: grid;
/* Adjust the grid-template-columns to allocate less space to the first column */
grid-template-columns: 1fr 2fr; /* You can adjust the values as needed */
grid-template-rows: 2fr 1fr;
gap: 10px;
height: 100vh;
}
.column1 {
grid-column: 1;
grid-row: 1 / span 2;
border: 1px solid #ccc;
padding: 10px;
overflow: auto;
}
.column2 {
grid-column: 2;
grid-row: 1;
border: 1px solid #ccc;
padding: 10px;
}
.column3 {
grid-column: 2;
grid-row: 2;
border: 1px solid #ccc;
padding: 10px;
}