CODEWITHSUNDEEP
htmlcss
jixodoj
jixodoj

Reputation: 329

CSS Grid - grid template areas not stretching the input to the end

I'm working on a contact form. for the input fields, I'm using a CSS grid with grid-template-areas. I want every field to take 50% of space except the message field. I want it to take 100% space. all the other fields work as expected but the message field is also taking 50% of space.

Any suggestions?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.input-container {
  display: -ms-grid;
  display: grid;
      grid-template-areas: 'name email' 'subject phone' 'message message';
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-gap: 1.75rem;
}

.input-container .input {
  font-size: 0.875rem;
  background: #f2f3f5;
  border-color: #f2f3f5;
}

.input-container #name {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: name;
}

.input-container #email {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: email;
}

.input-container #subject {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: subject;
}

.input-container #phone {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: phone;
}

.input-container #message {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: message;
  height: 120px;
}
<div class="input-container">
  <div class="field">
    <input
      type="text"
      name="name"
      placeholder="Your Name"
      id="name"
      class="input form-control"
    />
  </div>
  <div class="field">
    <input
      type="text"
      name="email"
      placeholder="Email Address"
      id="email"
      class="input form-control"
    />
  </div>
  <div class="field">
    <input
      type="text"
      name="subject"
      placeholder="Subject"
      id="subject"
      class="input form-control"
    />
  </div>
  <div class="field">
    <input
      type="text"
      name="phone"
      placeholder="Phone"
      id="phone"
      class="input form-control"
    />
  </div>
  <div class="field">
    <textarea
      name="message"
      placeholder="Message"
      id="message"
      class="input form-control"
    ></textarea>
  </div>
</div>

Upvotes: 1

Views: 783

Answers (1)

Gh05d
Gh05d

Reputation: 8992

The problem is the field container. It is the direct child of the grid and so only it can span the full width, as your #message is in it. so you have to target it instead. You can do like this:

.field:last-of-type {
  grid-area: message;
  height: 120px;
  width: 100%;
}

#message {
  width: 100%;
}

The textarea needs now only to fill the full width of it's parent.. But I would give it an explicit class to make it more stable. Find a working example here.

On a sidenote, grid only works properly for direct children, not there children. So I would advise to give the fields the corresponding grid-area property.

Upvotes: 3

Related Questions