让CSS网格中的单个行跨越所有列

4
我该如何让<legend>跨越所有行,以便不会破坏被样式化为3列CSS网格的<fieldset>

<fieldset>
  <legend>Personal Details</legend>
  <label class="field__label" for="first-names">
            First names
        </label>
  <input class="form__entry" id="first-names" type="text" name="firstName">
  <span class="form__feedback form__instructions">
            Must only use letters, spaces, hyphens and apostrophes
        </span>
</fieldset>

CSS:

form {
    display: grid;
    grid-template-columns: minmax(100px, max-content) minmax(200px, max-content) minmax(200px,1fr);
    grid-gap: 10px;
}

fieldset {
    display: contents;
}

问题不清楚。你能分享一张你期望的照片吗? - manish kumar
你应该包含足够的代码让我们复制问题,这里一些CSS会很有用。请提供一个[MCVE]。 - Jon P
2个回答

10

也许更好的做法是使用:

fieldset legend {
  grid-column: 1/-1;
}

或者如果您只需要3列

fieldset legend {
  grid-column: 1/ span 3;
}

看起来更好了,4这个数字确实不直观!我会测试的。 - James Wilson

0

应用

fieldset legend {
    grid-column: 1/4;
}

到CSS中。这使它跨越了三列。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接