CODEWITHSUNDEEP
htmlcsscss-grid
Marco
Marco

Reputation: 2737

When using CSS grid, i don't want some grid areas to expand

I'm starting to use CSS grid. So far, so good. I want some grid areas NOT to expand when other areas do. This is what i have now enter image description here

I'm designing mobile first, then desktop. The grid on the desktop, if you notice, the 'album' area expands when the body expands. I don't want that. I want the areas 'album', 'credits', 'version' to retain the height even if the 'body' or the 'comment' area expand. In other words, when a grid area expands, the other areas height remain intact.

https://jsfiddle.net/e9n4ac5d/

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "body" "album" "credit" "version" "comment";
}

@media screen and (min-width: 400px) {
  .grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "body album" "comment credit" "comment version";
  }
}

.body {
  grid-area: body;
  background-color: red;
}

.album {
  grid-area: album;
  background-color: pink;
}

.credit {
  grid-area: credit;
  background-color: green;
}

.version {
  grid-area: version;
  background-color: yellow;
}

.comment {
  grid-area: comment;
  background-color: #eee;
}
<div class="grid">
  <div class="body">body
    <br><br><br><br><br><br>
  </div>
  <div class="album">album</div>
  <div class="credit">credits</div>
  <div class="version">version</div>
  <div class="comment">comments</div>
</div>

Upvotes: 0

Views: 422

Answers (2)

Nidhi
Nidhi

Reputation: 1443

You can change your HTML structure like this:

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "body" "album" "credit" "version" "comment";
}

@media screen and (min-width: 400px) {
  .right {
    grid-area: right;
  }
  .grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "body right" "comment right";
  }
}

.body {
  grid-area: body;
  background-color: red;
}

.album {
  grid-area: album;
  background-color: pink;
  height: 50px;
}

.credit {
  grid-area: credit;
  background-color: green;
  height: 50px;
}

.version {
  grid-area: version;
  background-color: yellow;
  height: 50px;
}

.comment {
  grid-area: comment;
  background-color: #eee;
}
<div class="grid">
  <div class="body">body
    <br><br><br><br><br><br>
  </div>
  <div class="right">
    <div class="album">album</div>
    <div class="credit">credits</div>
    <div class="version">version</div>
  </div>
  <div class="comment">comments</div>
</div>

Upvotes: 4

Subham Debnath
Subham Debnath

Reputation: 739

Just set fixed height and width... To make it non expandable and non compressible...

Upvotes: -3

Related Questions