aligning css grids in one line

Question

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;
}

why it doesn't follow the template I designated

user_8620333 · Answer

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;
}

user_2802040 · Answer

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;
}

aligning css grids in one line

2 Answers