aligning css grids in one line-CodePudding

I'm trying to create a grid layout with two boxes that I want to be in one line.

the result was :

.container {
  display: grid;
  grid-template-areas: "1 2 2";
}

.sidebar {
  background-color: aqua;
  grid-area: 1;
  height: 50vh;
}

.content {
  background-color: black;
  grid-area: 2;
  height: 50vh;
}

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

why it doesn't follow the template I designated

CodePudding user response：

If you want to use numbers you need to prefix them with \3 but I don't really recommend

.container {
  display: grid;
  grid-template-areas: "1 2 2";
}

.sidebar {
  background-color: aqua;
  grid-area: \31;
  height: 50vh;
}

.content {
  background-color: black;
  grid-area: \32;
  height: 50vh;
}

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

CodePudding user response：

I don't believe you can use unescaped numbers as grid area names.

Just use letters instead.

.container {
  display: grid;
  grid-template-areas: "a b b"
}

.sidebar {
  background-color: aqua;
  grid-area: a;
  height: 50vh;
}

.content {
  background-color: black;
  grid-area: b;
  height: 50vh;
}

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

</div>