Question

如何在CSS网格布局中设置等高的行？

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>

Answer 1

输入的默认top和bottom margin为3px，这就是为什么输入不均匀的原因，可以通过使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>

设置CSS网格布局等高行

1 个答案: