Сетка CSS не показывает элемент в указанном столбце сетки - PullRequest
Новая
       11

Сетка CSS не показывает элемент в указанном столбце сетки

0 голосов
/ 07 января 2019

У меня есть встроенная форма с тремя колонками.

Хотя я использую сетки, я пытаюсь заставить кнопку отправки сидеть посередине (так во втором столбце), но не знаю, почему мой нынешний подход не работает: 

#form {
  display: grid;
  grid-template-areas: 'inputs1 inputs2 textarea' 'inputs1 inputs2 submit';
  justify-content: center;
  grid-auto-columns: 25%;
}
<form id="form">

  <div class="responsiveRow">
    <span> Text 1:</span>
    <input type="text" />
  </div>
  <div class="responsiveRow">
    <span> Text 2:</span>
    <input type="text" />
  </div>

  <div class="responsiveRow">
    <span> Textarea:</span>
    <textarea cols="10" rows="10"> </textarea>
  </div>

  <div class="responsiveRow">
    <span> Text 3:</span>
    <input type="text" />
  </div>

  <div class="responsiveRow">
    <span> Text 4:</span>
    <input type="text" />
  </div>

  <div class="responsiveRow">
    <input type="submit">
  </div>


</form>

Я не могу изменить HTML-код формы, и выше показано, как код формы отображается после встраивания.

Любая помощь будет оценена.

Желаемые результаты:

enter image description here

Ответы [ 2 ]

0 голосов
/ 07 января 2019

Попробуйте: 

#form {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}
#text-area {
  grid-column: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
#button {
  grid-column: 2;
}
<form id="form">
  <div class="responsiveRow">
    <span> Text 1:</span>
    <input type="text" />
  </div>
  <div class="responsiveRow">
    <span> Text 2:</span>
    <input type="text" />
  </div>
  <div class="responsiveRow" id="text-area">
    <span> Textarea:</span>
    <textarea cols="10" rows="10"> </textarea>
  </div>
  <div class="responsiveRow">
    <span> Text 3:</span>
    <input type="text" />
  </div>
  <div class="responsiveRow">
    <span> Text 4:</span>
    <input type="text" />
  </div>
  <div class="responsiveRow" id="button">
    <input type="submit">
  </div>
</form>

Вот jsfiddle

0 голосов
/ 07 января 2019

Вы используете области сетки, чтобы решить, куда поместить элементы в вашей сетке -

Следующий пример должен быть тем, что вам нужно. 

.responsiveRow:nth-of-type(3) {grid-area: myArea;}
.responsiveRow:nth-of-type(6) {grid-area:centered;}
.responsiveRow{border: 1px solid #000;}
#form{
    display: grid;
    grid-template-areas: '. . myArea' '. . myArea' '. centered .';
    justify-content: center;
    grid-auto-columns: 33%;
}

/*remove the grid on mobiles*/
@media all and (max-width:540px){
  #form{
    display:block;
  }
}
<form id="form">

  <div class="responsiveRow">
    <span> Text 1:</span>
    <input type="text"/>
  </div>
  <div class="responsiveRow">
    <span> Text 2:</span>
    <input type="text"/>
  </div>
  
    <div class="responsiveRow">
    <span> Textarea:</span>
    <textarea cols="10" rows="10"> </textarea>
  </div>
  
    <div class="responsiveRow">
    <span> Text 3:</span>
    <input type="text"/>
  </div>
  
    <div class="responsiveRow">
    <span> Text 4:</span>
    <input type="text"/>
  </div>
  
    <div class="responsiveRow">
    <input type="submit">
  </div>
  
  
</form>
...