Grid items laying out as rows, but should be columns - html

Question

I am trying out some very basic grids using display: grid. I have a simple grid with one row, divided into 6 columns. In the HTML I have a div containing the grid, then 6 nested divs containing the 6 items, which should display along one row in 6 columns.
However, instead, they stack on top of each other - why?
This is what it looks like when run:
.gridnav {
display: grid;
/*Gap between columns cells*/
grid-column-gap: 15px;
grid-row-gap: 2px;
/*Padding on left and right edges*/
padding: 0px 10px 0px;
/*Centres items vertically and horizontally*/
align-items: center;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas: '1 2 3 4 5 6';
}
.navitem1 { grid-area: 1; }
.navitem2 { grid-area: 2; }
.navitem3 { grid-area: 3; }
.navitem4 { grid-area: 4; }
.navitem5 { grid-area: 5; }
.navitem6 { grid-area: 6; }
<div class="gridnav">
<div class="navitem1">1</div>
<div class="navitem2">2</div>
<div class="navitem3">3</div>
<div class="navitem4">4</div>
<div class="navitem5">5</div>
<div class="navitem6">6</div>
</div>
Any ideas most welcome, thanks

Answer 1

I have a simple grid with one row, divided into 6 columns.
Actually, you have the reverse. You have a grid with one column, divided into 6 rows.
The grid-area property is a shorthand property. It breaks down like this:
grid-row-start
grid-column-start
grid-row-end
grid-column-end
Therefore, your code:
.navitem1 { grid-area: 1; }
.navitem2 { grid-area: 2; }
.navitem3 { grid-area: 3; }
.navitem4 { grid-area: 4; }
.navitem5 { grid-area: 5; }
.navitem6 { grid-area: 6; }
Is equivalent to this:
.navitem1 {
grid-row-start: 1;
grid-column-start: auto;
grid-row-end: auto;
grid-column-end: auto;
}
.navitem2 {
grid-row-start: 2;
grid-column-start: auto;
grid-row-end: auto;
grid-column-end: auto;
}
...
So here's what's really happening:
This rule in the container is doing exactly what you expect.
grid-template-areas: '1 2 3 4 5 6'
But then the grid-area rules are overriding grid-template-areas. Above is what it looks like in Chrome dev tools.
As you can see, the items are originally lined up in one row and six columns (as you expect). But in the end, all items line up on six rows in a one column (because of the grid-area overrides).
However, if you use a non-integer value, like this:
.navitem1 { grid-area: a; }
It would translate to this:
.navitem1 {
grid-row-start: a;
grid-column-start: a;
grid-row-end: a;
grid-column-end: a;
}
... which would work for your purposes, as the values of grid-template-areas and grid-area are fully aligned.
Spec reference for the grid-area property.

Answer 2

It seems that grid template areas can't be named integers. Changing them to a, b, c, etc. makes it work.
.gridnav {
display: grid;
/*Gap between columns cells*/
grid-column-gap: 15px;
grid-row-gap: 2px;
/*Padding on left and right edges*/
padding: 0px 10px 0px;
/*Centres items vertically and horizontally*/
align-items: center;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas: 'a b c d e f';
}
.navitem1 { grid-area: a; }
.navitem2 { grid-area: b; }
.navitem3 { grid-area: c; }
.navitem4 { grid-area: d; }
.navitem5 { grid-area: e; }
.navitem6 { grid-area: f; }
<div class="gridnav">
<div class="navitem1">1</div>
<div class="navitem2">2</div>
<div class="navitem3">3</div>
<div class="navitem4">4</div>
<div class="navitem5">5</div>
<div class="navitem6">6</div>
</div>

Answer 3

The solution can be achieved without writing these many lines of code. You don't need to use grid-template-area until and unless you want to switch the div positions. Let me take you to the solution real quick.
.gridnav {
width: 90%;
margin: 0 auto;
display: grid;
grid-template-rows: 1fr; /* Optional */
grid-template-columns: repeat(6,1fr);
grid-column-gap: 15px;
grid-row-gap: 2px;
align-items: center;
}
.gridnav div {
border: 2px solid red;
text-align: center;
}
First thing, define some width to the parent container. In your case it is div with class .gridnav. Since you already defined this section as a grid, I would define the rows and columns first. Since you don't need many rows but just one, it is okay not to define row.
For columns, you can have 1fr 1fr 1fr 1fr 1fr 1fr; but I would reduce code to grid-template-columns: repeat(6,1fr);
Further styling you can have as you want. Let me know if you have any further questions regarding this.
For more details you can always visit these two links:
https://mozilladevelopers.github.io/playground/css-grid/02-first-grid/
https://css-tricks.com/snippets/css/complete-guide-grid/
Hope you will find your answer in this. You can see code working here : Hit that Run Code Snippet button
.gridnav {
width: 90%;
margin: 0 auto;
display: grid;
grid-template-rows: 1fr; /* Optional */
grid-template-columns: repeat(6,1fr);
grid-column-gap: 15px;
grid-row-gap: 2px;
align-items: center;
}
.gridnav div {
border: 2px solid red;
text-align: center;
}
<div class="gridnav">
<div class="navitem1">1</div>
<div class="navitem2">2</div>
<div class="navitem3">3</div>
<div class="navitem4">4</div>
<div class="navitem5">5</div>
<div class="navitem6">6</div>
</div>