Tribute Page column Help

HTML-CSS
1

Hi,(Please disregard the aesthetic of that picture I’m just trying to get structure first)
I’m having an issue positioning an image and a list in two column.
So I do have images on the left and the list on the right so technically they should each be in a column because of this code:

div class=“container”
div id=“Avengers”
img src= <-inserted link of picture
img src=<-inserted link of another picture
/div
–>(It wouldn’t let me add “< & >”)
<—then my list---->

  • Spider-Man
  • Captain America
  • Fantastic Four
  • The incredible Huld
  • Thor
  • Iron-Man
for the CSS part

.container{
/background: LightGray;/
display: grid;
grid-template-columns: auto auto;
/grid-template-rows: auto auto;/

}
#list{
font-family: Raleway;
/grid-area:list;/
top:200px;
}
#Avengers{

width: 250px;
height: 250px;
}

So my problem is that for some reason my list is at the bottom of “column” and that no matter what top/left/right that wont change anything and margin I tried a bunch of different number and it’ll look really weird and go everywhere.(Same with padding). I went back to the css grid for help but I’m still having issue having that list not at the bottom of my page/column

20%20PM
20%20PM2508×1096 148 KB

Thank you for any help

2

Do you have a page we can look at, like a Codepen?

I don’t see anything in the code you posted that would make the list be where it is so I’m guessing there is something else going on. Or some elements are not closed correctly but we can’t see that because of the code formatting (forum code formatting).

3

thanks!

4

Hi! :thinking: I think you should rethink the grid you want to draw and put it in a container that you can better control the space it occupies, is what I would do to distribute it better. I have read that this can be done with grid, created a margin grid, columns and rows that define the margins.

But in your code I think the style in #list {grid-area: list;} is creating another grid inside the first. That’s why you can not relocate it, because it’s inside another space that you want. :face_with_raised_eyebrow:

2 Likes
5

I can confirm. I tried moving it, but had no luck until I removed the grid-area: list code.

1 Like
6

I thought the grid-area: list; was commented out, I guess not. But yes as the others said that is causing the issue.

Not entirely sure what the rules are for what happens when you give a grid item a grid-area name (<custom-ident>) that does not have an associated grid-template-areas (giving it grid-area:auto would actually work).

Even if you had .grid-container on main (and it was active) it wouldn’t place the list. Because the list is not a direct child of the .grid-container, only .container is.

As it is now. Your main layout is just a one column layout. Then each child of main can have its own layout. The .container is a two column layout, inside a one column layout. Your grid-template-areas on .grid-container does not really make much sense, again remember it can only place the direct children.

TL;DR

Summary

Using grid-template-columns

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* a fixed height will cause an overflow, width on the container will cause misalignment inside the grid cell */
#Avengers {
    /* width: 250px; */
    /* height: 250px; */
}

/* Use grid item alignment properties */
#list {
  font-family: Raleway;
  /* grid-area: list; */
  /* right: -1000px; */
  /* margin: 100px; */
  justify-self: center;
  align-self: center;
}

Or, using grid-template-areas (removed the properties not needed)

.container {
  display: grid;
  grid-template-areas: "imgs list";
}

#Avengers {
	grid-area: imgs;
}

#list {
  font-family: Raleway;
  grid-area: list;
  justify-self: center;
  align-self: center;
}
2 Likes
7

Thank you all so much !!!