Html Question posted in
Some basic documentation can be found here.

Html – Can I get a help on grid layout?

I’m learning CSS now and I’m struggling to get it to work the way I want and I can’t figure out why, here is the code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        header {
            display: grid;
            grid-template-columns: 1fr 11fr 1fr 1fr;
            grid-template-areas: "logo . btnusr btnlogoff";
        }

        .logo {
            grid-area: "logo";
            height: 35px;
            padding: 5px;
        }

        .btnusr {
            grid-area: "btnusr";
            height: 35px;
            padding: 5px;
        }
    </style>
</head>

<body>
    <header>
        <img src="https://source.unsplash.com/random/921x222" alt="logo" class="logo">
        <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr">
    </header>
</body>

</html>

I’m trying to make it so I get the logo on the top left, a blank cell of 11fr, and the other 2 buttons on the right side.
I’m defining the grid-area to the specific places but, no matter what I change the objects doesn’t move to the desired location. Even if I swap the grid-area from logo to btnusr the logo is always first and the button is always being placed in the second cell, here is a print of the grid view in the browser:

enter image description here

Tags:

2

Answers


  1. 0

    I would rather use display flex and space between:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }

      header {
        display: flex;
        justify-content: space-between;
      }

      .logo {
        height: 35px;
        padding: 5px;
      }

      .btnusr {
        height: 35px;
        padding: 5px;
      }
    </style>
  </head>

  <body>
    <header>
      <img src="https://source.unsplash.com/random/921x222" alt="logo" class="logo" />
      <div class="buttons">
        <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr" />
        <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr" />
      </div>
    </header>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    You’ve done everything right except you’ve used quotes where they don’t belong. For example, you should use grid-area: btnusr; rather than grid-area: "btnusr";

    body {
            margin: 0px;
            padding: 0px;
        }

        header {
            display: grid;
            grid-template-columns: 1fr 11fr 1fr 1fr;
            grid-template-areas: "logo . btnusr btnlogoff";
        }

        .logo {
            grid-area: logo;
            height: 35px;
            padding: 5px;
        }

        .btnusr {
            grid-area: btnusr;
            height: 35px;
            padding: 5px;
        }
    <header>
        <img src="https://source.unsplash.com/random/921x222" alt="logo" class="logo">
        <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr">
    </header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search