CODEWITHSUNDEEP
htmlcssflexboxcss-gridcss-multicolumn-layout
John
John

Reputation: 573

How to stop columns splitting individual elements

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;
}

Upvotes: 0

Views: 364

Answers (1)

John
John

Reputation: 573

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

Upvotes: 1

Related Questions