Прижать красный блок

Question

 .m_bl {
    display: grid;
    grid-template-columns: 1fr max(100px, 30%);
    align-items: start;
    grid-template-areas: 'pl rk' 'cn rk';
 }
 .pl {
    height: 200px;
    background: gold;
    grid-area: pl;
 }
 .content {
    height: 100px;
    background: red;
    grid-area: cn;
 }
 .rk {
 
    height: 800px;
    background: green;
     grid-area: rk;
 }

<div class='m_bl'>
    <div class='pl'></div>
    <div class='content'></div>
    <div class='rk'></div>
</div>

Как выполнить так, чтобы красный блок был прижат к желтому, чтобы не расcпологался по центру?

Answer 1

grid-template-rows: min-content 1fr;

.m_bl {
    display: grid;
    grid-template-columns: 1fr max(100px, 30%);
    grid-template-rows: min-content 1fr;
    align-items: start;
    grid-template-areas: 'pl rk' 'cn rk';
 }
 .pl {
    height: 200px;
    background: gold;
    grid-area: pl;
 }
 .content {
    height: 100px;
    background: red;
    grid-area: cn;
 }
 .rk {
 
    height: 800px;
    background: green;
     grid-area: rk;
 }

<div class='m_bl'>
    <div class='pl'></div>
    <div class='content'></div>
    <div class='rk'></div>
</div>

Answer 2

.m_bl {
   display: grid;
   grid-template-columns: 1fr max(100px, 30%);
   grid-template-rows: 200px auto;
}
.pl {
   height: 200px;
   background: gold;
}
.content {
   height: 100px;
   background: red;
   grid-row: 2 / 3;
}
.rk {
   height: 800px;
   background: green;
}

    <div class='m_bl'>
        <div class='pl'></div>
        <div class='content'></div>
        <div class='rk'></div>
    </div>

БЛОГ НА HUSL

Прижать красный блок

Ответы (2 шт):