More columns in grid than expected when using col-span

[dseebacher]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [1.0.1]
My browser is: Firefox, Chrome

Description

I'm not sure if this is expected behavior or a bug:

I got a fixed grid with more than 1 column, but would like to restrict it to just 1 column on mobile. While this works out fine, it seems to collide with a potential is-col-span-*, where the span wins.
In my opinion the column definition should overrule the span definition, especially as I have no option to redefine the span on mobile.

Steps to Reproduce

The example in the description

<div class="fixed-grid has-1-cols has-2-cols-tabled">
  <div class="grid">
    <div class="cell">Cell 1</div>
    <div class="cell is-col-span-2">Cell 2</div>
    <div class="cell">Cell 3</div>
    <div class="cell">Cell 4</div>
    <div class="cell">Cell 5</div>
    <div class="cell">Cell 6</div>
  </div>
</div>

A simplified example:

<div class="fixed-grid has-1-cols">
  <div class="grid">
    <div class="cell">Cell 1</div>
    <div class="cell is-col-span-2">Cell 2</div>
  </div>
</div>

Expected behavior

If I use has-1-cols on a fixed grid, it should only display 1 column, regardless of cell configuration.

(has-1-cols overrules is-col-span-2)

Actual behavior

By using has-col-span-2 I force a 2 column grid, ignoring the actual fixed-grid configuration.

( is-col-span-2 overrules has-1-cols)

Suggestion

I fix it by overriding the grid-column-end value like this (not sure if there are any side effects):

grid-column-end: span min(var(--bulma-grid-column-count), var(--bulma-grid-cell-column-span));

[jgthms]

Interesting. Yeah, with CSS Grid, if a cell uses span or start/end that goes beyond the number of columns defined by the grid container, then it will create a larger implicit grid to accomodate the cells.

Your use of the min() function is interesting, but also goes against the normal use of CSS Grid, which some users might prefer. It's almost a breaking change actually.

Let me have a think.