[FEATURE REQUEST] Grid

[ckizer]

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 ===========================

[pdfowler]

https://github.com/tachyons-css/tachyons/issues/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)

[dangayle]

Grid support has been added here: https://github.com/tachyons-css/tachyons/pull/705