I am trying to make a cross word like design for my portfolio page, between my first and lastname. Its like this:
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?
You have to refer to the container, when assigning the letters to grid-areas.
Btw, you forgot the m.
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:
<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:
.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:
#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: CSS Flexible Box Layout Module Level 1)
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;
}
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?
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.
Yeah, but now it’s working, last thing to do is place the rest of the letters wherever you want them.
