CODEWITHSUNDEEP
csscss-grid
boatus
boatus

Reputation: 55

How to move a single items inside a grid?

I have set up a grid, and if I use the commands justify-items or align-items, all the items will move in the same fashion inside of their relative cells.

How can I apply a general rule to all items but then give a specific rule to one item? I want the logo to be at the top-left corner of the page.

* {
  margin: 0 0;
}

html {
  font-size: 62.5%;
}

header {
  font-size: 2rem;
  background-color: burlywood;
  display: grid;
  grid-template-columns: 15fr 40fr 45fr;
  height: 8rem;
  justify-items: center;
  align-items: center;
}

.header-menu {
  grid-column: 3/4;
}

.header-logo {
  grid-column: 1;
  align-content: flex-start;
  align-items: flex-start;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <div class="header-logo">
        <a href="">LOGO<img src="" alt="" /></a>
      </div>
      <div class="header-menu">
        <div class="menu">
          <a href="">FIRST</a>
          <a href="">SECOND</a>
          <a href="">THIRD</a>
        </div>
      </div>
    </header>
  </body>
</html>

img

Upvotes: 1

Views: 1206

Answers (1)

J. Betette
J. Betette

Reputation: 21

You can position specific grid items and allow others to auto-flow like this:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
}
 .wrapper div:nth-child(2) {
   grid-column: 3;
   grid-row: 2 / 4;
 }
 .wrapper div:nth-child(5) {
   grid-column: 1 / 3;
   grid-row: 1 / 3;
}
<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
   <div>Nine</div>
   <div>Ten</div>
   <div>Eleven</div>
   <div>Twelve</div>
</div>

Upvotes: 2

Related Questions