Problems with Grid in CSS

HTML-CSS
1

In the ss you see an Inspect view of a page I’m styling. You can see that there is a grid. It has 6 rows and 7 columns (see bio-container.css). You can see the elements that the CSS files create. There are several problems that I cannot figure out. I think I’ve looked at it too long and lost the fresh eyes needed to spot errors.

  1. Why does the ‘Marriage details lorem ipsum’ text appear where it does and not in the font defined for it? There is a file (bio-7marriage-data.css) that defines the location as the row 1 column 7 that also defines the same font as that elsewhere on the screen. The css file calls for a top margin of 65px just as all row 1 child elements in the grid have. I think this means that the link to the css file is not defined correctly; but the css stying is defined exactly like the others except for row and column definitions, and the link statement in the HTML is the same. I even copied the file name information from VS Code EXPLORER for the file and pasted it in the html link href statement to be sure there was no fat fingering.

  2. Why does the long box - defined in bio-11children.css - appear overlapping the boxes as shown? The location is defined as row 2 column 3. It starts in column 3, but it does not appear in row 2 as the ss shows.

Grid issues in bio-container
Grid issues in bio-container1865×774 137 KB

HTML (testingstyles.html)

<!DOCTYPE html>
<HTML>
  <HEAD>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Birthstone">
  </HEAD>

  <link 
  rel="stylesheet"
  href="/Styles/ancestor-container.css" >

  <link 
  rel="stylesheet"
  href="/Styles/bio-1masthead.css" >

  <link 
  rel="stylesheet"
  href="/Styles/bio-2name.css" >

  <link 
  rel="stylesheet"
  href="/Styles/bio-container.css" >

  <link 
  rel="stylesheet"
  href="/Styles/bio-3photo.css" >

  <link 
  rel="stylesheet"
  href="/Styles/bio-4birth-label.css" >

  <link 
  rel="stylesheet"
  href="/Styles/bio-5birth-data.css" >

  <link
  rel="stylesheet"
  href="/Styles/bio-6marriage-label.css" >

  <link
  rel="stylesheet"
  href="Styles/bio-7marriage-data.css" >

  <link
  rel="stylesheet"
  href="/Styles/bio-8death-label.css" >

  <link
  rel="stylesheet"
  href="/Styles/bio-9death-data.css" >

  <link
  rel="stylesheet"
  href="/Styles/bio-10text.css" >
  
  <link
  rel="stylesheet"
  href="/Styles/bio-11children.css" >

  <link
  rel="stylesheet"
  href="/Styles/bio-12thumbnails.css" >

  <link
  rel="stylesheet"
  href="/Styles/bio-.css" >

  
<!--      END of external links 
      -->
    <STYLE>

    </STYLE>

<BODY>

<!--      BEGINNING of page  -->

    <div class="ancestor-container">
      
      <div class="bio-1masthead">
        
        <div class="bio-2name">
          Uncle Sam
        </div>
      
      </div>  <!--  Ends bio-1masthead -->
      
      <div class="bio-container">

        <div class="bio-3photo">
          <!--  <img src="/Images/uncle-sam-i-want-you.png" alt="Uncle Same Wants You NOW!">  -->
            Uncle Sam Wants You !
        </div>      
        
        <div class="bio-4birth-label">
            Birth
        </div>
        
        <div class="bio-5birth-data">
          <!--  Values for this information
                  Birthdate
                  Birthplace
                  Mother
                  Father
                to be supplied by javascript entry form and displayed to the right of constants
                REVIEW CSS ::before & ::after and javascript variables
          -->
            Born: July 4, 1776<br>
            Birthplace: Independence Hall,
            Philadelphia, PA<br>
            Mother:  Necessity<br>
            Father:  Jefferson, Madison, Monroe and Others
        </div>

        <div class="bio-6marriage-label">
            Marriage
        </div>
        <div class="bio-7marriage-data">
            Marriage details lorem ipsum
        </div>

        <div class="bio-8death-label">
          Death
        </div>
        
        <div class="bio-9death-data">
          <!--  REVIEW CSS ::before & ::after and javascript variables
          -->
            Date: Still Alive and Well<br>
            Place: <br>
            Burial:  It didn't happen<br>
            extra line
        </div>

        <div class="bio-10text">
          Biographical data lorem ipsum
        </div>

        <div class="bio-11children">
          Children birth order with names  lorem ipsum
        </div>

        <div class="bio-12thumbnails">
          Thumbnails: tiny pics and icons go here
        </div>

