3

Resources like complete-guide-to-grid on css-tricks or grid by example are wonderful, yet I cannot figure out how to build a two-axis table layout.

The data for this layout is a simple weekly schedule, where each day has a 0-n categories and each category has 0-n dishes. The data looks something like this (pseudo-code):

DAY: { CATEGORY: [DISH] }

e.g.

monday: { a: [1, 2], b: [6], d: [5] },
tuesday: { b: [25], e: [0] },
...
friday: { a: [10], b: [9] },

The layout should look like this (note the empty top-left corner):

. MO  TU  WE  TH  FR
A a1              a10
  a2
B b6  b25         b9
D d5

Now, having spent years nesting divs to build layouts, I attempted to design this "layout-in", as is the mantra of css-grid, structuring the html in a way that is decoupled from the target-layout. See this codepen for an example structure.

My first attempt was using grid-areas, like this:

.grid {
  grid-template-areas:
    ". 1  2  3  4  5"
    "a a1 a2 a3 a4 a5"
    "b b1 b2 b3 b4 b5";
    // ...
}

This "works", but now I have to create a class for every single cell in the table, which is silly.

Then I tried to create areas for each axis and one for the center cells:

.grid {
  grid-template-areas:
    ". n n n n n"
    "s x x x x x";
}

This does not work. Assigning x to each cell just stacks them on top of each other in the first x column/row, same thing with n up top. Also, the pattern does not repeat, so we end up with only two rows.

Then I thought about nesting grids, adding another grid under n and x. But this defeats the "layout-in" promise, so I decided against it.

I believe I either fundamentally misunderstand areas, or what I am trying to do is not possible without nesting grids. Any input, or an example two-axis layout using css-grid would be greatly appreciated!

Timm
  • 157
  • 3
  • 10
  • Note that the Grid spec provides multiple methods for setting grid areas, sizing grid items, and aligning grid items. Using `grid-template-areas` is just one method, and it's not appropriate in some cases. For examples see my answers [**here**](https://stackoverflow.com/q/45459717/3597276) and [**here**](https://stackoverflow.com/q/47229684/3597276). – Michael Benjamin Feb 04 '18 at 12:53

1 Answers1

0

Since you're working with tabular data a <table> element might be more appropriate than trying to use css grid.

Jennifer Elyse
  • 143
  • 1
  • 9
  • For structuring the markup I agree. For styling the tabular data, I still need to use css, and here css-grid promises to work regardless of markup structure, which is why I want to use it. – Timm Feb 04 '18 at 18:45