CODEWITHSUNDEEP
htmlcsscss-grid
devNostyle
devNostyle

Reputation: 15

Margin in CSS Grid Template

In <div> .item1, I put my navigation and the simple text I'm Header. I want to move these 2 things a little bit up. I tried use margins, but couldn't find a good solution using them.

CodePen:

/*
  Oh Hello!

  These are some base styles so that our tutorial looks good.

  Let's go through the important bits real quick
*/

:root {
  --yellow: #ffc600;
  --black: #272727;
}

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 10px;
}


/*
  WAT IS THIS?!
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 10px 100px;
}


/* Each item in our grid will contain numbers */

.item {
  /* We center the contents of these items. You can also do this with flexbox too! */
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border: 1px solid blue;
}

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 445px 250px 250px 200px 250px 150px;
  grid-template-areas: "o1 o1" "o2 o3" "o2 o3" "o4 o4" "o5 o6" "o7 o7"
}

.item1 {
  grid-area: o1;
  text-align: center
}

.menu ul {
  display: flex;
  list-style: none;
  color: #582782;
  margin: 0;
}

.menu a {
  display: block;
  text-decoration: none;
  padding: 10px;
  font-size: 0.95rem;
  color: #582782;
}

.item6 {
  grid-area: o4;
}

.footer {
  grid-area: o7;
}
<!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="./assets/style.css">
  <title>Starter Files and Tooling Setup!</title>
</head>

<body>
  <div class="container">
    <div class="item item1">
      <nav class="menu">
        <ul id="menu-list">
          <li>
            <a href="">PROJECTS</a>
          </li>
          <li>
            <a href="">TEAM</a>
          </li>
          <li>
            <a href="">MISSION</a>
          </li>
          <li>
            <a href="">CONTACT</a>
          </li>
        </ul>
      </nav>
      <p>I'm Header</p>
    </div>
    <div class="item item2">
      <p>Experience</p>
    </div>
    <div class="item item3">
      <p>img</p>
    </div>
    <div class="item item4">
      <p>I'm Sidebar #4</p>
    </div>
    <div class="item item5">
      <p>img</p>
    </div>
    <div class="item item6">
      <p>Header 2</p>
    </div>
    <div class="item item7">
      <p>I'm Sidebar #7</p>
    </div>
    <div class="item item8">
      <p>I'm Sidebar #8</p>
    </div>
    <div class="item footer">
      <p>I'm the footer</p>
    </div>
  </div>
</body>

</html>

Please just focus on .item1.

How can I move my navigation up?

Upvotes: 0

Views: 555

Answers (2)

sol
sol

Reputation: 22919

div.item1 also has the class item which contains the rule align-items: center.

You can overrule it for .item1 using align-items: normal

/*
  Oh Hello!

  These are some base styles so that our tutorial looks good.

  Let's go through the important bits real quick
*/

:root {
  --yellow: #ffc600;
  --black: #272727;
}

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 10px;
}


/*
  WAT IS THIS?!
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 10px 100px;
}


/* Each item in our grid will contain numbers */

.item {
  /* We center the contents of these items. You can also do this with flexbox too! */
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border: 1px solid blue;
}

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 445px 250px 250px 200px 250px 150px;
  grid-template-areas: "o1 o1" "o2 o3" "o2 o3" "o4 o4" "o5 o6" "o7 o7"
}

.item1 {
  grid-area: o1;
  text-align: center;
  align-items: normal;
}

.menu ul {
  display: flex;
  list-style: none;
  color: #582782;
  margin: 0;
}

.menu a {
  display: block;
  text-decoration: none;
  padding: 10px;
  font-size: 0.95rem;
  color: #582782;
}

.item6 {
  grid-area: o4;
}

.footer {
  grid-area: o7;
}
<!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="./assets/style.css">
  <title>Starter Files and Tooling Setup!</title>
</head>

<body>
  <div class="container">
    <div class="item item1">
      <nav class="menu">
        <ul id="menu-list">
          <li>
            <a href="">PROJECTS</a>
          </li>
          <li>
            <a href="">TEAM</a>
          </li>
          <li>
            <a href="">MISSION</a>
          </li>
          <li>
            <a href="">CONTACT</a>
          </li>
        </ul>
      </nav>
      <p>I'm Header</p>
    </div>
    <div class="item item2">
      <p>Experience</p>
    </div>
    <div class="item item3">
      <p>img</p>
    </div>
    <div class="item item4">
      <p>I'm Sidebar #4</p>
    </div>
    <div class="item item5">
      <p>img</p>
    </div>
    <div class="item item6">
      <p>Header 2</p>
    </div>
    <div class="item item7">
      <p>I'm Sidebar #7</p>
    </div>
    <div class="item item8">
      <p>I'm Sidebar #8</p>
    </div>
    <div class="item footer">
      <p>I'm the footer</p>
    </div>
  </div>
</body>

</html>

Upvotes: 1

jhpratt
jhpratt

Reputation: 7130

You can add the following CSS rule

.item1 nav,
.item1 p
{
  align-items: start;
}

This will tell the two children to align their contents to the start, but nothing else will be affected.

Upvotes: 1

Related Questions