CSS Grid Troubles - Items not loading

CSS Grid Troubles - Items not loading
0

#1

I am trying to make a cross word like design for my portfolio page, between my first and lastname. Its like this:

image

Now i tried this design with my project:
GitHub Version --> https://github.com/michaelnicol/Portfilo-Page
Codpen Version --> https://codepen.io/Mike-was-here123/pen/gBGqaZ

And instead i get this:

None of my HTML letters are loading into and being arranged in my Grid.

Why is this? Do i use Div’s for my letters? Span’s?


#4

You have to refer to the container, when assigning the letters to grid-areas.
Btw, you forgot the m.


#5

Hey there,
I would suggest you use id because you need exactly one element in a single grid area.
The problem you are facing is because using class would call instances of that class in the respective grid area.
for instance, when you use:
.c {
grid-area:c;
}
It would assign grid-area c to all elements with the c class and here you have two c’s, which creates the problem.

So step#1:

  • give unique id’s to your elements:
<div class="lettersGrid">
      <div class="letter n" id="n1"><p>n</p></div>
      <div class="letter i" id="i1"><p>i</p></div>
      <div class="letter c" id="c1"><p>c</p></div>
      <div class="letter o" id="o1"><p>o</p></div>
      <div class="letter l" id="l1"><p>l</p></div>

      <div class="letter m" id="m1"><p>m</p></div>
      <div class="letter c" id="c2"><p>c</p></div>
      <div class="letter h" id="h1"><p>h</p></div>
      <div class="letter a" id="a1"><p>a</p></div>
      <div class="letter e" id="e1"><p>e</p></div>
      <div class="letter l" id="l2"><p>l</p></div>
</div>

Step#2:

  • uniquely identify grid areas:
.lettersGrid {
  margin:0 auto;
  border: 1px solid red;
  height: relative;
  display: grid;
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: repeat(5,1fr);
  grid-template-areas:
  ". n1 . . . . ."
  "m1 i1 c2 h1 a1 e1 l2"
  ". c1 . . . . ."
  ". o1 . . . . ."
  ". l1 . . . . .";
}

Step#3:

  • Use unique id’s to assign unique grid areas:
#n1{
  grid-area: n1;
}
#i1{
  grid-area: i1;
}
#c1{
  grid-area: c1;
}
#o1{
  grid-area: o1;
}
#l1{
  grid-area: l1;
}


#m1{
  grid-area: m1;
}
#c2{
  grid-area: c2;
}
#h1{
  grid-area: h1;
}
#a1{
  grid-area: a1;
}
#e1{
  grid-area: e1;
}
#l2{
  grid-area: l2;
}

Apart from this, It would be better you wrap your letters in p tag and use flex properties to align the letters:

.n, .i, .c, .o, .l, .m, .a, .e, .l, .h {
  font-size: 50px;
  display:flex;
  align-items:center;
  justify-content:center;
}

Make sure you use align-items because: (source: https://www.w3.org/TR/css-flexbox-1/#propdef-align-items)

align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items.

For example, you can override align-item flex property of c1 flex-item by:

#c1>p{
  align-self:flex-start;
}

#6

I did all of that

Github Updated–> https://github.com/michaelnicol/Portfilo-Page
Codpen Updated–> https://codepen.io/Mike-was-here123/pen/gBGqaZ

My grid is loading but not in the order listed in the CSS (grid template areas). I instead get a one by eleven grid with all my letters listed (I’m doing this in study hall w/ school laptop which doesn’t have screenshot option).

I removed the classes in replace of ID’s, was this correct?


#7

Change #lettersGrid to .lettersGrid

grid-template-columns: repeat(1fr, 7);
grid-template-rows: repeat(1fr, 5);

to

grid-template-columns: repeat(7,1fr);
grid-template-rows: repeat(5, 1fr);

Also, you have set height: relative on the same element.

The only remaining problem that I’m seeing is with the grid-template-areas.

edit
Found it, you have two c1 in your grid template, you can’t have repeated elements.


#8

Even then i only get


#9

Yeah, but now it’s working, last thing to do is place the rest of the letters wherever you want them.