CODEWITHSUNDEEP
htmlcsscss-grid
Nexxus
Nexxus

Reputation: 151

CSS grid-column not spanning multiple columns

I am trying to use CSS grid to setup a form that has three columns: the first column is used to display the label for the input that will be listed in the second column. The third column is used to get the correct spacing of the form on the page and allow the form to scale to the page size.

I am able to separate the form labels and form inputs into columns one and two respectively, however when I cannot make a new section of the form that is centered between these two columns, it will either be in column one labels or column two data.

.formContainer {
  display: grid;
  grid-template-columns: [labels] auto [data] auto 1fr;
  grid-auto-rows: auto;
  grid-row-gap: 5px;
  margin-top: 3%;
  margin-left: 12%;
  margin-right: 3%;
}

.formContainer>label {
  grid-column: labels;
}

.formContainer>div {
  grid-column: data;
}

.matches {
  grid-column-start: labels !important;
  grid-column-end: data !important;
}
<div class='formContainer'>
  <label>
     <span>Name</span>
  </label>
  <div>
    <input type="text" />
  </div>
  <div class='matches'>
    <div>No matches yet!</div>
  </div>
</div>

I have also tried making the matches div a different HTML element such as article or span which did not work either. Any help with trying to figure out how to make the matches class span between both of these columns would be greatly appreciated.

Upvotes: 2

Views: 2151

Answers (1)

kukkuz
kukkuz

Reputation: 42370

As per my comments above, you can use grid-column: span 2 to the matches element to allow it to occupy two columns and then add text-align: center to center in that space.

Also note I've used .formContainer > .matches instead of .matches for specificity of styles (grid-column definition in .formContainer > div was overriding the grid-column in .matches as it is more specific) - see demo below:

.formContainer {
    display: grid;
    grid-template-columns: [labels] auto [data] auto 1fr;
    grid-auto-rows: auto;
    grid-row-gap: 5px;
    grid-column-gap: 10px; /* added */
    margin-top: 3%;
    margin-left: 12%;
    margin-right: 3%;
}
.formContainer > label {
    grid-column: labels;
}
.formContainer > div {
    grid-column: data;
}
/* changed below */
.formContainer > .matches{
    grid-column: span 2;
    text-align: center;
}
<div class='formContainer'>
  <label>
     <span>Name</span>
  </label>
  <div>
    <input type="text" />
  </div>
  <div class='matches'>
    <div>No matches yet!</div>
  </div>
</div>

Upvotes: 1

Related Questions