[FEATURE REQUEST] Grid
ckizer opened this issue · comments
CSS Grid doesn't often need a lot of predefined css classes. However, I've found some really useful ones that I use often.
I'd love to see support for display: grid
in the form of .dg
There's currently no modern css library that includes default grid styles. Tachyons could be the first one to include some predefined grid styles.
Often in development you really only need between 1-6 columns, and many times equal width. You can also set the default flow to columns or rows.
Grids are a great compliment to Tachyon. Having a few basic classes, will probably leave a lot of developers preferring grid classes.
Here's mine (Sass)
// =================================================
// START Court's Utilities Up Top
// =================================================
.dg, .display-grid
display: grid
.grid-col, .grid-col
grid-auto-flow: column
.grid-row, .grid-row
grid-auto-flow: row
// ======= Grid Gap ==================
.gg0
grid-gap: var(--spacing-none)
.gg1
grid-gap: var(--spacing-extra-small)
.gg2
grid-gap: var(--spacing-small)
.gg3
grid-gap: var(--spacing-medium)
.gg4
grid-gap: var(--spacing-large)
.gg5
grid-gap: var(--spacing-extra-large)
.gg6
grid-gap: var(--spacing-extra-extra-large)
.gg7
grid-gap: var(--spacing-extra-extra-extra-large)
// ================ EQUALLY SIZED GRIDS =====================
.grid-2col-equal
display: grid
grid-template-columns: 1fr 1fr
.grid-3col-equal
display: grid
grid-template-columns: 1fr 1fr 1fr
.grid-4col-equal
display: grid
grid-template-columns: 1fr 1fr 1fr 1fr
.grid-5col-equal
display: grid
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
.grid-6col-equal
display: grid
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
.grid-2col-10
display: grid
grid-template-columns: 10% auto
.grid-2col-15
display: grid
grid-template-columns: 15% auto
.grid-2col-20
display: grid
grid-template-columns: 20% auto
.grid-2col-25
display: grid
grid-template-columns: 25% auto
.grid-2col-30
display: grid
grid-template-columns: 30% auto
.grid-2col-35
display: grid
grid-template-columns: 35% auto
.grid-2col-40
display: grid
grid-template-columns: 40% auto
.grid-2col-45
display: grid
grid-template-columns: 45% auto
.grid-2col-50
display: grid
grid-template-columns: 50% auto
.grid-2col-55
display: grid
grid-template-columns: 55% auto
.grid-2col-60
display: grid
grid-template-columns: 60% auto
.grid-2col-65
display: grid
grid-template-columns: 65% auto
.grid-2col-70
display: grid
grid-template-columns: 70% auto
.grid-2col-75
display: grid
grid-template-columns: 75% auto
.grid-2col-80
display: grid
grid-template-columns: 80% auto
.grid-2col-85
display: grid
grid-template-columns: 85% auto
.grid-2col-90
display: grid
grid-template-columns: 90% auto
.grid-2col-95
display: grid
grid-template-columns: 95% auto
// END Court's Utilities ===========================
#372 has a good (albeit dated) discussion on the difficulties of implementing css-grid
in tachyons, and whether it is compatible with the "spirit" of this project.
That said, the bigger question is what is the current status of the project? and is anyone in the community looking to take the lead. There's a (very stale) v5 branch and label floating around with talk of an extension system. I could see adding your grid implementation as an optional add-on/extension.
(There's also a v7 branch fwiw)