How to enforce ".wa-grid" not to wrap containers?

[HovKlan-DH]

If I have this code here:

<div class="wa-grid">
    <div class="showBorder"></div>
    <div class="showBorder"></div>
    <div class="showBorder"></div>
    <div class="showBorder"></div>
    <div class="showBorder"></div>
    <div class="showBorder"></div>
</div>
<style>
.showBorder {
    border-color: red;
    border-style: solid;
    border-width: 1px;
}
</style>

This will wrap the containers when window gets reduced, but ideally I want it to keep all 6 containers enforced in one row? Any ideas for that?

Like the text-nowwrap :-)

Also, I find it a little confusing that something is a class while others are DOM elements? E.g. why isn't this grid here a <wa-grid> element, and why is <wa-avatar> not "just" a class? This I find a little confusing 🤔

Just for info, then I "normally" handle a case like this with a table - something like this:

<table>
    <tr>
        <td>Content</td>
        <td class="divider"></td>
        <td>Content</td>
        <td class="divider"></td>
        <td>Content</td>
        <td class="divider"></td>
        <td>Content</td>
        <td class="divider"></td>
        <td>Content</td>
        <td class="divider"></td>
        <td>Content</td>
    </tr>
</table>
<style>
.divider {
    width: 20px;
}
</style>

But this must bne better to handle though "native" <div> and not clutter it with styling from tables :-)

[LeaVerou]

Hi @HovKlan-DH!

To clarify, you need every element with a class of showBorder on the same line?
If so, that’s actually the default behavior of the gap utilities, which you would place on the parent element (the same one you've used wa-grid on). E.g. assuming you want a medium gap:

<div class="wa-gap-m">
    <div class="showBorder"></div>
    <div class="showBorder"></div>
    <div class="showBorder"></div>
    <div class="showBorder"></div>
    <div class="showBorder"></div>
    <div class="showBorder"></div>
</div>

Also, I find it a little confusing that something is a class while others are DOM elements? E.g. why isn't this grid here a <wa-grid> element, and why is <wa-avatar> not "just" a class? This I find a little confusing 🤔

That is an excellent point! We do plan to add docs explaining the decision process around this. In a nutshell, we try to use the most lightweight form that allows us to still expose a nice API for users. If something can be implemented as a utility class without it being a hassle to use, it will most likely be a utility class. However, many things (some would say the most interesting things 😀) cannot be implemented as utility classes without their usability taking a serious hit, i.e. requiring more work from you to use them. Either because they need extra attributes, or extra elements, or behavior, or all three. For the many such things, we usually go with a component (i.e. a <wa-*> element). There are exceptions, and this is a simplified summary, but that's the gist.

We don't expect you to remember that distinction, and plan to improve the information architecture of our docs to make things easier to find without having to remember what syntax pattern they use.
Until then, you can hit / on any page to search all our docs, across components, utility classes, and everything else.

Hope this helps! 😊

[HovKlan-DH]

I will mark this as the answer, but I am confused why this does work better than the <wa-grid>, as this seems to do exactly what I wanted, except I wanted a "fixed" grid, and not a dynamic grid 🤔

.wa-gap-m should (in my understanding) keep a gap between elements, which it does, but it should not affect anything in terms of container wrapping to "a new line" - so why does this actually work (it does work and does not wrap when shrinking the window)?

Sounds great with the documentation. I can fully understand that documentation is not something you want to spend much time on until things have been settled, and I am sure that by time this will be perfect.

[LeaVerou]

Oh absolutely, their intended usage is setting the gap size. Sorry I didn't clarify; I was just suggesting it as a workaround for now (since they also set display: flex with lower priority), until we figure out a better way to expose this as a proper utility 😊

Thanks for the additional data point about needing a fixed grid. Pinging @lindsaym-fa who is the mastermind behind our layout utils in case she may be able to suggest something better that already exists. If not, we will work on figuring out how to best expose this, as I believe it's a pretty common need.

Just to get more information, what would you want to happen in smaller screens with the layout you were trying to achieve?

[lindsaym-fa]

Hey, @HovKlan-DH! If you like the semantics of .wa-grid and want the items within not to wrap, you can set the custom property --min-column-size to 0ch (or any other unit, like 0px) on the .wa-grid container. Here's an example: https://codepen.io/omnifides/pen/MYWWoow

Out of the box, .wa-grid items will wrap when they are less than 20ch wide. --min-column-size allows you to change that breakpoint to whatever works for you! (For reference: https://backers.webawesome.com/docs/utilities/grid/#sizing)

[HovKlan-DH]

Thanks both, but I think that @lindsaym-fa solution with .wa-grid is a more clean solution, and with your explanation then I now understands this a little better.

I didn't realize how I could use this, and I would have appreciated something like this added text in the documentation:

You can have the grid static and not wrapping its elements by setting --min-column-size: 0ch.

Just for you to understand my use-case, then I do have this links-page with 5 columns (1-8 columns), where I do not want the columns to wrap, no matter how much the window shrinks:

In case of too much content, then it should just show a horizontal scroller.