Kevin Powell - Community•3mo ago

named grid lines not working as expected

Hey, this is one of my first times using grid lines properly for a layout and i can't quite seem to get the layout to look like the sketch in the image with them like i can do when defining the set lines the children go on e.g. grid-row: 1 / -1;. The chidren don't seem to be sitting in their defined areas for some reason. For anyone wondering why i can't group the button in with the text, the layout shifts around at a desktop viewport, this layout is for a tablet viewport. Could anyone please point me in the right direction and let me know what i'm doing wrong? Thanks in advance. https://codepen.io/deerCabin/pen/gONNKLy

CodePen

grid-issue

...

26 Replies

Alex•3mo ago

You may want to give a line more than one name, perhaps it denotes the sidebar-end and the main-start for example. To do this add the names inside the square brackets with whitespace between them [sidebar-end main-start]. You can then refer to that line by either of the names.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines#giving_lines_multiple_names

MDN Web Docs

Layout using named grid lines - CSS: Cascading Style Sheets | MDN

In previous guides, we've looked at placing items by the lines created by defining grid tracks and also how to place items using named template areas. In this guide, we are going to look at how these two things work together when we use named lines. Line naming is incredibly useful, but some of the more baffling looking grid syntax comes from th...

snxxwyyOP•3mo ago

I’ll give that a shot, thank you. What would be the difference between putting an end and start in the same bracket pair, vice versa over separate brackets?

Chris Bolson•3mo ago

I must admit that I really struggle with grid lines, finding grid areas much easier to understand however I do realize that each serves slightly different purposes. As Alex has pointed out, the main issue that you have here is that you have created separate elements for the same line. If items need to start or end on the same line, they need to be grouped in the same brackets. For example your columns need to be defined like this:

grid-template-columns: [text-start button-start] 2fr [button-end image-start] 1fr [text-end] 1fr [image-end];

grid-template-columns: [text-start button-start] 2fr [button-end image-start] 1fr [text-end] 1fr [image-end];

I don't think that separate brackets is valid syntax.

clevermissfox•3mo ago

Seperate brackets are not valid

Chris Bolson•3mo ago

Then, if an element is within a single row or column, you can either define [text-start text-end] 1fr or, slightly simpler, [text] 1fr

Alex•3mo ago

If you put them in separate brackets, it doesn't work, because that's not the syntax

snxxwyyOP•3mo ago

Ah I see now, thank you all for your time and help, I’ve learnt something new there 👍🏻

clevermissfox•3mo ago

How does this work? There's no grid area for [text-start text-end]? Doesn't there need to be some sort of length to define the column, even if it's auto ?

[text-start] auto [text-end]

[text-start] auto [text-end]

Chris Bolson•3mo ago

As I say, I really struggle with grid lines. I am going to try to spend more time stuyding them when I finish work later as clearly they are quite powerful. However I am fairly sure that to achieve what snxxwyy wants to do here (as far as I understand it) can be done by defining this on the grid:

.grid {
  display: grid;
  grid-template-columns: [text-start button-start] 2fr [button-end image-start] 1fr [text-end] 1fr [image-end];
  grid-template-rows: [image-start] 25px [text] 1fr [button] auto 25px [image-end];
}

.grid {
  display: grid;
  grid-template-columns: [text-start button-start] 2fr [button-end image-start] 1fr [text-end] 1fr [image-end];
  grid-template-rows: [image-start] 25px [text] 1fr [button] auto 25px [image-end];
}

or this which uses both the -start and -end on the text and buttons in the rows:

.grid {
  display: grid;
  grid-template-columns: [text-start button-start] 2fr [button-end image-start] 1fr [text-end] 1fr [image-end];
  grid-template-rows: [image-start] 25px [text-start text-end] 1fr [button-start button-end] auto 25px [image-end];
}

.grid {
  display: grid;
  grid-template-columns: [text-start button-start] 2fr [button-end image-start] 1fr [text-end] 1fr [image-end];
  grid-template-rows: [image-start] 25px [text-start text-end] 1fr [button-start button-end] auto 25px [image-end];
}

https://codepen.io/cbolson/pen/LYKKgoq

Chris Bolson

CodePen

https://discord.com/channels/436251713830125568/1285744237136052304...

...

Jeluxe•3mo ago

I got question for your example, where you set grid "area"s with grid row and grid column, is there no one prop that do both? or use grid-area?

Chris Bolson•3mo ago

I'm afraid that I don't understand your question, sorry.

Jeluxe•3mo ago

you used grid-row and grid-column, right? for ea so i wanna know if there is one line for it

css 
.grid-lines .grid__text {
  grid-column: text;
  grid-row: text;
}

.grid-lines  .grid__image {
  grid-column: image;
  grid-row: image;
  z-index: -1;
}

.grid-lines  .grid__button {
  grid-column: button;
  grid-row: button;
  justify-self: start;
}

css 
.grid-lines .grid__text {
  grid-column: text;
  grid-row: text;
}

.grid-lines  .grid__image {
  grid-column: image;
  grid-row: image;
  z-index: -1;
}

.grid-lines  .grid__button {
  grid-column: button;
  grid-row: button;
  justify-self: start;
}

Chris Bolson•3mo ago

I see. You are right. It appears that you can use the ´grid-area: text;´ rather than defining each one (I have just modified my codepen)

