CSS - Grid row not recognized-CodePudding

I got a problem with my grid. Doing it for the first time, so sorry for that beginner question.

What I want to achieve is shown in this image (black borders):

Unfortunately, I already got stuck on my first line of code:

body {

  display: grid;
  grid-template-columns: 10% auto 10% 10% 10%;
  grid-template-rows: 60px auto; /*Isn't it recognizing my second row?*/
}

.temp {
  background-color: black;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Max S. Rodenkirchen - Sinn Sehen - FH AC 2022 - bei Eva Vitting</title>

    <link rel="stylesheet" type="text/css" href="style.css">

  </head>

  <body>


    <div class = "menu">

    </div>

    <div class = "temp">
      
    </div>

    <div class = "draw">
      
    </div>

    <div class = "label">
      
    </div>

    <div class = "slider">
      
    </div>

    <div class = "check">
      
    </div>
    
  </body>
</html>

The temp class should be on the left-hand side in the second row.

Another question I have is probably a bit more advanced. The square area is going to be a P5 canvas that is always squared and should always stay in full grid row height. I was wondering if I need to code something like this instead:

grid-template-columns: auto 60% auto auto auto;

But I am pretty sure I am missing something here.

Hope for some help :) This is going to be for a university project. Max

CodePudding user response：

Your second row is there and the .temp div is place in that row. It's just that because the .temp div has no content and the second row has a height of auto that row and the .temp div inside it have zero height and so are not visible. You can see what is going on more easily by adding outlines and minimum height:

body {
  display: grid;
  grid-template-columns: 10% auto 10% 10% 10%;
  grid-template-rows: 60px auto;
}

div {
  outline: 1px solid red;
  min-height: 20px;
}

.temp {
  background-color: black;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

<div >
</div>

<div >
</div>

<div >
</div>

<div >
</div>

<div >
</div>

<div >
</div>

CodePudding user response：

It seems easier to take the top menu out of the grid as its dimensions don't seem to be directly related to the rest of the elements.

By contrast the big square looks as though it is 8 times the width of the narrower columns.

The big square can be made to take the same height as its width by giving it aspect-ratio: 1 / 1;

So we can define a one row grid with 4 columns at 1fr and the square at 8fr.

To make it easy for it to be centered this snippet puts it inside containers which have flex.

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
}

.menu {
  width: 100%;
  height: 60px;
}

.outer {
  display: flex;
  justify-content: center;
  margin-top: 1vw;
}

.container {
  width: 95%;
  display: grid;
  grid-template-columns: 1fr 8fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 1vw;
}

.menu,
.container div {
  border: 1px solid black;
  box-sizing: border-box;
}

.temp {
  grid-row: 1 / 2;
}

.draw {
  grid-column: 2 / 3;
  aspect-ratio: 1 / 1;
}

.label {
  grid-column: 3 / 4;
}

.slider {
  grid-column: 4 / 5;
}

.check {
  grid-column: 5 / 6;
}

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

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Max S. Rodenkirchen - Sinn Sehen - FH AC 2022 - bei Eva Vitting</title>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>


  <div >

  </div>
  <div >
    <div >
      <div >

      </div>

      <div >

      </div>

      <div >

      </div>

      <div >

      </div>

      <div >

      </div>
    </div>
  </div>
</body>

</html>