I need to use the following code:
grid-template-columns: repeat(12, 1fr);
I need the height of div2 (height: 100px, for example) not to affect the position of div3 (which needs to be in the same position as if there were no height: 100px for div2).
Complete code:
#grid1 {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 15px;
}
#div1 {
grid-column: span 8;
}
#div2 {
grid-column: span 4;
height: 100px;
background-color: #dd4b39;
}
#div3 {
grid-column: span 4;
}<div id='grid1'>
<div id='div1'>
<input type='number' style='width: 100%;'>
</div>
<div id='div2'>
<input type='number' style='width: 100%;'>
</div>
<div id='div3'>
<input type='number' style='width: 100%;'>
</div>
</div>Again, I need to keep this structure:
grid-template-columns: repeat(12, 1fr); with display: grid;.