I am curious about changing grid columns on an implicit row. While I won't provide the exact code that I'm working on, I will offer a brief example to clarify my question.
<div class='container'>
<p>item-1</p>
<p>item-2</p>
<p>item-3</p>
<p>item-4</p>
<p>item-5</p>
<p>item-6</p>
</div>
.container {
display: grid;
grid-template-columns: 2fr 3fr;
}
Here is the scenario: We have 6 grid items and we've specified in the container that we want 2 columns, resulting in an implicit creation of 3 grid rows.
The odd-numbered items fill the first column (2fr), while the even-numbered items fill the second column (3fr).
Now, if I want to adjust the width of the columns in the second row so that the first column is 3fr and the second column is 2fr without rearranging the items, it becomes a bit tricky.
In simple terms, I aim to change the column widths in the second row without modifying anything within the 'container' class.