Make responsive columns more configurable

Ideas and Feedback
1

The responsive column component would be much easier to use if the “number of columns” property would behave like any other value field in Plasmic. Meaning that you can set its value depending on breakpoint and variant. That would allow easy responsive layout for responsive lists of products etc.

Or am I missing something here?

Screenshot 2021-08-06 at 12.49.22.png

2

Are you thinking of something like a product grid, which would lay out some arbitrary number of things in either 3 columns or 5 columns etc depending on variants?

3

Yes exactly! Any suggestions on how to achieve that? My idea would have been to create a custom code component that implements a grid layout and allows changing the column count via a prop

4

Can’t really achieve this with responsive columns or flexboxes… You’d probably want to use css grids, which we don’t yet support in the studio. You’ll have to override from code to attach your own css class with the grid layout for now :sweat_smile:

Here are some to get started with: https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/

5

Hi Matthias,
I have attached a sample video. Do you want something similar?

I managed to do it by using meta-prop and utilizing responsive columns as a component. It’s a bit hacky but possible within Plasmic Studio :smile:

Note: Studio doesn’t allow converting column box to component but we can create component out of it using the shortcut key :stuck_out_tongue:.

Psuedo Code

  1. Create a component out of columns
  2. Create a separate component out of column
  3. Call them in your code to create dynamic number of columns columns
function ResponsiveList_(props, ref) {
  const data = [
    'red', 'green', 'yellow',
    'blue', 'orange',
    'purple', 'pink', 'cyan',
  ]
  
  var newArr = data.reduce((tempArr, val, idx)=>{
    if(idx % (props.numberOfColumns || 1) === 0){
      tempArr.push([]);
    }
    tempArr[tempArr.length-1].push(val)
    return tempArr
  }, [])

  return (
    <PlasmicResponsiveList
      root={{
        wrapChildren: (children) => (
          newArr.map((row, index) => {
            return (
                <ResponsiveColumnContainer>
                  {
                    row.map(item => (
                      <ResponsiveColumn>
                        <PlainBox color={item} />
                      </ResponsiveColumn>
                    ))
                  }
                </ResponsiveColumnContainer>
              )}
            )
        )
      }}
      {...props}
    />
  );
}

numberOfColumns is a meta prop which can be configured for multiple breakpoints using Studio.
CC: @chungwu

6

The idea came into my mind when I first encounter the same problem. Some details in the given thread.
https://plasmiccommunity.slack.com/archives/C0128PVPESU/p1623421140115300