set css grid layout equal height rows

Question

How do I set equal height rows in css grid layout?

HTML:

.wrapper {
  grid-template-columns: repeat(auto-fill, 100px);
  display: grid;
}

.inbox-side {
  grid-column: 1;
}

.nested-grid {
  grid-template-columns: subgrid;
  grid-row: 1 / 4;
  grid-column: 2/ -1;
}

.inbox-mail-rows {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(10px, auto-fill), minmax(10px, auto-fill)); */
  grid-template-columns: repeat(auto-fill, minmax(10px,1fr) minmax(200px,2fr));
}

.inbox-row-content {
  grid-column: 2 /-1;
}

.inbox-side div, .inbox-mail-rows {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px 15px;
  color: #555;
}

/* .inbox-mails {
  grid-column: 1;
} */

<div class="wrapper container">
  <div class="inbox-side">
    <div class="inbox-inbox">Inbox</div>
    <div class="inbox-pending">Pending</div>
    <div class="inbox-accepted">Accepted</div>
    <div class="inbox-declined">Declined</div>
  </div>
  <div class="nested-grid">
    <div class="inbox-mails">
      <div class="inbox-mail-rows">
        <div class="inbox-checkbox">
          <label>
            <input type="checkbox">
          </label>
        </div>

        <div class="inbox-row-content">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</div>

      </div>
      <div class="inbox-mail-rows">
        <div class="inbox-checkbox">
          <label>
            <input type="checkbox">
          </label>
        </div>
        <div class="inbox-row-content">1</div>
      </div>
      <div class="inbox-mail-rows">
        <div class="inbox-checkbox">
          <label>
            <input type="checkbox">
          </label>
        </div>
        <div class="inbox-row-content">1</div>
      </div>
    </div>
  </div>
</div>

why u have uploaded the same code twice?

Deepshika S
– Deepshika S

2019-09-02 09:45:04 +00:00
Commented Sep 2, 2019 at 9:45 — Deepshika S
– Deepshika S, Commented Sep 2, 2019 at 9:45
developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

Morpheus
– Morpheus

2019-09-02 09:45:42 +00:00
Commented Sep 2, 2019 at 9:45 — Morpheus
– Morpheus, Commented Sep 2, 2019 at 9:45
@DeepshikaS yes so that you will see and reply :)

kittu
– kittu

2019-09-02 10:06:03 +00:00
Commented Sep 2, 2019 at 10:06 — kittu
– kittu, Commented Sep 2, 2019 at 10:06

strek · Accepted Answer · 2019-09-02 09:58:02Z

1

The input has default top and bottom margin of 3px that is why it was uneven remove it by making margin:0;

.wrapper {
  grid-template-columns: repeat(auto-fill, 100px);
  display: grid;
}

.inbox-side {
  grid-column: 1;
}

.nested-grid {
  grid-template-columns: subgrid;
  grid-row: 1 / 4;
  grid-column: 2/ -1;
}

.inbox-mail-rows {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(10px, auto-fill), minmax(10px, auto-fill)); */
  grid-template-columns: repeat(auto-fill, minmax(10px,1fr) minmax(200px,2fr));
}

.inbox-row-content {
  grid-column: 2 /-1;
}

.inbox-side div, .inbox-mail-rows {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px 15px;
  color: #555;
}

/*new code*/
input
{
margin:0;
}

<div class="wrapper container">
  <div class="inbox-side">
    <div class="inbox-inbox">Inbox</div>
    <div class="inbox-pending">Pending</div>
    <div class="inbox-accepted">Accepted</div>
    <div class="inbox-declined">Declined</div>
  </div>
  <div class="nested-grid">
    <div class="inbox-mails">
      <div class="inbox-mail-rows">
        <div class="inbox-checkbox">
          <label>
            <input type="checkbox">
          </label>
        </div>

        <div class="inbox-row-content">1</div>

      </div>
      <div class="inbox-mail-rows">
        <div class="inbox-checkbox">
          <label>
            <input type="checkbox">
          </label>
        </div>
        <div class="inbox-row-content">1</div>
      </div>
      <div class="inbox-mail-rows">
        <div class="inbox-checkbox">
          <label>
            <input type="checkbox">
          </label>
        </div>
        <div class="inbox-row-content">1</div>
      </div>
    </div>
  </div>
</div>

answered Sep 2, 2019 at 9:58

strek

1,2401 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kittu Over a year ago

Thanks for the clue but for me setting label margin to zero worked

kittu Over a year ago

but when the content grows on right, the rows on the left are not matched to the right

strek Over a year ago

@kittu can you show a example of what you are trying to say ?

kittu Over a year ago

Actually that's fine. Stretching the box on left doesn't make sense. Thanks anyway for quick reply

strek Over a year ago

@kittu never mention :)

Collectives™ on Stack Overflow

set css grid layout equal height rows

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related