Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – How can I fix the gap between my header div and main div?

I’m working on building an admin dashboard, but I can’t seem to get the hang of Gridbox. Currently there is a big gap between the header and main div. I’ve tried reducing the gap in the css, but for some reason nothing I do is working.

html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

a{
    text-decoration: none;
    color: black;
}

a:hover {
    color: orange;
    transition: 0.3s;
}

.container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto; 
    gap: 10px 10px;
}


.sidebar {
    grid-column: 1;
    height: 100vh;
    border: solid black;
}

.header {
    grid-column: 2;
    border: 1px solid black; 
    height: 20vh;
}

.main {
    grid-column: 2;
    grid-row: 2; 
    margin-top: 0; 
    border: solid black;
}


.navbar {
    list-style: none;

}

.projects {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 200px));
    grid-template-rows: auto;
    gap: 5px;
}

.project-item {
    border-radius: 10px;
    text-align: center;
    width: auto;
}

.project-item:hover {
    background-color: gray;
    color: white;
    transition: 0.3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Admin Dashboard</title>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h1>Admin Dashboard</h1>
            <ul class="navbar">
                <li class="nav-item"><a href="#">Home</a></li>
                <li class="nav-item"><a href="#">Profile</a></li>
                <li class="nav-item"><a href="#">Messages</a></li>
                <li class="nav-item"><a href="#">History</a></li>
                <li class="nav-item"><a href="#">Tasks</a></li>
                <li class="nav-item"><a href="#">Communities</a></li>
            </ul>
            <ul class="navbar">
                <li class="nav-item"><a href="#">Settings</a></li>
                <li class="nav-item"><a href="#">Support</a></li>
                <li class="nav-item"><a href="#">Privacy</a></li>
            </ul>
        </div>
        <div class="header">
            Hi there, 
            <h2>John Smith(@Smithjohn)</h2>
        </div>
        <div class="main">
            <div class="projects">
                <div class="project-item">1</div>
                <div class="project-item">2</div>
                <div class="project-item">3</div>
                <div class="project-item">4</div>
                <div class="project-item">5</div>
                <div class="project-item">6</div>
            </div>
        </div>
    </div>
</body>
</html>

Any ideas as to how I could go about fixing this? Also if anyone knows any good guides to Gridbox, that would also be highly appreciated.

Tags:

4

Answers


  1. 0

    You need your sidebar to span both rows. Add the following declaration to your sidebar style rule:

    grid-row: 1 / span 2;
    Login or Signup to reply.
  2. 0

    I would personally not recommend this,but you can use negative values for the border or padding,
    try

    border-bottom: -10px //or how much ever you need

    if that doesn’t work, you can give the same for padding

    padding-bottom: -10px //or how much ever you need
    Login or Signup to reply.
  3. 0

    You can use grid-row: 1/4; in .sidebar. It will fix the layout.
    For more you can refer : CSS GRID

    *{
margin:0;
padding:0;
box-sizing:border-box;
}

html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

a{
    text-decoration: none;
    color: black;
}

a:hover {
    color: orange;
    transition: 0.3s;
}

.container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto; 
    gap: 10px 10px;
    grid-auto-flow: column;
}


.sidebar {
    grid-column: 1;
    grid-row: 1/4;
    height: 100vh;
    border: solid black;
}

.header {
    grid-column: 2;
    border: 1px solid black; 
    height: 20vh;
    grid-row: 1;
    display:inline-block;
}

.main {
    grid-column: 2;
    grid-row: 2; 
    margin-top: 0; 
    border: solid black;
}


.navbar {
    list-style: none;

}

.projects {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 200px));
    grid-template-rows: auto;
    gap: 5px;
}

.project-item {
    border-radius: 10px;
    text-align: center;
    width: auto;
}

.project-item:hover {
    background-color: gray;
    color: white;
    transition: 0.3s;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Admin Dashboard</title>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h1>Admin Dashboard</h1>
            <ul class="navbar">
                <li class="nav-item"><a href="#">Home</a></li>
                <li class="nav-item"><a href="#">Profile</a></li>
                <li class="nav-item"><a href="#">Messages</a></li>
                <li class="nav-item"><a href="#">History</a></li>
                <li class="nav-item"><a href="#">Tasks</a></li>
                <li class="nav-item"><a href="#">Communities</a></li>
            </ul>
            <ul class="navbar">
                <li class="nav-item"><a href="#">Settings</a></li>
                <li class="nav-item"><a href="#">Support</a></li>
                <li class="nav-item"><a href="#">Privacy</a></li>
            </ul>
        </div>
        <div class="header">
            <h4>Hi there,</h4> 
            <h2>John Smith(@Smithjohn)</h2>
        </div>
        <div class="main">
            <div class="projects">
                <div class="project-item">1</div>
                <div class="project-item">2</div>
                <div class="project-item">3</div>
                <div class="project-item">4</div>
                <div class="project-item">5</div>
                <div class="project-item">6</div>
            </div>
        </div>
    </div>
</body>
</html>
    Login or Signup to reply.
  4. 0

    When you think about gridbox using grid-column and grid-row, you often need to specify the start and end coordinates. look at the following illustration:

       grid column   1      2      3
grid row
     1           o------o------o
                 |      |      |
                 |      |      |
     2           o------o------o
                 |      |      |
                 |      |      |
     3           o------o------o

    so if a div is meant to extend from grid column and grid row coordinates (1,1) to (3,2) respectively, it’d better be grid-column: 1/3 and grid-row: 1 / 2. the div would look like this

    ┏━━━━━━━━━━━┓
┃     |     ┃
┃     |     ┃
┗━━━━━━━━━━━┛
|     |     |
|     |     |
o-----o-----o

    If you understand this, everything should be easy. I myself rarely use grid-column and grid-row because using grid-template-areas is much easier.

    As for your problem, here’s my solution with comment

    html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: orange;
  transition: 0.3s;
}

.container {
  display: grid;
  grid-template-columns: 1fr 4fr; /*unless you want to assign a specific size to the sidebar, this automatically sets its width to be 1/4 of the width of the right divs (or 1/5 vw) */
  grid-template-rows: 20vh auto; /*put the 20vh here instead of on header's height. it's more appropriate way to specify gridbox's properties*/
  gap: 10px; /* If you want the gap to be the same for columns and rows, you don't need to write the value twice */
  height: 100vh; /*  the height adjustment should belong to the container, everything inside will adjust. */
}

.sidebar {
  grid-column: 1;
  grid-row: 1 / 3; /* your sidebar will extend from the first row coordinate, to the second where the main div starts, and to the final row at the bottom */
  border: solid black;
}

.header {
  grid-column: 2;
  border: 1px solid black;
}

.main {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
  border: solid black;
}

.navbar {
  list-style: none;
}

.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 200px));
  grid-template-rows: auto;
  gap: 5px;
}

.project-item {
  border-radius: 10px;
  text-align: center;
  width: auto;
}

.project-item:hover {
  background-color: gray;
  color: white;
  transition: 0.3s;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search