How to set a minimum number of items in a column

[alexjackhughes]

Hello! Firstly, massive thanks for this library, its nice to keep everything in Tailwind, so appreciate you stepping up.

---

My issue is that on a certain screen size, I want there to be four columns that fill out so that one item goes into each column.

| 1 | 2 | 3 | 4 |

What appears to happen is the content fills out left-right, with the first column getting at least two items, and then populating the rest of the columns depending on how many items you have left.

| 1 | 3 | | |
| 2 | 4 | | |

Would it be possible to do this? It feels like I may be missing something obvious, any help that you can give would be appreciated 🙏

  <div className="flex flex-col md:flex-row h-full w-full">
    <div className="w-full col-count-1 xl:col-count-2 3xl:col-count-4 gap-x-5">
      {items.map((item, index) => (
        <div key={index} className="mb-5 inline-block w-full">
          {item}
        </div>
      ))}
    </div>
  </div>

[luii]

What exactly are you trying to put into columns - the Cards or the elements inside your cards?

Besides that, did you installed the package from hacknug - if so please use npm i -S @luii/tailwindcss-multi-column.
The Author seems to be inactive so i updated it for him to 2.0.1 but it should work just fine with 2.0.4.

Pull request with the update to 2.0.1: #18

[alexjackhughes]

Hey @luii - I'm trying to put the cards inside the columns - so in the screenshots, there's four columns with three cards, which creates a layout like this:

| 1 | 3 | | |
| 2 | | | |

Because the first column takes a minimum of two items. What I'm trying to do is on a four column grid, have the items fill each column first before going on to the next row.

Hopefully that makes sense?

[luii]

Yes it do makes sense. I tested it with the newest release of tailwindcss with purge and without JIT.
But i would advise against using the column property, instead use a CSS Grid which also can do the same.
Also i noticed that Firefox on the newest release won't display the columns like Chrome on the newest release would do.

Tailwind Config:

module.exports = {
  purge: [
    './src/**/*.html',
    './*.html',
    './src/**/*.js',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {           +-------------------- Start from 0 up to the maximum number of columns you want to have 
    extend: {        |
      columnCount: [ 0,1,2,3,4 ],
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@luii/tailwindcss-multi-column')()
  ],
}

PostCSS Config

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Index.html:

<div class="flex flex-col md:flex-row h-full w-full">
    <div class="w-full column-count-1 md:column-count-2 xl:column-count-3 2xl:column-count-4 column-gap-5 column-fill-balance column-rule-dotted">
      <div class="block border rounded">Content of Card 1</div>
      <div class="block border rounded">Content of Card 2</div>
      <div class="block border rounded">Content of Card 3</div>
      <div class="block border rounded">Content of Card 4</div>
    </div>
  </div>

I forgot to rename the properties on the readme of my pull request, so ill do that

I removed the full width and bottom margin on the cards just for testing (though i have to say that the margin bottom is affecting all the cards even if they are in another column)