使用 CSS 网格将复选框堆叠到右侧列并在左侧添加标签答案

【问题标题】：Stack checkboxes to the right column and label to the left using CSS grid使用 CSS 网格将复选框堆叠到右侧列并在左侧添加标签
【发布时间】：2017-09-19 11:02:01
【问题描述】：

我无法让复选框在各自的网格列中正确堆叠。我正在使用 ReactQL (jsx)，所以我认为它不会在 code-sn-p 编辑器中正确显示。浮点数在这里没用。

/* checkboxes */

.section__checkboxes {
  display: grid;
  grid-template-columns: 2fr 4fr;
  grid-column-gap: 2em;
}

.description {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.checkbox {
  grid-column: 2 / 2;
  grid-row: 2 / 3;
}

.choice {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div className={cn (css.section__checkboxes, css.section_wrapper)}>
  <label className={css.description} htmlFor="checkbox_2">email notifications</label>

  <input id="checkbox_2_1" name="checkbox_2_1" className={css.checkbox} type="checkbox" value="1" />
  <label className={css.choice} htmlFor="checkbox_2_1">new direct messages</label>
  <input id="checkbox_2_2" name="checkbox_2_2" className={css.checkbox} type="checkbox" value="1" />
  <label className={css.choice} htmlFor="checkbox_2_2">new user signups</label>
  <input id="checkbox_2_3" name="checkbox_2_3" className={css.checkbox} type="checkbox" value="1" />
  <label className={css.choice} htmlFor="checkbox_2_3">new uploads</label>
</div>

【问题讨论】：

看起来您将所有元素放在同一个网格行上。你需要解决这个问题。

标签： html css jsx css-grid

【解决方案1】：

您可以将grid-row: span 3 用于description 以跨越左侧的行。如果要保留当前标记，可以添加grid-template-columns: 1fr auto 2fr。请参阅下面的演示：

.section__checkboxes {
  display: grid;
  grid-template-columns: 1fr auto 2fr;
  grid-column-gap: 2em;
}

.description {
  grid-row: span 3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div class="section__checkboxes section_wrapper">
  <label class="description" for="checkbox_2">email notifications</label>
  <input id="checkbox_2_1" name="checkbox_2_1" class="checkbox" type="checkbox" value="1" />
  <label class="choice" for="checkbox_2_1">new direct messages</label>
  <input id="checkbox_2_2" name="checkbox_2_2" class="checkbox" type="checkbox" value="1" />
  <label class="choice" for="checkbox_2_2">new user signups</label>
  <input id="checkbox_2_3" name="checkbox_2_3" class="checkbox" type="checkbox" value="1" />
  <label class="choice" for="checkbox_2_3">new uploads</label>
</div>

如果您要更改标记并将label 和checkboxes 包装在一起，您可以这样做：

.section__checkboxes {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: 2em;
}

.description {
  grid-row: span 3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div class="section__checkboxes section_wrapper">
  <label class="description" for="checkbox_2">email notifications</label>
  <div>
    <input id="checkbox_2_1" name="checkbox_2_1" class="checkbox" type="checkbox" value="1" />
    <label class="choice" for="checkbox_2_1">new direct messages</label>
  </div>
  <div>
    <input id="checkbox_2_2" name="checkbox_2_2" class="checkbox" type="checkbox" value="1" />
    <label class="choice" for="checkbox_2_2">new user signups</label>
  </div>
  <div>
    <input id="checkbox_2_3" name="checkbox_2_3" class="checkbox" type="checkbox" value="1" />
    <label class="choice" for="checkbox_2_3">new uploads</label>
  </div>
</div>

【讨论】：