How to set height auto in Grid?

Question

First, see the image.

How can I remove the extra space? I want to set the height of the box as per the content. How can I do it in Grid?

See the following code.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  background-color: #ddd;
  padding: 10px;
  /* Grid CSS */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.container div {
  border: 1px solid #000;
  padding: 15px;
}

<div class="container">
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias ipsum consectetur quod rem dolores? Dolorem, debitis quos. Illo aliquam hic cupiditate nemo temporibus quibusdam commodi dicta quisquam, saepe laboriosam tempore minus et rem architecto
    modi voluptatibus neque! Porro quibusdam itaque praesentium maxime rem deleniti est, sed dolorum reprehenderit pariatur provident.</div>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum accusantium quos dolorem esse pariatur! Illo harum voluptatibus labore obcaecati cum?</div>
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias ipsum consectetur quod rem dolores? Dolorem, debitis quos. Illo aliquam hic cupiditate nemo temporibus quibusdam commodi dicta quisquam, saepe laboriosam tempore minus et rem architecto
    modi voluptatibus neque! Porro quibusdam itaque praesentium maxime rem deleniti est, sed dolorum reprehenderit pariatur provident.</div>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum accusantium quos dolorem esse pariatur! Illo harum voluptatibus labore obcaecati cum?</div>
</div>

I want to fill the bottom space of the top box with the below box. Is it possible in Grid?

No it is not possible in a row layout – Paulie_D Apr 06 '21 at 17:37 — Paulie_D, Apr 06 '21 at 17:37

score -1 · Answer 1 · answered Apr 06 '21 at 17:14

You can use the align-items property:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  background-color: #ddd;
  padding: 10px;
  /* Grid CSS */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.container div {
  border: 1px solid #000;
  padding: 15px;
}

<div class="container">
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias ipsum consectetur quod rem dolores? Dolorem, debitis quos. Illo aliquam hic cupiditate nemo temporibus quibusdam commodi dicta quisquam, saepe laboriosam tempore minus et rem architecto
    modi voluptatibus neque! Porro quibusdam itaque praesentium maxime rem deleniti est, sed dolorum reprehenderit pariatur provident.</div>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum accusantium quos dolorem esse pariatur! Illo harum voluptatibus labore obcaecati cum?</div>
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias ipsum consectetur quod rem dolores? Dolorem, debitis quos. Illo aliquam hic cupiditate nemo temporibus quibusdam commodi dicta quisquam, saepe laboriosam tempore minus et rem architecto
    modi voluptatibus neque! Porro quibusdam itaque praesentium maxime rem deleniti est, sed dolorum reprehenderit pariatur provident.</div>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum accusantium quos dolorem esse pariatur! Illo harum voluptatibus labore obcaecati cum?</div>
</div>

Actually, I want to fill the bottom space of the top box with the below box. Is it possible in Grid? — Ibrahim Hasnat, Apr 06 '21 at 17:18
@IbrahimHasnat Down votes should not be used for answers that adequately answered the question as written at the time. Your clarification and edit is good, but shouldn't warrant a downvote for answers provided beforehand. — Sean, Apr 07 '21 at 13:41

How to set height auto in Grid?

1 Answers1