search

robsheldon / sscaffold-css

Base file for sscaffold-css.
MIT License
388 stars 14 forks source link

Is there a way to have in-flow children that wrap to the next line if there are too many? #13

Open walterdavis opened 3 years ago

walterdavis commented 3 years ago

I'm accustomed to setting up something like this in Bootstrap:

div.row
   div.col-md-4
   div.col-md-4
   div.col-md-4
   div.col-md-4

and having it render like this:

+----------+  +----------+  +----------+  

+----------+  +----------+  +----------+  
+----------+  

+----------+

But when I use columns four on my in-flow children of row, not matter how many of them I add to the row, they just budge up and never wrap to the next line. Eventually they become too narrow to read.

I'd rather not have to calculate the layout in my Rails app, I'd rather just stuff all the children in the container and let the stylesheet work out the display details.

Is this possible?

Thanks very much for a super-svelte and understandable framework!

walterdavis commented 3 years ago

Here's what I've been able to get going as a start. It's not perfect, in that you can't mix different column widths within the row and have the left margin stay constant. I'm not sure that's even possible given where Sscaffold starts things off in this construction. But in my example above, and in my likely use of this feature, I'm splatting N number of same-width children into the container row, so this should work for me.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Wrap</title>
  <link rel="stylesheet" href="https://scripty.walterdavisstudio.com/sscaffold.min.css">
  <style type="text/css">
    html { font-size: .5em; }
    .columns {
      background-color: #ffc;
      border: 1px solid #ccc;
      /*just for visibility*/
     }
     .row {
       border-bottom: 1px solid red; /*just for visibility*/
     }
    .wrap {
      flex-wrap: wrap;
    }
    .wrap .columns.one:nth-child(12n+1),
    .wrap .columns.two:nth-child(6n+1),
    .wrap .columns.three:nth-child(4n+1),
    .wrap .columns.four:nth-child(3n+1),
    .wrap .columns.six:nth-child(2n+1),
    .wrap .columns.twelve:nth-child(1n+1) {
      margin-left: 0;
    }
  </style>
</head>
<body>
  <main>
    <div class="row wrap">
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
    </div>
    <div class="row wrap">
      <div class="columns two">Two</div>
      <div class="columns two">Two</div>
      <div class="columns two">Two</div>
      <div class="columns two">Two</div>
      <div class="columns two">Two</div>
      <div class="columns two">Two</div>
      <div class="columns two">Two</div>
    </div>
    <div class="row wrap">
      <div class="columns three">Three</div>
      <div class="columns three">Three</div>
      <div class="columns three">Three</div>
      <div class="columns three">Three</div>
      <div class="columns three">Three</div>
    </div>
    <div class="row wrap">
      <div class="columns four">Four</div>
      <div class="columns four">Four</div>
      <div class="columns four">Four</div>
      <div class="columns four">Four</div>
    </div>
    <div class="row wrap">
      <div class="columns six">Six</div>
      <div class="columns six">Six</div>
      <div class="columns six">Six</div>
    </div>
    <div class="row wrap">
      <div class="columns twelve">Twelve</div>
      <div class="columns twelve">Twelve</div>
    </div>
  </main>
</body>
</html>

Any thoughts about how I could improve this approach?

walterdavis commented 3 years ago

Without my additions: image

Note how the overflow columns are just mashed into the row, not wrapped to the next line. Eventually this becomes unreadable.

With: image