CODEWITHSUNDEEP
htmlcsscss-grid
jjzjx118_2
jjzjx118_2

Reputation: 419

grid-layout looks not as I expected

enter image description here I am practice with gird, and I want to layout it as the picture showed.

.container {
  display: grid;
  grid-template-columns: 72px auto 50px;
  grid-template-rows: 200px auto;
  grid-template-areas: "a a a" "b c c" "d d d";
}

.container div {
  border: 1px solid red
}
<div className="container" class="container">
  <div>header</div>
  <div>left</div>
  <div>right</div>
  <div>footer</div>
</div>

the header will be height:72px , footer will be height:50px and the left part has width:200px and content part has width:100% - 200px.

but it looks weird now. did I missed something?

Upvotes: 0

Views: 41

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

You have defined the grid-areas but you haven't told the divs which grid area they are supposed to inhabit.

.container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: :72px 1fr 50px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "a a a" "b c c" "d d d";
  grid-gap: 1em;
}

.container div {
  border: 1px solid red
}

.header {
  grid-area: a;
}

.left {
  grid-area: b;
}

.content {
  grid-area: c;
}

.footer {
  grid-area: d;
}
<div class="container">
  <div class="header">header</div>
  <div class="left">left</div>
  <div class="content">right</div>
  <div class="footer">footer</div>
</div>

Upvotes: 2

Related Questions