How to stop columns splitting individual elements

Question

I'm trying to use css columns and grid to get a variable column table. I need the columns to be in the same multiples (ex. 3, 6, 9). With chrome however it splits right in the middle of elements like label, input, span, etc. I can't have half a label or input in different columns. Display:inline-block doesn't seem to work - I guess because it's inside the grid. It seems flexbox doesn't work with columns. Is there a simple way to do this? Example:

https://codepen.io/j1dopeman/pen/EpBvmR

Looks fine on firefox, but splits text in chrome.

<div class="container">
  <div class="grid">
    <label>ygygjj</label>
    <input type='number' />
    <span>ygygjj</span>
    ... a bunch of times
  </div>
</div>


.container {
  columns: 3 300px;
}

.grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Try `white-space:nowrap` in the fields that you want to prevent the splitting — Ramesh, Aug 16 '18 at 13:26
Columns is set to split anywhere so that it creates even column heights, if you do not want this, then use something like flex where you can control where your column splits — Pete, Aug 16 '18 at 14:57
It's supposed to split text in half horizontally? Input boxes? Images? — John, Aug 16 '18 at 15:33

John · Accepted Answer · 2018-11-15T12:51:54.093

I ended up getting rid of css columns and making a grid within a grid. The container div has:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(33em, 1fr));
}

and inside are div's around the label/input/span with:

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

It seems to work well unless the resolution gets really small. It will never become less than 3 columns (1 row) which hasn't been a problem so far.
Codepen:
https://codepen.io/j1dopeman/pen/gQWdvg

How to stop columns splitting individual elements

1 Answers1