CSS-столбец сетки, не охватывающий несколько столбцов - PullRequest
Новая
       13

CSS-столбец сетки, не охватывающий несколько столбцов

1 голос
/ 12 июня 2019

Я пытаюсь использовать CSS-сетку для настройки формы с тремя столбцами: первый столбец используется для отображения метки для ввода, который будет указан во втором столбце.Третий столбец используется для получения правильного интервала формы на странице и позволяет масштабировать форму до размера страницы.

Я могу разделить метки формы и вводить данные в столбцы один и два соответственноОднако, когда я не могу создать новый раздел формы, который центрирован между этими двумя столбцами, он будет либо в первом столбце labels, либо во втором столбце 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>

Я также пытался сделать matches div другим элементом HTML, таким как article или span, который тоже не работал.Будем весьма благодарны за любую помощь в попытке выяснить, как сделать интервал между классами matches между этими двумя столбцами.

1 Ответ

0 голосов
/ 13 июня 2019

Согласно моим комментариям выше, вы можете использовать grid-column: span 2 для элемента matches, чтобы он занимал два столбца, а затем добавьте text-align: center для центрирования в этом пространстве.

Также обратите внимание, что я использовал .formContainer > .matches вместо .matches для специфичности стилей (grid-column определение в .formContainer > div переопределяло grid-column в .matches, поскольку оно более конкретный) - см. демо ниже: 

.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>
...