CSS grid solo project BBC News Clone help | Scrimba | Page 1

charred stratus · 2023-10-16T06:41:27.867Z

Hi all, I'm working on CSS grid for the solo project and the hospital picture is not where it's supposed to be. I've targeted it with specific grid-column and grid-row start and ends but nothing happens..can somone point out what I'm doing wrong? TIA~ https://scrimba.com/scrim/co5d74f7c8b1641c202dd7beb

Hi @charred stratus ,

You featured-article is currently taking up one cell of the main grid because it's display: block. You need to set it up as a grid itself, too.
See screenshot 1

First step:

.featured-article {
  display: grid;
  grid-column: 1 / 4;
}

Now, you will notice that doing this does not align our new grid to the parent grid. See screenshot 2.

A solution (I don't know if the course covers it?) is using subgrid.
Subgrid allows a grid child to follow its parent's columns and rows definitions. When using subgrid, it’s a kind of letting the featured-article inherit the grid-template-columns value from its parent (the .main grid).

So, we just need to finally add grid-template-columns: subgrid to our .featured-article, and TADA.
Working solution:

.featured-article {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/4;
}

See screenshot 3.

#CSS grid solo project BBC News Clone help