CODEWITHSUNDEEP
csscss-grid
kittu
kittu

Reputation: 7008

set css grid layout equal height rows

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>

Upvotes: 0

Views: 300

Answers (1)

strek
strek

Reputation: 1230

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>

Upvotes: 1

Related Questions