jbaysolutions/vue-grid-layout

How to achieve "horizontal-compact"?

Open

#161 opened on Mar 8, 2018

View on GitHub
 (8 comments) (5 reactions) (0 assignees)JavaScript (6,777 stars) (1,436 forks)batch import
enhancementhelp wantedquestion

Description

I want to leave no gap in between any items, be it horizontal or vertical gap. There's a param for vertical-compact where I can take of the vertical gap. How to achieve the same thing for horizontal?

For example, for a grid with 4 columns, [1] should have snapped back next to [0] here:

Simple Grid

Contributor guide

Tech stack
vuejavascript
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Vue.jsgrid layout concepts
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
First, examine how the 'vertical compact' option is implemented in the source code, likely in the grid layout calculation logic (e.g., in a file like `gridLayout.js` or similar). Then, design a similar horizontal compact algorithm that removes horizontal gaps between items. Review the existing layout algorithm to ensure compatibility and test with the provided example of a 4 column grid. Consult the issue comments for any additional context or suggested approaches.