Kevin Powell - Community•2y ago

Overlapping grid areas issue

I try to understand how template areas overlapping works following a video series on Kevins channel. I have this code for small screens:

.overlapping-grid {
    display: grid;
    place-items: center;
    grid-template-areas: 
        "image-section-one"
        "title"
        "image-section-two"
        "text";
}

.overlapping-grid {
    display: grid;
    place-items: center;
    grid-template-areas: 
        "image-section-one"
        "title"
        "image-section-two"
        "text";
}

And I expect that there would be a single column but It looks like there are 2. What I did wrong?

9 Replies

coconutOP•2y ago

Or it's not expand to all the element for some reason

MarkBoots•2y ago

From only this code I can't see anything wrong, it should be a single column. Better make a codepen so we can see a live example. (https://codepen.io)

coconutOP•2y ago

https://codepen.io/coconut0/pen/BaOrNvr Now it get even worse The image doesn't take 100% of width

MarkBoots•2y ago

grid-rows are not the same as grid-areas this should work

.overlapping-grid img {
    /* grid-column: 1 / 3; this was creating the 2 columns, just remove */
    width: 80%;
    height: 100%;
    object-fit: cover;
    /* grid-row: image-section-one / image-section-two; */
    grid-area: image-section-one / 1 / image-section-two / 1 /* start row / start column / end row / end column */
}

.overlapping-grid img {
    /* grid-column: 1 / 3; this was creating the 2 columns, just remove */
    width: 80%;
    height: 100%;
    object-fit: cover;
    /* grid-row: image-section-one / image-section-two; */
    grid-area: image-section-one / 1 / image-section-two / 1 /* start row / start column / end row / end column */
}

MarkBoots•2y ago

coconutOP•2y ago

Yeah but why in his case that works? https://codepen.io/kevinpowell/pen/ZEyLmoy

Kevin

CodePen

ZEyLmoy

...

Å Marlon G•2y ago

Do you want it to look like Kevins? You're only defining one column, so your black paragraph text has to live in the same column as the title, and not like in Kevs where he has set several columns in his grid-template-area. Yours (1 column):

  grid-template-areas:
  "image-section-one" 
  "title      " 
  "image-section-two" 
  "text       ";
}

  grid-template-areas:
  "image-section-one" 
  "title      " 
  "image-section-two" 
  "text       ";
}

Kevs (3 columns):

  grid-template-areas:
  "image-section-one image-section-one image-section-one" 
  "title       text        text       " 
  "image-section-two image-section-two image-section-two";
}

  grid-template-areas:
  "image-section-one image-section-one image-section-one" 
  "title       text        text       " 
  "image-section-two image-section-two image-section-two";
}

coconutOP•2y ago

Yeah that works fine. I talk about the small screen size where Kevin has one column. I did copy his code. The problem is that grid takes width of the child text element (p tag) instead of stretching the text to full width. I think the problem is because I had less text. But I can't understand why this happens. Shouldn't grid elements stretch to full width automatically? @Å Marlon G @markboots. , is it okay mentioning people here? If not sorry

Å Marlon G•2y ago

Ah, now I understand what you mean. You've set the image to span column 1 / 3 (meaning you're asking for it to span 2 columns), but the grid itself is only 1 column. This means the img is adding a new column to fit itself (the second column is implicitly made), but the h1 and p is sticking to the explicit grid you've set up in the article overlapping-grid. Change the grid-column on image to be 1 / 2, and you'll get the text to cover the width (or really what is happening the explicit grid is covering the width).

.overlapping-grid img {
    grid-column: 1 / 2;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    grid-row: image-section-one-start / image-section-two-end;
}

.overlapping-grid img {
    grid-column: 1 / 2;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    grid-row: image-section-one-start / image-section-two-end;
}

I also removed the height: 100%;, and set it to aspect-ratio to avoid possible funny height issues ... but you could ignore this. Since we're talking small screen size, you could in fact just put: grid-column: 1;, because that's all you need anyway. Just make sure to add the columns you want (either explicitly or implicitly) on bigger sizes.

Gaming

Programming

Overlapping grid areas issue