Question 213683 in CSS Question posted in
Some basic documentation can be found here.

Css – Grid template areas but only certain panels to run their natural height

I have the following jsfiddle = https://jsfiddle.net/9sgL3hv1/
I have to use grid for this particular task.

But currently the green and red panels height go evenly off the height of the blue panel and I don’t want that.

I just want the height of the green and red panels to naturally run as high as the content they have inside them. How can I amend the css to achieve this?

Current scss is:

.apply-journey-inner-container{
        display: grid;
        grid-template-areas:
        'main summary'
        'main apply';
        grid-template-columns: 1fr 400px;
        row-gap: 24px;
        column-gap: 86px;

    .summary-panel{
      grid-area: summary;
      background-color: green;
    }

    .main-panel{
        grid-area: main;
        background-color: blue;
    }

    .apply-panel{
            grid-area: apply;
            background-color: red;
    }

}
Tags:

2

Answers


  1. 0

    Add this to the .apply-journey-inner-container class selector

    align-items: start;
    Login or Signup to reply.
  2. 0

    You created a grid area with 4 grid cells. Every cell will within the same row will have the same height. You cannot adjust the height of the cell to fit the content because that’s not how grid works.

    You could create a grid area with 2 cells and to put your summary and apply into the same grid cell

    .grid {
  display: grid;
  grid-template-areas: 
    'main group';
  grid-template-columns: 1fr 400px;
  gap: 24px;
}

.main {
  background: blue;
  height: 500px;
}

.group {
background: #eee;

.summary {
  background: lightgreen;
}

.apply {
  background: pink;
}
    <div class="grid">
  <div class="main">
    Content<br>
    Content...<br>
  </div>
  <div class="group">
  <div class="summary">
    Content
  </div>
  <div class="apply">
   Content
  </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search