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:

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

The question listed as duplicate is 1) Already mentioned in my research 2) shown in attempt 2 with what I've tried from that answer and 3) the provided answer solution is not even listed in that Q&A — DᴀʀᴛʜVᴀᴅᴇʀ, Apr 08 '21 at 19:34

score 1 · Accepted Answer · answered Apr 08 '21 at 19:23

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>

`flex-start` is for flex items, not for grid items. It only works for compatibility reasons. What you instead want is `align-items: start;` on the grid container (which sets `align-self` for the grid cells), or `align-self: start;` on the grid items. — connexo, Apr 08 '21 at 19:42
From the spec: *flex-start (self, content) Only used in flex layout. [CSS-FLEXBOX-1] Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-start or cross-start side, as appropriate.* — connexo, Apr 08 '21 at 19:47
*When used outside of a flex formatting context, this value behaves as start. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as start when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as start when used in the content-distribution properties.* — connexo, Apr 08 '21 at 19:47

biberman · Answer 2 · 2021-04-08T19:39:02.433

You hust have to wrap the text in paragraph tags and give the classes instead to them so you doesn't need min max (therefor i gave both div 300px width):

.container {
  display: grid;
  grid-template-columns: 300px 300px;
  column-gap: 32px;
}

.col1 {
  background: red;
  padding: 32px;
}

.col2 {
  background: orange;
  padding: 32px;
}

<div class="container">
  <div>
    <p 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.
    </p>
  </div>
  <div>
    <p 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.
    </p>
  </div>
</div>

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

2 Answers2