CSS Grid : row below where it should be?


#1

Sorry for the bother, I have been trying to apply my (very recent) knowledge of HTML and CSS to build a “dummy website” of a webcomic I’m planning.

Well anyways, here is my question :

I created a (really simple) grid for the character page, here is what it looks like (it looks quite ugly right now, because I figured it would be better to format everything on a separate stylesheet that I could use for other pages, not only the characters one, so right now there is only the layout of the page on this stylesheet.

css affiliated is this one

main {
display: grid;
grid-template-rows: 250px 50px 80px repeat(13,250px) 200px;
grid-template-columns: 500px 500px;
justify-content : center;
}

.header {
grid-area: 1 / 1 / 2 / 3;
border : 3px solid black;
}


.menu {
grid-area: 2 / 1 / 3 / 3;
border : 3px solid black;
}

.portrait {
grid-column: 1 / 2;
border : 3px solid black;
}

.desc {
grid-column: 2 / 3;
border : 3px solid black;
}

.footer { 
grid-area: 14 / 1 / 15 /3;
border : 3px solid black;
}

.menu li {
display : inline-block;
}

.h1 {
grid-row: 1 /span 2;
}

Now for some reason I don’t understand, .portrait naturally begins at row 4, while .description begins at row 5 and I don’t know why.

I corrected it using

.lexus {
grid-row-start:4;
}

but I suspect I missed an important rule of CSS grid because I don’t know why they would begin at different rows.

<!DOCTYPE html>

<html>



<head>
  <title>Hybrid The Comic</title>
  <link href="https://fonts.googleapis.com/css?family=Aclonica|Eagle+Lake" rel="stylesheet"> 
  <link href="./stylesheet.css" type="text/css" rel="stylesheet"> 
</head>

<body>
  <main>
    <div class="header">
      <a href=./home.html><img src =./logo.png/ width=400px class= "logo"></a>
    </div>

    <div class="menu">
      <ul>
        <li><a href="./home.html">Home</a></li>
        <li><a href="./characters.html">Characters</a></li>
        <li><a href="./about.html">About</a></li>
        <li><a href="./archives.html">Archives</a></li>
        <li><a href="./contact.html">Contact</a></li>
      </ul>
    </div>

    <h1>Special Ops Squad</h1>

    <div class="portrait lexus">Portrait lexus</div>
    <div class="portrait eurelia">Portrait Eurelia</div>

    <div class="desc lexus">
      <h2>Lexus Von Statten</h2>
      <p>Colonel of the Vanshaär Army and leader of the Special Ops Squad.Righteous and smart, he can also be manipulative and heartless. He would have often gone too far for "the greater good" if not for the sound advice of the few people he respects. </p>
    </div>
    <div class= "desc eurelia">
      <h2>Eurélia </h2>
      <p></p>
    </div>

    <div class=footer>
      Footer
    </div>
  </main>
</body>
</html>

Thank you for the feedback !


#2

Hi, do you mind posting your HTML code, too?
That way I could rebuild it for trial + error debugging, right now it’s a bit hard to follow, at least for me.


#3

aah yes, sorry. I’m editing it in the first post right now.


#4

Alright, first tip after having a quick look at your HTML:

class=classname is not something you should make a habit of (<div class=footer>).
use class="classname" instead. Same pattern for href and src, the " " are important.

Second tip, you’ve got inline style attributes like width in HTML, since you’re using CSS, you might want to shift them over to it - unless there’s an important reason for it to be there instead.

Putting class=“class name” like so, without a - between actually creates separate classes, one for class and one for name instead of one class for class-name, not sure if that’s intended.


#5

Thanks for the feedback. The class=footer is a mistake. Infortunately I am a very typo-prone person.

For the width : it’s a good question to say the truth. Right now I’m just messing with things, but that image is probably not the only one ending up in the header. (Truth is, I’m still building content, and since my computer is very old, it’s a nightmare just opening photoshop to actually make the digital art I want to add). I felt that resizing the image in the HTML would be faster than multiplying classes to include it in the CSS, but perhaps it’s not how it’s done ? or I’m not foreseeing some problem with changing image size directly in the HTML ?

And for the class with two names yes, it was intended. I saw it randomly on a source code and figured it would help me make changes of both portrait and description of a single character in one go.


#6

Having HTML and CSS separated makes it easier to maintain, scale and implement changes. It’s good practice in general, and then there is specificity.

quoting @mtf Roy here (from another thread)

Specificity if something we should keep a tight rein on, keeping our document’s specificity as low as possible so that future changes to the page or site in general are not a massive undertaking, but a smooth transition.

specificity_html
Higher specificity as we go left. The term priority is not really a common term in CSS. Specificity is an indication of importance of a selector.

There’s the explanation for the error, both elements are class portrait and get assigned the same space of the page, that’s what is causing the error. Edit: the column can be the same for the .portrait class, but the row never gets assigned. Unless you assign it as you did with

So that was less of a fix and more of a necessary piece of information for your page to display the way you want it to.


#7

Just to make sure, you wanted the names to be in the left column and the descriptions in the right column, right?

I figured that because you made 13 copies of these lines leading me to assume there’s more “characters” to come.


#8

So the aim was :
Row 3
[TITLE <h1> (here “Special Ops Squad”)] on 2 columns
Row fourth to 13 (although most of these will be hidden at first, I’ll unhide them when they actually appear in the comic)
[Portait Character 1 (where I will insert an image)][Description character 1 (with name <h2> and short description in <p>]
… and so forth. I only began with the data for 2 char first so that I could test it out

So the layout above is correct. I just wanted to know why I had to tell the “description” column to begin at row 4 but not the “portrait” column.
At first I made the mistake of adding “grid-row-start : 4” to .portrait and .desc. which obviously resulted in all my rows squashing together on row 4. When I removed the initialization of rows alltogether, it resulted in

which I fixed with with the

.lexus {grid-row-start:4;}

but out of curiosity I wanted to know why, even though .portrait and .desc were both initialized simply by specifying columns and not rows and both (row 4, col 1) and (row 4, col 2) are free, they did not begin “naturally” both on row 4.


#9

For your HTMl you’re thinking left, left, right, right:

    <div class="portrait lexus"></div>   //<-- left column
    <div class="portrait eurelia"></div> //<-- left column

    <div class="desc lexus"></div>       //<-- right column
    <div class= "desc eurelia"></div>    //<-- right column

While your HTML actually thinks left, right, left, right:

    <div class="portrait lexus"></div>   //<-- left column
    <div class="portrait eurelia"></div> //<-- right column

    <div class="desc lexus"></div>       //<-- left column
    <div class= "desc eurelia"></div>    //<-- right column

because it’s thinking in blocks.

You want the left and the right column from the HTML its perspective to both be on the left side.
That’s what you can achieve with the CSS row assignment.

If you simply were to put it like this on the HTML side instead, however:

    <div class="portrait lexus"></div>   //<-- left column
    <div class="desc lexus"></div>       //<-- right column

    <div class="portrait eurelia"></div> //<-- left column
    <div class= "desc eurelia"></div>    //<-- right column

There would be no need to fix it with CSS, it would just fall into place the way you want it to following the flow of HTML: top to bottom, instead of making it jump back and forth.

Here’s the order of your HTML elements for both variants, excluding the CSS.
(Think blocks from top to bottom in the HTML code.)

I hope this makes sense, I find it hard to explain, since I’m lacking the proper vocabulary.

Edit: I realized it was probably a wrong picture for an example, fixed that now


#10

No thank you, I understood it perfectly ! I chose this layout in HTML for simplicity, but it may be more efficient to change it, especially if I go around adding all my minor characters as well! . That actually would also be better if I want to hide content too, since I will be hiding a complete row…

Thank you for your help ! I’m classifying this as closed, but I’m afraid I’ll post again (I hope not too soon !)