CODEWITHSUNDEEP
htmlcsscss-grid
Patryk Janik
Patryk Janik

Reputation: 2623

Grid item take as much space at necessary

I would like to create View as follows: small left box, right extended box in one row, then second row, one box which takes whole area

I can only use to achieve that Grid View functionality (no flexbox).

For now I've prepared grid like: 

.item1 { grid-area: left; }
.item2 { grid-area: right; }
.item3 { grid-area: content; }

.grid-container {
  display: grid;
  grid-template-areas:
    'left right'
    'content content';
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 5px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 5px 0;
  font-size: 30px;
  }
<div class="grid-container">
  <div class="item1">left</div>
  <div class="item2">right</div>
  <div class="item3">content</div>
</div>

Here is js fiddle: https://jsfiddle.net/d32phsyu/3/

Where I have left, right and content grid-template-areas.

Problem is that I would like left area to take only as much space as its content (like inline-block) and right area to take all other space.

Is it possible without saying how much pixels left needs to take?

If yes, then how to achieve that?

Upvotes: 3

Views: 2113

Answers (1)

Paulie_D
Paulie_D

Reputation: 114980

You need to define the column widths with the first as auto and the second as 1fr (the rest of the space).

.item1 {
  grid-area: left;
}

.item2 {
  grid-area: right;
}

.item3 {
  grid-area: content;
}

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'left right' 'content content';
  grid-gap: 5px;
  padding: 5px;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 5px;
  font-size: 30px;
  border: 2px solid blue;
}
<div class="grid-container">
  <div class="item1">left</div>
  <div class="item2">right</div>
  <div class="item3">content</div>
</div>

Upvotes: 5

Related Questions