Grid auto width responsive unit classes.

[saas786]

Its not a bug, but rather a feature I am after.

I am used to using Bootstrap framework, and often I use

Auto columns
https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Variable columns
https://getbootstrap.com/docs/4.0/layout/grid/#variable-width-content

<div class="row">
   <div class="col">
     1 of 3
   </div>
   <div class="col-md-auto">
     Variable width content
   </div>
   <div class="col col-lg-2">
     3 of 3
   </div>
 </div>

So I am wondering if same is possible with purecss grid? (responsive included).

Here is simpler pen:

https://codepen.io/saas/pen/qBbXowm

I am willing to explore it further, just need guidance from you, whether this idea has been explored before and not implementable into purecss grid system, or something else?

Looking forward to your input into this.

[lkraav]

I can't recall on mobile whether .pure-u is already functional, otherwise it'd be the best candidate for auto-sized grid unit name, as it's the shortest.

.pure-u-auto is next best, for clarity.

How would these behave on mobile? On mobile, one hardly ever fits anything into columns, so width: 100% sounds reasonable, equal to .pure-u-1

[saas786]

I didn't saw .pure-u info in docs or its use, so might not be functional.

Yep agree, if .pure-u doesn't have any other purpose, it makes a good fit.

By default both .pure-u, .pure-u-auto would behave same on mobile / desktop.

we need to have responsive units for both as well like

.pure-u,
.pure-u-sm,
.pure-u-md,
.pure-u-lg,
.pure-u-xl

.pure-u-auto,
.pure-u-sm-auto,
.pure-u-md-auto,
.pure-u-lg-auto,
.pure-u-xl-auto

So we can mix it with other units like you suggested if needed different behavior on different resolutions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Issue was closed because of inactivity. If you think this is still a valid issue, please file a new issue with additional information.