24 columns instead of 12 columns #7502
Replies: 3 comments 4 replies
-
You can add 24 or any number of columns you need, by extending your module.exports = {
theme: {
extend: {
gridTemplateColumns: {
// 24 column grid
'24': 'repeat(24, minmax(0, 1fr))',
}
}
}
} And then you can use the More info: Tailwind CSS Docs |
Beta Was this translation helpful? Give feedback.
2 replies
-
const generateGrid = (size) => {
const gridColumn = {};
const gridTemplateColumns = {};
const gridRow = {};
const gridTemplateRows = {};
const gridRowStart = {};
const gridRowEnd = {};
const gridColumnStart = {};
const gridColumnEnd = {};
for (let i = 1; i <= size; i++) {
gridRow[`span-${i}`] = `span ${i} / span ${i}`;
gridColumn[`span-${i}`] = `span ${i} / span ${i}`;
gridTemplateColumns[i] = `repeat(${i}, minmax(0, 1fr))`;
gridTemplateRows[i] = `repeat(${i}, minmax(0, 1fr))`;
gridRowStart[i] = `${i}`;
gridRowEnd[i] = `${i}`;
gridColumnStart[i] = `${i}`;
gridColumnEnd[i] = `${i}`;
}
return {
gridColumn,
gridTemplateColumns,
gridRow,
gridTemplateRows,
gridRowStart,
gridRowEnd,
gridColumnStart,
gridColumnEnd,
};
}
module.exports = {
theme: {
extend: {
...generateGrid(24),
}
}
} |
Beta Was this translation helpful? Give feedback.
1 reply
-
Fun aside — in v4 you don't have to think about this stuff, all of the grid utilities support any number from 0 to infinity out of the box 👍 |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
It's just a suggestion or in case you guys have any workaround for using 24 columns system instead of 12 columns like antdesign in tailwindcss it will give developers granular control over their designs. I mean if you have any workaround for it do let me know.
Beta Was this translation helpful? Give feedback.
All reactions