grid behavior – columns vs. rows

[TubaFrog]

I am trying to create a grid of colored “pixels” using CSS Grid. I have seen different methods of achieving something similar but with defined px sizes. I wanted to see if I could use grid to simply define the x/y dimensions and use whatever space the parent allowed.

For an example 4×3 grid, setting grid-template-columns lets me specify how many pixels across and to use the full width of the screen:

.grid-horizontal {
/* 4 columns filling the horizontal space, each one of equal width */
grid-template-columns: repeat(4, 1fr);
}


For taller images I want to limit things by what can be displayed vertically, so I thought (just guessing) I would take the same data and use “grid-template-rows” but this did not work. There seems to be a difference between horizontal and vertical space?

.grid-vertical {
/* I want 3 rows filling the vertical space but this does not work */
grid-template-rows: repeat(3, 1fr);
}


Here is my Codepen showing the two results. (I will worry later about filling the pixels in the proper order. For now I’m just curious about setting up the basic template.)

Any details about how columns and rows work differently, or tips about getting the result I’m looking for?
Thanks in advance!

[Paulie_D]

For your vertical grid you would have to define a height if you want to divide the height by three.

Even then you will have to deal with the implicit rows which will follow your main three.

[TubaFrog]

Hi, PaulieD
If you mean the row height within the grid-template-rows line, like repeat(3, 10px) that is the point I am getting at. For grid-template-columns I did not have to give a specific width, pixel or otherwise, because I had used 1fr to get an evenly divided fraction of the available space. So I am wondering why it’s treated differently for vertical space (rows).

I tested giving the parent div .grid-vertical a height, like 300px, but it did not seem to do anything. (I guess I really need to go back to square-one with the tutorials and such to try to figure this all out. But I do think my original question is still valid.)

For what it’s worth, I’m not concerned about subsequent implicit rows because I will always know exactly how many rows and columns I will need. I realize I could probably do the math in JS to figure out how many cols/rows can fit the window, but in this case I’m trying to let CSS do the work if possible.

[Author]

Posts