A CSS Grid item seems to be taking up more than one row

Good morning,

I’m working on a class project and have a prototype page up at:

www.markholleyproject.com/index.php

The top navigation bar-div seems to be taking up more than on row, even though the CSS declaration is:

.navigationbartop {
    grid-area: 1 / 2 / 1 / 6;
    overflow: hidden;
    background-color: black;
    }

As far as I know, it should start in row 1 and end in row 1. I’m not sure if other styles that I have are conflicting with or superseding this; I don’t think so, but I could be wrong.

The full HTML and CSS markup follows.

<html>
    <head>

        <meta charset="UTF-8">

        <title>Mark Holley Project</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="manifest" href="/site.webmanifest">
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">

    <!-- Fonts From Google -->
    <link href="https://fonts.googleapis.com/css?family=Lora&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
    <!-- End Fonts -->

    <!-- Styles -->
    <link href="mhpstylesCC.css" rel="stylesheet" type="text/css">
    <!-- End Styles -->
        
    </head>

    <body>
        <div class="parent">
            <?php
                // require "header.php";
                // require "navigation.php";
            ?>
            <div class="copyarea">
                <article>
                    <p>Welcome! Please select an option from the flyout menu to your upper right. You may add a new project, edit an existing project, or review and approve an existing project.</p>
                </article>
            </div>
            <div class="imagearea">
                <figure>
                    <img src="links/lake01.jpg" alt="" />
                    <figcaption>From Pixabay, 2020.</figcaption>
                </figure>
            </div>
            <?php
                // require "footer.php";
            ?>
        </div>
    </body>

</html>
*
{
    box-sizing: border-box;
}

/* CSS Grid Setup Begin */
.parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    font-size: 13px;
}


/* row start, column start, row end, column end 1 / 1 / 1 / 1; */

.navigationbartop {
    grid-area: 1 / 2 / 1 / 6;
    overflow: hidden;
    background-color: black;
    }

.copyarea {
    grid-area: 2 / 2 / 6 / 4;
}

.imagearea {
    margin: 2%;
    grid-area: 2 / 4 / 6 / 6;
}

.navigationbarbottom {
    grid-area: 6 / 2 / 7 / 6;
} 

/* CSS Grid Setup End */





input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}


article p
{
    font-family: 'Lora', serif;
    font-size: 15px;
    color: black;
    font-weight: normal;
}

figure {
    width: 100%;
    margin: 2%; 

    /* This is a placeholder only - I've been looking into some of the neat work done by others.*/
}

figcaption {
    font-style: italic;
    font-size: 13px;
    font-weight: bold;
}

body
{
    margin: 2%;
    padding: 0;
    background-color: #FFFFFF;
}


/* Nobody should be seeing just "p" text, so I'm making it stand out in fuchsia as an error. */

p {
    font-family: 'Lora', serif;
    font-size: 15px;
    color: fuchsia;
    font-weight: bold;
}

img {
    width: 100%;
    border: 1px solid black;
}

code {
    font-family: monospace;
    font-size: 12px;
    line-height: 11px;
    font-weight: bold;
}

.codecontainer {
    background: #FFFFFF;
    padding: 1.5%;
    margin-top: 5px;
    margin-bottom: 5px;
}

cite {
    font-style: italic;
    font-size: 10px;
    font-weight: bold;
    color: black;
}

blockquote {
    font: 20px/28px normal helvetica, sans-serif;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 50px;
    padding-left: 15px;
    border-left: 3px solid #ccc;
}


nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000000;
}

nav li {
    float: left;
}

nav li a:link {
        display: block;
        color: #FFFFFF;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        padding: 14px 16px;
        text-decoration: none;
    }

nav li a:hover {
    background-color: #43783a;
}

nav li a:visited {
    color: #FFFFFF;
    text-decoration: none;
}

nav li a:active {
    color: #FFFFFF;
    text-decoration: none;
}

/* Table Styles Begin */

.datagrid table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}

