Comments (13)
Probably because batching doesn't happen while loading
The following phenomena may occur.
Try to set data-grid-lazy="true" on item element?
from egjs-grid.
Modify the column value directly through resize event or resizeObserver.
grid.column = 2 ~ 4
from egjs-grid.
Hi, I'm encountering an issue with columns in which one of the columns with a percentage width doesn't have enough space to fill out its spot when the gap option is set.
Here's a pen.
from egjs-grid.
align: 'justify', independent of gap.
If so, change it to align: "center", "start", "end".
from egjs-grid.
Hi @daybrush, even if I align the columns differently, the layout is not correct. There should be 3 columns instead of 2 as each column has width of 33.333%
. Please see the example in the previous message. Preferably, the script should take column width into consideration when calculating the gap?
from egjs-grid.
33.333%, so the sum of the three is 100%.
Therefore, it is difficult to set the gap to 30 (set 0).
from egjs-grid.
Yes, but if I set gap to 0
then there'll be no gap between the columns. I was hoping the script would calculate the gap taking column width into consideration. Does it make sense?
from egjs-grid.
I did sort it out this way btw:
<div class="w-full md:w-[calc(50%-(1rem/2))] lg:w-[calc(33.333333%-(1rem/(3/2)))]{% if loop.index === 1 %} lg:pt-40{% elseif loop.index === 3 %} lg:pt-20{% endif %}">
But this is not an ideal solution. The grid library should ideally compute the gap without me adjusting the column width.
from egjs-grid.
It can't be helped because you set the width yourself.
If you expect to automatically change the width, try setting it with the following option. Instead, you must input the column
value directly.
columns: 3,
gap: 30;
align: "stretch",
from egjs-grid.
Okay, I tried it, but it's overflowing its parent container now. Moreover, is there a way to set column breakpoints for different viewport widths?
![Screenshot 2023-05-09 at 11 53 04](https://private-user-images.githubusercontent.com/47005900/237075706-97ef6388-43b8-42f9-97eb-3f8d70814761.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg4ODM0NTcsIm5iZiI6MTcxODg4MzE1NywicGF0aCI6Ii80NzAwNTkwMC8yMzcwNzU3MDYtOTdlZjYzODgtNDNiOC00MmY5LTk3ZWItM2Y4ZDcwODE0NzYxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIwVDExMzIzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM4NjQ5Y2U1YWYyZDJiZjIyZmFhNmJjMWFmY2MyMzQ0ZDdhZGQ2YWZiYWY4MWQ3NDQ2ZDQ3OGNlMjMyYWI1MGQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.O4W_LYxLfh7iaAbh88OnXnmC6IiyAMYQSGl6MuB2BuQ)
from egjs-grid.
![image](https://private-user-images.githubusercontent.com/3433062/237078064-82bae58d-e2e4-43dd-9c40-714d238191b1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg4ODM0NTcsIm5iZiI6MTcxODg4MzE1NywicGF0aCI6Ii8zNDMzMDYyLzIzNzA3ODA2NC04MmJhZTU4ZC1lMmU0LTQzZGQtOWM0MC03MTRkMjM4MTkxYjEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjBUMTEzMjM3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZmYzMDlkMTMxZjkwMzAzYzJjYmIyMzhkZGI5OGQ0M2Q5MGRiYjIzZTY0NDE5NTI1ZWMzMTNiZWQ1OGZiYjQ3OCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.bmhxqrMi1IcYh9_4AftoWpW5op06iUfid9yVMXn4wQA)
Try modifying align to "stretch".
from egjs-grid.
Ouh nice, that works, thanks! :)
One more question, how to handle responsivity when it comes number of columns or gap width?
from egjs-grid.
Awesome, thank you. It's great library in any case.
from egjs-grid.
Related Issues (20)
- How to update grid after hiding some divs? HOT 3
- Function aligned to top
- Set gap with different value for horizontal and vertical
- feat: add `stretch` option
- build failed with SvelteKit latest version HOT 3
- DOESNT RE-RENDER - If children sizes change HOT 5
- ResizeObserver related bug in safari 15.3
- Using align stretch makes the vertical spacing between items appear empty.
- Vanilla Svelte renders images as list instead of a grid HOT 2
- TypeError TS2322: is missing the following properties from type - Vue 3 - TypeScript HOT 1
- svelte package does not work HOT 2
- A phenomenon in which the size of the resize observer is not updated in iOS
- FrameGrid: relationship of frame property to resulting layout is not obvious HOT 1
- Can isEqualSize be used when there are two or more size groups?
- Can I change the container of MasonryGrid? HOT 2
- `0` size group should be recognized.
- how to get current column count HOT 2
- Angular 16 compatibility HOT 7
- A problem that does not work when data-grid-column is set to 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from egjs-grid.