<!--    End of page   -->

      </div> <!-- Ends bio-container  -->

    </div> <!-- Ends ancestor-container -->
      




  </BODY>


</HTML>

/*      Define space for biographical info
*/
.bio-container 
{
  display: grid;
  width: 1210px;
  height: 450px;
  grid-template-rows: 75px 75px 75px 75px 75px  75px;
  grid-template-columns: 300px 32px 220px 32px 220px 50px 220px;
  column-gap: 6px;

}

/*    space for marriage data: spouse/date/place */

.bio-7marriage-data {            
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 7;
  grid-column-end: 7;
  width: 200px;
  height: 70px;
  margin-top: 65px;
  border-style: ridge; 
  border-width: 1.5px;
  border-radius: 5px;
  border-color: brown;
  font-family: "Birthstone";
  font-size: 13px;
  font-weight: bold;
  padding-left: 5px;
}

I’m still working on getting this project set up as a public github repo. Maybe tomorrow.

2

I know how easy it is to lose perspective when you’ve been staring at the same code for too long—it happens to the best of us! For the first issue, it does sound like there’s a problem with the CSS link, even if everything looks identical. A quick double-check: is the CSS file being loaded in the right order? If another stylesheet is overriding it, that might explain the font issue and unexpected positioning. Also, inspect the computed styles in your browser’s dev tools to verify which rules are actually being applied.

As for the long box overlapping, it might be worth confirming if there’s an explicit grid-row value being overridden or if a span is accidentally causing the overlap. Grid issues like these can sometimes be resolved by ensuring all elements have clearly defined start and end placements.

1 Like
3

Thanks for responding.

I’m so new to this - and so ignorant - that I don’t understand what the question, “Is the CSS file being loaded in the right order?” Does this mean that I must place link tags in the HTML Head section in the order that the content should be displayed? Is there some way I can tell - step by step - what order the browser is processing links to external CSS files? I don’t know much about how to use Inspect; so there might be something in it that will show me.

Of course, if I totally misunderstood your question, all the foregoing is moot.

As to your second paragraph, how would I determine if an explicit grid-row value is overridden? I don’t use any ‘span’ arguments in my CSS but I do declare start and end row values and start and end column values. My understanding is that those define the span that styling will apply to.

I failed to mention in the op that there is an area defined by a linked CSS file that does not appear at all. Again, I suspect a link issue but have no clue how to trap the problem. Does Inspect offer any help there? I’ve searched for answers but I know so little that I cannot create search arguments that are helpful.

I’m puzzled by the fact that all the other defined styles appear where I intend them to be. I can find nothing different about the bio-7marriage-data.css file or links in HTML or the DIV tag that invokes it. The long box that overlays is defined by the bio-11children.css file. Again, I can find nothing different about how it is linked or the DIV tag that invokes it.

4

I found the problem with the bio-7marriage-data.css link. It was declared as ‘Styles/.bio-7marriage.css’ and should have been ‘/Styles/.bio-7marriage.css’. I found this by checking the console display in Inspect; so I learned a bit about debugging and Inspect. (Let’s hope I remember what I learned, eh?)

I’m still looking for the problem with .bio-11children.css. It’s the box that is supposed to be on row 2 that is overlaying row 1 content.

5

OK - SUCCESS !!

I found the problem with the .bio-11children.css style.

I had the wrong grid row number. I decided to experiment by changing it to the last row then reducing the row number by one on subsequent attempts until I found the correct value.

Here’s the final page layout:

BioPageExample
BioPageExample1892×851 248 KB

Protocol Question: Is it proper form to come back here to share solutions that worked? I do it not to create extra posts and clutter but to provide solutions that worked for me in case some future user is searching here and finds help in my posts.

6

On a broader note, achieving optimised performance in layouts ensures fast, responsive websites, which keeps users engaged. If you’re working with front-end frameworks, this article on react or react.js explores some great tools for achieving that.

1 Like
7

Good to know.

I think I’ll stay with HTML and CSS until I gain a bit more fluency with those coding languages. After I get the basic pages laid out, I will move to javascript to make them interactve. I’ll look at REACT then.

Thanks for the info.