.grid-lines .grid__text {
  grid-area: text;
}
.grid-lines  .grid__image {
  grid-area: image;
  z-index: -1;
}
.grid-lines  .grid__button {
  grid-area: button;
  justify-self: start;
}

.grid-lines .grid__text {
  grid-area: text;
}
.grid-lines  .grid__image {
  grid-area: image;
  z-index: -1;
}
.grid-lines  .grid__button {
  grid-area: button;
  justify-self: start;
}

As I say, I struggle with grid lines and admit that I don't fully understand them. On a related note, I have added another version to create the same design using grid-template-areas as I personally find these easier to understand than all these lines 😆

Jeluxe•3mo ago

i dont really understand grid myself so i wanted to know why you used it as you did, didnt mean to sound criticizing

Chris Bolson•3mo ago

I wrote it that way because that was how the OP had created the original codepen. My codepen was based on their code and I was really just concentrating on the issue that they had with defining the grid line names. I didn't look too closely at the children definitions as they were working "as is".

snxxwyyOP•3mo ago

that's interesting you managed to do that with grid-template-areas. I thought you couldn't overlap content with those? is that what the dots do?

clevermissfox•3mo ago

You can use grid-area with one value as Chris has shown but it’s just a shorthand for grid-column and grid-row so if you had different named areas for it between row and column you could also use something like grid-area: text content so you define both its name for column and its name for row in one line. Interesting I thought it needed a length defined between start and end , didn’t realize you could just name a column [text] without specifying the width of the column. Gosh so much to learn with grid

Chris Bolson•3mo ago

No, the dots are for "null" cells. ie. they are not named and child content can't be assigned to them using the grid-area (though that doesn't mean that they can't have content). Just to clarify the use of grid-area rather than defining the start an end points. From the csswg.org

The grid-area property is a shorthand for grid-row-start, grid-column-start, grid-row-end and grid-column-end.

snxxwyyOP•3mo ago

Ah I see, so if you can overlap content with grid template areas, then isn’t grid template areas and grid lines technically the same thing?

Chris Bolson•3mo ago

The more I research, the more confused I get 🤪 I actually "cheated" by defining the starting and ending rows for the image so I suppose that that is using grid lines, albeit without naming them as such 🤔.
I have modified my pen since yesterday to define the grid area for the end of the image so now I have it like this:

.grid-areas {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 25px 1fr auto 25px;
  grid-template-areas: ". image image" "text text ." "button . ." ". image-stop image-stop";
}

.grid-areas > img {
  grid-area: image;
  grid-row: image / image-stop; /* note -  I deliberately didn't use suffix "-end" to avoid any confusion with the grid lines syntax */
}

.grid-areas {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 25px 1fr auto 25px;
  grid-template-areas: ". image image" "text text ." "button . ." ". image-stop image-stop";
}

.grid-areas > img {
  grid-area: image;
  grid-row: image / image-stop; /* note -  I deliberately didn't use suffix "-end" to avoid any confusion with the grid lines syntax */
}

There are so many ways to define grid positioning it is quite confusing.

snxxwyyOP•3mo ago

ah that makes sense then. yeah i'm actually quite surprised how many different ways there are haha, what to choose 😅. i can imagine some methods are really niche though

Chris Bolson•3mo ago

Despite having used grid for years, I actually went right back to basics yesterday and watched some of Kevins initial videos from 7 years ago where he explained grid. Obviously more things have been added since then but they were still interesting.

snxxwyyOP•3mo ago

that's a good shout actually, i might do the same thing at some point.

clevermissfox•2mo ago

I didn’t think you could overlap content with gtareas either , even if you defined the rows and columns; this is very interesting

Chris Bolson•2mo ago

From what I can work out, grid-template-areas are really just short-hand for grid lines, with automatically defined -start and -end lines. I did a quick simple test with this HTML:

<div class="grid">
  <header>Header</header>
  <main>Content</main>
  <footer>Footer</footer>
</div>

<div class="grid">
  <header>Header</header>
  <main>Content</main>
  <footer>Footer</footer>
</div>

This CSS:

.grid{
  display: grid;
  gap: 2rem;
  width: 400px;
  margin-block: 2rem;
  margin-inline: auto;
  grid-template-areas: "header" "main" "footer";
}
.grid > * {
  padding: 3rem;
}
header{
  grid-area: header;
  background-color: gray;
}
main{
  grid-area: main;
  background-color: lightgray;
}
footer{
  grid-area: footer;
  background-color: slategray;
}

.grid{
  display: grid;
  gap: 2rem;
  width: 400px;
  margin-block: 2rem;
  margin-inline: auto;
  grid-template-areas: "header" "main" "footer";
}
.grid > * {
  padding: 3rem;
}
header{
  grid-area: header;
  background-color: gray;
}
main{
  grid-area: main;
  background-color: lightgray;
}
footer{
  grid-area: footer;
  background-color: slategray;
}

I then opened the inspector on Chrome (as I can't work out how to show line names on Firefox) and, once I activated the grid display, could see that it had automatically assigned the grid-line names (see attachment).

Chris Bolson•2mo ago

Probably not a revelation to most, but I didn't realize that this was actually happening.

Gaming

Programming

named grid lines not working as expected