Couple of grid questions

My page

Gave this challenge another go whilst I’m happy I have a few questions.

  1. Why is my h2 covering my P when I change h2 size?

  2. As I’m doing mobile first, I have a min-width where the bigger screen starts. I’m trying to get used to creating sections in my CSS to make Life easier such as a ‘global’ section.

In my CSS, I’m needing to use some of the classes twice, i.e box color/font which obviously don’t change ansd they are in ‘globals’. I need to use the same classes again when I specify the grid- areas. How do I get around this without creating too many classes or is this the only way?

  1. My column-rows are blank. What should I be using as a number or is it okay to leave alone? (I’m going to manouve the grid around as the screen narrows so the boxes with longer texts span more columns which should stop them stretching so much. And I’ve not adjusted the font size yet)

Thank you

That’s because you’ve given your <h2> a height of 0.5em.

I think it makes sense to separate concerns here. Your classes with names (.kira, …) should be used as unique identifier for each box, to define their grid rows/columns. But I wouldn’t put color styles on them, instead I’d make a list of classes .purple, .white, … where I set background-color and color.
So you can then have an element <div class="kira purple box>. And if you want .kira to have a white background instead, just change the class in the HTML.

I’m not sure what you mean by “blank column-rows”. If you don’t specify a row/column for an element, it will be put at the first available spot (one that’s not already taken by another element). So it’s not necessary to define the row/column for absolutely every element in the grid.

To make your grid-life easer, you might also look into grid-template-areas, you can give your elements a name like this:

.kira {
.daniel {

And then, instead of setting grid-row/grid-column for each of them, just define a grid through their names once inside the grid container. You don’t even need grid-template-columns anymore then.
(if you want to have an empty grid cell somewhere, you can put a dot)

  .wrapper {
    display: grid;
    grid-template-areas:"daniel daniel jonathan kira"
                        "jeanette patrick patrick kira";
1 Like

Perfect thank you. All makes sense.

Of course it’s font-height, not height. Doh!

I’ve been tripping up with grid for a while now, it’s mainly the rows which I find most confusing as they can have things like 'minmax (100px, auto) and I’m never sure correct one’s to use. In my grid I can see I probably have no use for rows with the layout I’m going for.

I do find template-areas much easier but wanted to challenge myself as it would just annoy me not knowing the more difficult way.

Thanks for the tips on classes, makes sense!