Koicha Comments - Answer Overflow

I want it to wrap based on the browser will do the automatic calculation without explicitly telling it to be 3 columns, 2 columns, 7 columns, etc.. The browser will need to do it automatically for me

77 replies

KPCKevin Powell - Community

•Created by Koicha on 8/22/2024 in #front-end

How do I choose column from 1-12 and make it auto responsive using grid?

The grid-layout component is wrapping the children for example like this

<grid-layout columns="3">
  <input type="text" v-model="text1" />
  <input type="text" v-model="text2" />
  <input type="text" v-model="text3" />
  <input type="text" v-model="text4" />
  <input type="text" v-model="text5" />
  <input type="text" v-model="text6" />
</grid-layout>

<grid-layout columns="3">
  <input type="text" v-model="text1" />
  <input type="text" v-model="text2" />
  <input type="text" v-model="text3" />
  <input type="text" v-model="text4" />
  <input type="text" v-model="text5" />
  <input type="text" v-model="text6" />
</grid-layout>

77 replies

KPCKevin Powell - Community

•Created by Koicha on 8/22/2024 in #front-end

How do I choose column from 1-12 and make it auto responsive using grid?

It is pretty simple. If I want the developer to use the component that is called grid-layout and they want to adjust the column based on the layout of the column, then it will be for example 5 columns by using the props that is called columns

<grid-layout columns="5">...</grid-layout>

<grid-layout columns="5">...</grid-layout>

It's just the implementation I am trying to fix doesn't work

77 replies

KPCKevin Powell - Community

•Created by Koicha on 8/22/2024 in #front-end

How do I choose column from 1-12 and make it auto responsive using grid?

but if I changed it to 3rem, then it wont work as expected either, and it will become 5 columns

77 replies

KPCKevin Powell - Community

•Created by Koicha on 8/22/2024 in #front-end

How do I choose column from 1-12 and make it auto responsive using grid?

that is pretty arbitrary number

77 replies

KPCKevin Powell - Community

•Created by Koicha on 8/22/2024 in #front-end

How do I choose column from 1-12 and make it auto responsive using grid?

77 replies

KPCKevin Powell - Community

•Created by Koicha on 8/22/2024 in #front-end

How do I choose column from 1-12 and make it auto responsive using grid?

Hmm, so I changed it to

grid-template-columns: repeat(var(--columns), minmax(0, 1fr));

grid-template-columns: repeat(var(--columns), minmax(0, 1fr));

The column is working now. Unfortunately, the auto responsiveness is not there 😦

77 replies

KPCKevin Powell - Community

•Created by Koicha on 8/22/2024 in #front-end

How do I choose column from 1-12 and make it auto responsive using grid?

you can try to see if it works with your solution using codepen. I will of course adapt your code using Vue

77 replies

KPCKevin Powell - Community

•Created by Koicha on 8/22/2024 in #front-end

How do I choose column from 1-12 and make it auto responsive using grid?

yes, the browser sees it is grid

77 replies

Gaming

Programming