I am attempting to create this layout using CSS grid:
https://i.sstatic.net/Ktbnm.png
The goal is to have an input and a textarea. The textarea should be of the size of 2 inputs. If there is already a textarea in the previous column, the next column should accommodate 2 inputs. The number of inputs/textareas will vary (determined by the back-end).
Can this be achieved with CSS grid alone?
This is what I currently have:
.textContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: .75rem 1rem;
}
.inputGroup {
display: flex;
flex-direction: column;
}
.input {
border: 1px solid gainsboro;
border-radius: 8px;
margin-top: .5rem;
padding: 0.5rem 1rem;
resize: none;
}<div class="textContainer">
<div class="inputGroup">
<label>Label 1</label>
<textarea rows="5" class="input"></textarea>
</div>
<div class="inputGroup">
<label>Label 2</label>
<input type="text" class="input" />
</div>
<div class="inputGroup">
<label>Label 3</label>
<input type="text" class="input" />
</div>
<div class="inputGroup">
<label>Label 4</label>
<input type="text" class="input" />
</div>
<div class="inputGroup">
<label>Label 5</label>
<input type="text" class="input" />
</div>
<div class="inputGroup">
<label>Label 6</label>
<input type="text" class="input" />
</div>
<div class="inputGroup">
<label>Label 7</label>
<input type="text" class="input" />
</div>
<div class="inputGroup">
<label>Label 8</label>
<textarea rows="5" class="input"></textarea>
</div>
<div class="inputGroup">
<label>Label 9</label>
<input type="text" class="input" />
</div>
</div>