CSS grid not working for me

Question

I am having issue with display: grid. I want header top and 33% width sidebar column and 66% for content. And I have declared grid-area. Can you help me?

.head {
  grid-area: head;
  background: tomato;
}

.side {
  grid-area: side;
  background: purple;
}

.content {
  grid-area: content;
  background: orange;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
    "head head head"
    "side" "content content"
}

.box {
  padding: 20px;
  height: 100px;
}

<div class="wrapper">
  <div class="box head">
  </div>
  <div class="box side">
  </div>
  <div class="box content">
  </div>
</div>

The accepted answer hits the nail on the head. But also note that "head head head" "side" "content content" is invalid code. String values for grid-template-areas must all have an equal number of columns, or the rule is ignored. stackoverflow.com/q/45647833/3597276 — Michael Benjamin
– Michael Benjamin, Commented Apr 25, 2018 at 15:06

Vadim Ovchinnikov · Accepted Answer · 2018-04-25 11:38:13Z

5

Just move the content next to the sidebar

.head {
  grid-area: head;
  background: tomato;
}

.side {
  grid-area: side;
  background: purple;
}

.content {
  grid-area: content;
  background: orange;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
    "head head head"
    "side content content"
}

.box {
  padding: 20px;
  height: 100px;
}

<div class="wrapper">
  <div class="box head">
  </div>
  <div class="box side">
  </div>
  <div class="box content">
  </div>
</div>

edited Apr 25, 2018 at 11:38

Vadim Ovchinnikov

14.1k7 gold badges68 silver badges95 bronze badges

answered Apr 25, 2018 at 6:41

Horacio Coronel

4422 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS grid not working for me

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related