I'm facing an issue with organizing choices and matches in columns using grid CSS. Currently, the match column is overlapping with the choice column.
Here is how it is coded at the moment:
.grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap:12px;
}
.grid>div{
padding:12px;
margin:0;
color:#fff;
background:#222;
}
.choice{
grid-column-start: 1;
}
.match{
grid-column-start:2;
grid-row-start:1;
}<div class="grid">
<div class="choice">Choice 1</div>
<div class="choice">Choice 2</div>
<div class="choice">Choice 3</div>
<div class="match">Match 1</div>
<div class="match">Match 2</div>
<div class="match">Match 3</div>
</div>If I remove grid-row-start, it shifts to the second line.
Please note that this is just a sample and the actual question involves a variable number of matches and columns.