-1

I have specified the areas for two div's labeled as class search1 and search2. They are the children of a div labeled with id searchContainer. Here is the CSS and Pug Template code used:

PUG Template Code

.searchContainer
            div#search1
                .form-outline
                    input.form-control(aria-label="Search" placeholder="Type query" type="search")
            div#search2
                .input-group.mb-3
                    .input-group-prepend
                        button.btn.btn-outline-secondary(type='button') Button
                    input.form-control(type='text' placeholder='' aria-label='' aria-describedby='basic-addon1')

Compiled HTML and CSS 

#search1{
  grid-area: "search1"
}

#search2{
  grid-area: "search2";
}

.searchContainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "search1 . search2"
}
<div class="searchContainer">
  <div id="search1">
    <div class="form-outline">
      <input class="form-control" aria-label="Search" placeholder="Type query" type="search"/>
    </div>
  </div>
  <div id="search2">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <button class="btn btn-outline-secondary" type="button">Button</button>
      </div>
      <input class="form-control" type="text" placeholder="" aria-label="" aria-describedby="basic-addon1"/>
    </div>
  </div>
</div>

I originally had all 3 as id's instead of 1 id div and 2 class div's.

davidleininger
  • 909
  • 4
  • 11
CubeDomination
  • 35
  • 9

1 Answers1

1

It is working, the real issue is how you're calling the grid areas on the elements. You're using quotation marks (" ") around the grid areas names. This isn't valid, instead of grid-area: "search1"; it should be grid-area: search1;.

#search1{
  grid-area: search1;
}

#search2{
  grid-area: search2;
}

.searchContainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "search1 . search2"
}
<div class="searchContainer">
  <div id="search1">
    <div class="form-outline">
      <input class="form-control" aria-label="Search" placeholder="Type query" type="search"/>
    </div>
  </div>
  <div id="search2">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <button class="btn btn-outline-secondary" type="button">Button</button>
      </div>
      <input class="form-control" type="text" placeholder="" aria-label="" aria-describedby="basic-addon1"/>
    </div>
  </div>
</div>
davidleininger
  • 909
  • 4
  • 11
  • Note that the [](https://html.spec.whatwg.org/dev/embedded-content.html#the-input-element) tag does not use and does not need a closing slash and never has in any HTML specification. – Rob Aug 06 '23 at 11:21
  • That’s fair. That was the output when I compiled the Pug, so I just left it. – davidleininger Aug 06 '23 at 12:00