CODEWITHSUNDEEP
csshtmlcss-grid
James Wilson
James Wilson

Reputation: 942

make a single row in CSS grid span all columns

How I can make the <legend> span all rows, so it will mess up the <fieldset> which is styled as a 3 column CSS grid?

<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;
}

Upvotes: 4

Views: 8035

Answers (2)

mgm793
mgm793

Reputation: 2066

Maybe it is better to use:

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

Or if you only need 3 columns

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

Upvotes: 10

James Wilson
James Wilson

Reputation: 942

Apply

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

to the CSS. This makes it span three columns.

Upvotes: 0

Related Questions