Как выровнять столбцы во вложенном HTML с помощью CSS-сетки - PullRequest
Новая
       7

Как выровнять столбцы во вложенном HTML с помощью CSS-сетки

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

Мне нужно использовать сетку, но мои столбцы не являются прямыми дочерними элементами сетки. Сетка имеет две колонки:

  1. Столбец 1 содержит метку.
  2. В столбце 2 содержится поле ввода.

Столбец метки должен быть таким же большим (но не больше), чем самый большой столбец. Входной столбец должен использовать все оставшееся пространство. Я попробовал следующую комбинацию CSS / HTML. 

* {
  border: 1px solid black;
  background: #2222;
}

.container {
  display: grid;
  width: 550px;
  grid-gap: 10px;
  grid-template-rows: [a] auto [b] auto [c] auto;
  grid-template-columns: [label] auto [input] 1fr;
  align-items: stretch;
}

label { grid-column-start: label; }
input { grid-column-start: input; }

.a { grid-row-start: a; }
.b { grid-row-start: b; }
.c { grid-row-start: c; }
<div class="container">
  <div class="a">
    <label>A</label>
    <input>
  </div>
  <div class="b">
    <label>Label B</label>
    <input>
  </div>
  <div class="c">
    <label>Longest C label</label>
    <input>
  </div>
</div>

Я понимаю, что grid-column-start не используется, потому что элементы не являются прямыми потомками сетки. Но как я могу выполнить эту функцию без жесткого кодирования ширины метки или использования Javascript?

Хорошо бы использовать несколько сеток (по одной на строку), но мне нужно было бы синхронизировать ширину первого столбца. Я прочитал о подсетях , но он еще не реализован ни одним крупным браузером. Есть ли у меня другие варианты решения этой проблемы?

1 Ответ

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

Кажется, это больше подходит для разметки таблицы, чем сетка CSS: 

* {
 box-sizing:border-box;
}
.container {
  display: table;
  width: 550px;
  border:1px solid;
}

.container>div {
  display: table-row;
}

label,
input {
  display: table-cell;
  border:1px solid green;
}
label {
  width:5%; /*a small value*/
  white-space:nowrap;
}
input {
 width:100%;
}
<div class="container">
  <div class="a">
    <label>A</label>
    <input>
  </div>
  <div class="b">
    <label>Label B</label>
    <input>
  </div>
  <div class="c">
    <label>Longest C label</label>
    <input>
  </div>
</div>
...