windicss/windicss

Proposing `col-span-rest` and `row-span-rest` class

3rdstage opened this issue · 0 comments

When using grid, the span of last column or last row can be calculated easily in most case.
Currently the span of each column or row should be specified explicitly. Although there are col-auto and row-auto, their behavior is not clear nor intrinsic. They don't seem to be used span all possible columns.

So, if you want three column grid with 3:3:4 ratio, the following is usual codes

<div class='gird grid-col-10'>
  <div class='col-span-3'> foo </div>
  <div class='col-span-3'> bar </div>
  <div class='col-span-4'> baz </div>
</div>

If you want to change the ratio to 4:4:2, you should change all three class (col-span-3, col-span-3, col-span-2).

But, if we can use a new class like col-span-rest declaring the corresponding column occupies as many columns as possible, like the following. It would make it more easy to define or change the ratio.

<div class='gird grid-col-10'>
  <div class='col-span-3'> foo </div>
  <div class='col-span-3'> bar </div>
  <div class='col-span-rest'> baz </div>
</div>

The rest columns class (col-span-rest) could be used intermediate columns or first column

<div class='gird grid-col-10'>
  <div class='col-span-3'> foo </div>
  <div class='col-span-rest'> bar </div>
  <div class='col-span-4'> baz </div>
</div>