1

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

the result was :

enter image description here

.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 class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

why it doesn't follow the template I designated

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Maryam Ouafik
  • 43
  • 4
  • 1
    correct numbers can't be used as grid-area. Besides that, It would be easier to simply use flexbox for such task. – tacoshy Jul 10 '22 at 14:37

2 Answers2

2

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 class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
1

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 class="container">
  <div class="sidebar">
  </div>
  <div class="content"></div>

</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161