previous

page 13

next
Row & Letter Layout

A good start but you might recall from Project 1 that we need to make the rows flex.

.row {
display:flex;
}

Now add a capital W to the first cell line so we can work on making the letters look OK. I use W because it's the widest letter.

<div class='cell c1' id='0'>W</div>

So we need to make it larger and to centre it. We can use flex for the centering. For the size, we need font-size.

display:flex;
justify-content: center;
align-items: center;
font-size:6vmin;

Next step is to add the letters from the first set in our list.
We'll need this set later so I plan to store it in a variable outside any function. Such a variable is called a global variable.
I always start my global variable names with g_

previous
next