In CSS Grid how to remove column 1's matching height of column 2?

Question

Not familiar with CSS Grid I'm trying to create a two column layout. Per reading tutorials it was suggested to use minmax() but for some reason I cannot figure out how to break column 1's full height that matches column 2, example:

.container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap:32px;
}
.col1 {
  background:red;
  padding:32px;
}
.col2 {
  background:orange;
  padding:32px;
}

<div class="container">
<div class="col1">Bacon ipsum dolor amet boudin andouille pig beef, prosciutto tongue ball tip cow ham. Ground round salami tenderloin, biltong tail pastrami pork shoulder pork loin. Picanha cow ribeye meatloaf tri-tip pork chop burgdoggen salami beef chuck alcatra swine ground round. Tail doner tri-tip flank brisket prosciutto chislic capicola meatloaf picanha swine. Shankle capicola venison beef boudin, strip steak alcatra bacon sirloin cupim spare ribs short ribs kielbasa pork loin ground round. Leberkas short loin boudin meatloaf.</div>
<div class="col2">Kielbasa pastrami tenderloin, turkey short loin pork loin swine fatback flank leberkas prosciutto hamburger t-bone drumstick. Jowl picanha ham, t-bone filet mignon short ribs turducken leberkas. Turducken ham hock alcatra, shoulder tail sirloin strip steak hamburger picanha jerky tenderloin spare ribs tri-tip. Tenderloin prosciutto picanha, capicola kevin pig biltong t-bone pork chop boudin porchetta bacon salami chicken fatback. Ham hock pancetta tail tenderloin jerky ground round chislic frankfurter shank picanha pork belly strip steak pork chop. Short loin andouille biltong corned beef pig pork chop pork bacon tri-tip jerky.

Filet mignon meatloaf drumstick hamburger ham hock landjaeger tri-tip ribeye swine. Ham shankle tongue, kielbasa swine burgdoggen tenderloin beef ribs buffalo meatball hamburger leberkas picanha t-bone. Beef ribs ball tip ham pork loin capicola filet mignon. Hamburger sausage shoulder meatball pork chop tail spare ribs, fatback burgdoggen drumstick short loin swine pork loin.

Kielbasa boudin cow beef beef ribs tongue pork chop frankfurter sausage burgdoggen. Flank landjaeger leberkas spare ribs alcatra, swine corned beef boudin shoulder pig prosciutto pancetta pork chop. Pork chop turducken andouille filet mignon alcatra porchetta cupim tri-tip cow tongue beef meatball doner. Beef ribs ham hock chuck shank doner.

</div>
</div>

after research and reading "CSS Grid Layout: The Minmax Function" I tried:

.container {
  display: grid;
  grid-template-columns: minmax(min-content, max-content) 300px;
  column-gap:32px;
}
.col1 {
  background:red;
  padding:32px;
}
.col2 {
  background:orange;
  padding:32px;
}

<div class="container">
<div class="col1">Bacon ipsum dolor amet boudin andouille pig beef, prosciutto tongue ball tip cow ham. Ground round salami tenderloin, biltong tail pastrami pork shoulder pork loin. Picanha cow ribeye meatloaf tri-tip pork chop burgdoggen salami beef chuck alcatra swine ground round. Tail doner tri-tip flank brisket prosciutto chislic capicola meatloaf picanha swine. Shankle capicola venison beef boudin, strip steak alcatra bacon sirloin cupim spare ribs short ribs kielbasa pork loin ground round. Leberkas short loin boudin meatloaf.</div>
<div class="col2">Kielbasa pastrami tenderloin, turkey short loin pork loin swine fatback flank leberkas prosciutto hamburger t-bone drumstick. Jowl picanha ham, t-bone filet mignon short ribs turducken leberkas. Turducken ham hock alcatra, shoulder tail sirloin strip steak hamburger picanha jerky tenderloin spare ribs tri-tip. Tenderloin prosciutto picanha, capicola kevin pig biltong t-bone pork chop boudin porchetta bacon salami chicken fatback. Ham hock pancetta tail tenderloin jerky ground round chislic frankfurter shank picanha pork belly strip steak pork chop. Short loin andouille biltong corned beef pig pork chop pork bacon tri-tip jerky.

