CSS grid dynamic rows and columns

Question

I would like to create a table using CSS grid The table is in the following (poorly drawn but gets the message across) form:

I'll explain. Let's say that the header cell size is 2x / 2y. Each header row's cell is x / 2y and each header column cell is 2x / y. The internal table cell size (in red) is x / y.

Everything other than the Header cell is dynamic for example I may get 7 rows and 3 columns from the data.

How do I make this table be dynamic?

For the header column I've wrote:

  grid-template-rows: repeat(auto-fill, 145px);

and for the header rows i've added:

  grid-template-columns: repeat(auto-fill, 145px);

But I am still missing something. How can I make this table to become dynamic according to the data and according to that size limitations I wrote for each cell?

You always set them to 145px width. You can also set a dynamic width like this: `grid-template-columns: repeat(auto-fill, minmax(145px, 1fr))` — elveti, Apr 16 '19 at 11:53
CSS-Grid is not a replacement for tables. i suggest you use teh right tool for the job. — Paulie_D, Apr 16 '19 at 11:53
If you want to make a table dynamic then you have to use tables , not css grid — Thanveer Shah, Apr 16 '19 at 11:54

score 1 · Accepted Answer · answered Apr 16 '19 at 12:25

Although the below is not very practical or useful, thought I'd try it out out of curiosity:

the x and y in your question have been kept as CSS variables,
use grid-template-columns similar to what you'd done but with first column width added like grid-template-columns: calc(var(--x) * 2) repeat(auto-fill, var(--x)),
place the first row using grid-template-rows: calc(var(--y) * 2),
place your rows below the header using implicit grids - use grid-auto-rows: var(--y).

See demo below:

:root {
  --y: 75px;
  --x: 75px;
}

.container {
  display: grid;
  grid-template-columns: calc(var(--x) * 2) repeat(auto-fill, var(--x));
  grid-template-rows: calc(var(--y) * 2);
  grid-auto-rows: var(--y);
}

.container > div {
  border: 1px solid red;
}

<div class="container">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

CSS grid dynamic rows and columns

1 Answers1