i think im mixed up somewhere. but when i interpret a column, it aligns vertically and rows align horizontally. so why is it grid-template columns aliggn side by side horizontally and grid-template-rows align vertically?

Difficult to help without more context or a screenshot illustrating your issue, but CSS grid is always a grid of rectangles. Each rectangle has a width and a height.

grid-template-columns defines the width of a column.
grid-template-rows defines the height of a row.

If you want 3 columns, you specify the width that each column should use.

ok i think thats where i was mixed up . i though grid template columns was the height because it aligns the containers vertically. oops.

before i add the code , would see a column of 6 containers. now they all moved horizontally when added 3 columns of 100px each.

Before, the display was set to grid but you didn’t define how many columns you want, so the browser gave you a grid with 1 column and 5 rows.

If you add grid-template-columns: 100px 100px 100px, it means you’re defining 3 columns. With 100px width each.
So the browser fills the first row with the first 3 divs, then it goes to the next row and adds the remaining 2 divs.

wait, this is how it looks when i dont define the columns and rows. but isnt that 1 row and 5 columns?

No that’s one column with five rows. Think of the columns of text in a newspaper.

thats where im confused. even verifying on the internet. it says rows are horizontal and columns are vertical.

Well, yes, rows are horizontal, columns are vertical. Columns are like books in a bookshelf. When you add more columns, you place them next to each other (maybe that’s where the confusion is coming from - you place them “horizontally” next to each other):

| | | | | | | |

Rows are like a stack of plates:


ok that makes more sense now. so what i interepret is colums line up vertically as one block but you stack more columns horizontally… rows are boxes that lay on its horizontal side of the rectangle but every other row stacks vertically.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.