Filet mignon meatloaf drumstick hamburger ham hock landjaeger tri-tip ribeye swine. Ham shankle tongue, kielbasa swine burgdoggen tenderloin beef ribs buffalo meatball hamburger leberkas picanha t-bone. Beef ribs ball tip ham pork loin capicola filet mignon. Hamburger sausage shoulder meatball pork chop tail spare ribs, fatback burgdoggen drumstick short loin swine pork loin.

Kielbasa boudin cow beef beef ribs tongue pork chop frankfurter sausage burgdoggen. Flank landjaeger leberkas spare ribs alcatra, swine corned beef boudin shoulder pig prosciutto pancetta pork chop. Pork chop turducken andouille filet mignon alcatra porchetta cupim tri-tip cow tongue beef meatball doner. Beef ribs ham hock chuck shank doner.

</div>
</div>

So far I'm not finding a resolution in my search query or after reading:

• Remove wide gaps in CSS Grid
• Is it possible to remove the height from empty rows in grid with grid-template-areas?
• Why can't I remove all the deadspace from CSS Grid Layout?
• How to hide overflow part of column in css grid layout with specified row height?
• CSS Grid - White space on the bottom and how to remove it
• Why is my Grid element's height not being calculated correctly?

With CSS Grid how can I remove column 1's matching height of column 2?

Answer 1

You can't stop the columns being equal height but you can align the content of the columns so it does not achieve the default 100% height.

Note that the row will still have the same height but this has the visual appearance you seem to be after.

.container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap:32px;
}
.col1 {
  background:red;
  padding:32px;
  align-self:flex-start;
}
.col2 {
  background:orange;
  padding:32px;
  align-self:flex-start;
}

<div class="container">
<div class="col1">Bacon ipsum dolor amet boudin andouille pig beef, prosciutto tongue ball tip cow ham. Ground round salami tenderloin, biltong tail pastrami pork shoulder pork loin. Picanha cow ribeye meatloaf tri-tip pork chop burgdoggen salami beef chuck alcatra swine ground round. Tail doner tri-tip flank brisket prosciutto chislic capicola meatloaf picanha swine. Shankle capicola venison beef boudin, strip steak alcatra bacon sirloin cupim spare ribs short ribs kielbasa pork loin ground round. Leberkas short loin boudin meatloaf.</div>
<div class="col2">Kielbasa pastrami tenderloin, turkey short loin pork loin swine fatback flank leberkas prosciutto hamburger t-bone drumstick. Jowl picanha ham, t-bone filet mignon short ribs turducken leberkas. Turducken ham hock alcatra, shoulder tail sirloin strip steak hamburger picanha jerky tenderloin spare ribs tri-tip. Tenderloin prosciutto picanha, capicola kevin pig biltong t-bone pork chop boudin porchetta bacon salami chicken fatback. Ham hock pancetta tail tenderloin jerky ground round chislic frankfurter shank picanha pork belly strip steak pork chop. Short loin andouille biltong corned beef pig pork chop pork bacon tri-tip jerky.

Filet mignon meatloaf drumstick hamburger ham hock landjaeger tri-tip ribeye swine. Ham shankle tongue, kielbasa swine burgdoggen tenderloin beef ribs buffalo meatball hamburger leberkas picanha t-bone. Beef ribs ball tip ham pork loin capicola filet mignon. Hamburger sausage shoulder meatball pork chop tail spare ribs, fatback burgdoggen drumstick short loin swine pork loin.

Kielbasa boudin cow beef beef ribs tongue pork chop frankfurter sausage burgdoggen. Flank landjaeger leberkas spare ribs alcatra, swine corned beef boudin shoulder pig prosciutto pancetta pork chop. Pork chop turducken andouille filet mignon alcatra porchetta cupim tri-tip cow tongue beef meatball doner. Beef ribs ham hock chuck shank doner.

</div>
</div>