.datagrid {
    font: normal 12px/150% Arial, Helvetica, sans-serif;
    background: #fff;
    overflow: hidden;
    border: 1px solid #006699;
    margin-top: 2%; 
    margin-bottom: 2%; 
}

    .datagrid table td, .datagrid table th {
        padding: 3px 10px;
    }

    .datagrid table thead th {
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1A5413), color-stop(1, #1A5413) );
        background: -moz-linear-gradient( center top, #1A5413 5%, #1A5413 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1A5413', endColorstr='#1A5413');
        background-color: #1A5413;
        color: #FFFFFF;
        font-size: 17px;
        font-weight: bold;
        border-left: 1px solid #000000;
    }

    .datagrid table thead th:first-child {
        border: none;
    }

    .datagrid table tbody td {
        color: #00496B;
        border-left: 1px solid #A3E69C;
        font-size: 15px;
        border-bottom: 1px solid #000000;
        font-weight: normal;
    }

    .datagrid table tbody .alt td {
        background: #D5F4D4;
        color: #00496B;
    }

    .datagrid table tbody td:first-child {
        border-left: none;
    }

    .datagrid table tbody tr:last-child td {
        border-bottom: none;
    }

    .datagrid table tfoot td div {
        border-top: 1px solid #006699;
        background: #657D64;
    }

    .datagrid table tfoot td {
        padding: 0;
        font-size: 12px
    }

    .datagrid table tfoot td div {
        padding: 2px;
    }

    .datagrid table tfoot td ul {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: right;
    }

    .datagrid table tfoot li {
        display: inline;
    }

    .datagrid table tfoot li a {
        text-decoration: none;
        display: inline-block;
        padding: 2px 8px;
        margin: 1px;
        color: #FFFFFF;
        border: 1px solid #000000;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #054D00), color-stop(1, #054D00) );
        background: -moz-linear-gradient( center top, #054D00 5%, #054D00 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#054D00', endColorstr='#054D00');
        background-color: #054D00;
    }

    .datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover {
        text-decoration: none;
        border-color: #006699;
        color: #FFFFFF;
        background: none;
        background-color: #000000;
    }

    div.dhtmlx_window_active, div.dhx_modal_cover_dv {
        position: fixed !important;
    }

/* Table Styles End */

/* Link Styles Begin */

a:link {
    color: #657D64;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: dimgrey;
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: seagreen;
    text-decoration: none;
}

/* selected link */
a:active {
    color: palevioletred;
    text-decoration: none;
}

/* Link Styles End */

h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 160%;
    font-weight: bold;
}

h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 140%;
    font-weight: bold;
}

h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 135%;
    font-weight: bold;
}

h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 115%;
    font-weight: bold;
}

.required {
    color: red;
}

Hello @markholley. This may not be the reason, but have a look at this:

Should the row start at 1 and end at 1? Aren’t rows exclusive, meaning that they end before the number you specify?
I hope this helps!

All I know is that this:

grid-area: 1 / 2 / 1 / 6;

looks the same as this:

grid-area: 1 / 2 / 2 / 6;

And, if I do this:

grid-area: 1 / 2 / 6 / 6;

the row becomes huge indeed (spanning 6 rows), so I know that the declaration is working. It’s just that “start row 1 end row 1” looks the same as “start row 1 end row 2”.

After reading your reply, I tried:

grid-area: 1 / 2 / 0 / 6;

and 0 / 2 / 1 / 6;

just to see what would happen. Neither gave me anything desirable.

Hello. I’m sorry. I couldn’t help more; I’ve only just finished the ‘grid’ CSS myself. Maybe try just doing grid-row-start: and grid-row-end? It might help?

I’ll give it a shot, thank you tera!

Just to place this here - this is my call to that particular CSS rule:

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<!-- Top Navigation Menu -->    
        <div class="navigationbartop">
            <nav>
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="addproject.php">Add Project</a></li>
                    <li><a href="editproject.php">Edit Project</a></li>
                    <li><a href="publishproject.php">Publish Project</a></li>
                </ul>
            </nav>
        </div>
</body>

</html>

Welcome-I hope it works!

Another thought; maybe try making the <ul> the grid-container, that way there are only individual things in the grid (<li>)? For example have:

<div>
<nav>
<ul class="navigationbartop">
<li><!--code--></li>
<!--ect.-->
</ul>
</nav>
</div>

Also, although it probably won’t help, maybe try removing the <div> tags? Since <div> and <nav> do similar jobs, maybe it is confusing the CSS? These are just ideas?

Same problem, even after separating my code out to:

.navigationbartop {
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 2;
    grid-column-end: 6;
    overflow: hidden;
    background-color: black;
    }

The problem might be that the CSS is calling the grid on a <div> which contains a <ul>, which might mean that the code thinks the list in the div is ‘one element’, if you get what I mean, and so even though it is taking up only one row of the grid, the list is taking up a lot of space, increasing the size of the row? You could also try to set the grid row size and see what happens?