How can I move elements on a css grid?

user_14608852 0
Viewed 3812

I am trying to figure out how to position elements using css grid. I'm using firefox and I can see that my areas are defined properly, but when I try to move some sample stuff around they aren't moving.

I've read and tried a bunch of different things but I guess I'm implementing the solutions wrong?

I'm trying to have stuff side-by-side. Like content in section1 goes to sect1 and content in sect2 goes to section2 respectively on the page.

This is the html I want to move using css grids:

    <div class="wrapper">

    <header class="header">
        <!--<img class="logo" src="imgs/logo.png" alt="logo"> -->
        <h1>LOGO</h1>
        <nav>
            <ul class="nav_links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#"><button class="nav_buttons">Login</button></a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h2>TEXT HERE</h2>
        <div id="sect1">
            <P>MOVE ME/KEEP ME ON THE LEFT SIDE OF SCREEN</P>
        </div>
        <div id="sect2">
            <p>MOVE ME/KEEP ME ON THE RIGHT SIDE OF SCREEN</p>
        </div>
    </main>

    <footer class="foot">
    </footer>

</div>

This is my css file:

body {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
background-color: #ededed;
margin: 0;
padding: 0;
}

.wrapper {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 80px 5fr 1fr;
    grid-template-areas: 
        "header header"
        "sect1 sect2"
        "foot foot";
}

.wrapper .header {
    grid-area: header;
}

.wrapper main {
    grid-column: 1 / 3;
}

.wrapper main #sect1 {
    grid-area: sect1;
    background-color: lightcyan;
}

.wrapper main #sect2 {
    grid-area: sect2;
    background-color: lightpink;
}

.foot {
    grid-area: foot;
    background-color: rgb(255, 0, 0);
}

Firefox grid view

css html
2 Answers

I think that you can specify the grid for descendants by using the subgrid. in this way:

body {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
  background-color: #ededed;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 80px 5fr 1fr;
  grid-template-areas:
    "header header"
    "sect sect"
    "foot foot";
}

.wrapper .header {
  grid-area: header;
}

.wrapper main {
  grid-area: sect;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr;
}

.wrapper main h2 {
  grid-column: 1/-1;
}

.wrapper main #sect1 {
  background-color: lightcyan;
}

.wrapper main #sect2 {
  background-color: lightpink;
}

.foot {
  grid-area: foot;
  background-color: rgb(255, 0, 0);
}
<div class="wrapper">

  <header class="header">
    <!--<img class="logo" src="imgs/logo.png" alt="logo"> -->
    <h1>LOGO</h1>
    <nav>
      <ul class="nav_links">
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#"><button class="nav_buttons">Login</button></a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h2>TEXT HERE</h2>
    <div id="sect1">
      <P>Section 1</P>
    </div>
    <div id="sect2">
      <p>Section 2</p>
    </div>
  </main>

  <footer class="foot">
  </footer>

</div>

user_146007230

I would solve this by using a separate grid inside the main tag, like this:

body {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
  background-color: #ededed;
  margin: 0;
  padding: 0;
}

.wrapper {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 80px 5fr 1fr;
    grid-template-areas:
        "header header"
        "main main"
        "foot foot";
}

.wrapper .header {
    grid-area: header;
}

.wrapper main {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 150px 1fr;
  grid-template-areas:
    "text text"
    "sect1 sect2"
}

.wrapper #sect1 {
    grid-area: sect1;
    background-color: lightcyan;
}

.wrapper #sect2 {
    grid-area: sect2;
    background-color: lightpink;
}

.foot {
    grid-area: foot;
    background-color: rgb(255, 0, 0);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="wrapper">

    <header class="header">
      <!--<img class="logo" src="imgs/logo.png" alt="logo"> -->
      <h1>LOGO</h1>
      <nav>
        <ul class="nav_links">
          <li><a href="#">Home</a></li>
          <li><a href="#">Tutorials</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#"><button class="nav_buttons">Login</button></a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h2>TEXT HERE</h2>
      <div id="sect1">
        <p>Section 1</p>
      </div>
      <div id="sect2">
        <p>Section 2</p>
      </div>
    </main>

    <footer class="foot">
    </footer>

  </div>
</body>

</html>

This also gives you more control over the individual elements inside the main tag and lets you add more elements without having to work with the navbar and footer structure in the wrapper.

user_132025060
Related