Grid

[turolopezsanabria]

Layout Grid

Ready to work on it, reported as issue here

Read the discussion below, the winner is option C

[andresin87]

Context

The layout grid component adapts to screen size (responsive), ensuring consistency across layouts. The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Based on our design principles, this component is based on a 12 column grid layout.

In the package you can find:

• LayoutGrid
• LayoutGridItem

<LayoutGrid>
  <LayoutGridItem>...</LayoutGridItem>
  <LayoutGridItem>...</LayoutGridItem>
</LayoutGrid>

^1.1.0

We start developing @s-ui/react-layout-grid@1. This version is mobile-first, which means that the default:

.sui-LayoutGrid {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 -8px;
  width: calc(100% + 16px);
}
@media (min-width: 600px) {
  .sui-LayoutGrid {
    flex-wrap: nowrap;
  }
}

• Grid Item is 12/12 columns default width (100%).
• 🖥 : elements do not wrap
• 📱 : elements wrap

Codesandbox DEMO v1

^2.0.0

The default behavior makes user be declarative with the desired bahavior.

• Grid Item is 1 columns default width (1/12 => 8.333%).
• 🖥 : elements wrap
• 📱 : elements wrap

Codesandbox DEMO v2

The problem

The transition between v1 and v2 is a pain because it forces users to be declarative on each item

Solutions

We appreciate feedback ❤️ so please let us know which solution or solutions you prefer and also which one might not be considered.

You can use reaction icons to each proposed solution for voting:

• 👍 : like.
• 👎 : dislike.
• 😕 : half-hearted.

You can vote as much as you want. Only defined icons will count.

You can find out more info in this twitch stream

[andresin87]

A.- Let it be

I love v2 as is. In my opinion each system might be as mush specific and deterministic as it can be. If we have a 12 column grid system, each item must be 1/12 width by default and I might define the number of columns used for each range until the next bigger defined size. Doesn't matter how much code i need to repeat, i can cache the default behavior and use them in all cases overrwritting the special cases:

const defaultColumns = {
  xxs: 12,
  s: 6,
  l: 3,
  xl: 2,
  xxl: 1
}

...

return (
  <LayoutGrid>
    <LayoutGridItem {...defaultColumns} />
    <LayoutGridItem {...defaultColumns} l={2} />
    <LayoutGridItem {...defaultColumns} l={2} />
    <LayoutGridItem {...defaultColumns} />
  </LayoutGrid>
)

[andresin87]

B.- Back to the future

I'm comfortable with the v1 behavior. Mobile first it the way i think-design-code. Things might be fullscreen unless i decide to do NOT for mobile devices. I want to delegate the default behavior to the css. Please, come back to the v1 taking the advantages of v2 and publish an v3 with it.

return (
  <LayoutGrid>
    <LayoutGridItem />
    <LayoutGridItem />
    <LayoutGridItem />
    <LayoutGridItem />
  </LayoutGrid>
)

max-width: 600px:
· –––––––––––– ·
| *************** |
· –––––––––––– ·
| *************** |
· –––––––––––– ·
| *************** |
· –––––––––––– ·
| *************** |
· –––––––––––– ·

higher:
· –––––––––––– · –––––––––––– · –––––––––––– · –––––––––––– ·
| *************** | *************** | *************** | *************** |
· –––––––––––– · –––––––––––– · –––––––––––– · –––––––––––– ·

[andresin87]

C.- Just the two of us

Continuous improvement is my second name. I think we can offer the best of both cases giving an hybrid where you can specify on the parent LayoutGrid the default Items behavior and do not repeat on each item everytime. This makes the js deterministic does not beak any v2 rule but column behavior doesn't need to be defined each time.

return (
  <LayoutGrid xxs={12} s={6} l={3} xl={2} xxl={1}>
    <LayoutGridItem />
    <LayoutGridItem l={2} />
    <LayoutGridItem l={2} />
    <LayoutGridItem />
  </LayoutGrid>
)

[adriadoz]

The C approach is nice too!