Search code examples
csscss-grid

CSS grid with 2 columns to fit two items per row dynamically

I'm trying to get this layout to work with CSS grid:

enter image description here

So basically I have input and textarea. The textarea would take the size of 2 inputs so, if there is a textarea in the previous column, I want the next column to fit 2 inputs. The number of inputs/textareas will vary (it comes from back-end).

Is this possible with CSS grid only?

This is what I have at the moment:

.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>

Solution

  • Tell the textarea items to span two rows.

    The inputs will then fill the second row of the textarea.

    /* new */
[textarea] {
  grid-row: span 2;
}

/* original code */
.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" textarea><!-- adjustment here -->
    <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" textarea><!-- adjustment here -->
    <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>