Как мы можем автоматически генерировать столбцы сетки различного размера с сеткой CSS? - PullRequest
Новая
       5

Как мы можем автоматически генерировать столбцы сетки различного размера с сеткой CSS?

1 голос
/ 11 февраля 2020

Я работаю над макетом сетки, который сжимается из одной строки в один столбец при уменьшении размера экрана с использованием алгоритма repeat(auto-fill, minmax()). Я разбил его на 3 сетки, потому что в конечном итоге они будут распределены по 2 Angular компонентам.

Вот пример моего кода на данный момент и codepen для работы с . 

*{padding: 0; margin: 0;}

.parent{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, 480px));
  background-color: #888;
}

.mainGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10px, 240px));
}

.labelGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10px, 120px));
}

.indexNumber{
  width: 40px;
  /*min-width: 10px;
  max-width: 120px;*/
}

.button-area{
  justify-self: right;
}
 <section>

  <section class="parent">

<p class="indexNumber">13</p>

<article class="mainGrid">

  <label class="labelGrid">
    <span class="labelText">text input</span>
    <input type="text" />
  </label>

  <label class="labelGrid">
    <span class="labelText">text input 2</span>
    <input type="text" />
  </label>

</article>

<article class="button-area">
  <button>delete</button>
</article>

  </section>

</section>

Пока что поведение .mainGrid работает так, как нужно, но в .parentGrid он помещает все в ряды, а не сворачивается вниз при уменьшении ширины страницы. Я предполагаю, что это потому, что значения вложенных сеток получаются слишком широкими, чтобы вместить все в один ряд в .parentGrid.

Я пытался заставить это работать пытаясь выяснить, есть ли способ заставить столбцы генерироваться с различной шириной в зависимости от содержимого. Нет причины, по которой <p>13</p> должен быть в столбце шириной 200px +. Я пытаюсь найти способ заставить это поведение происходить автоматически, чтобы избежать создания медиа-запроса. Я экспериментировал с min-content, который добился цели, но он убрал отзывчивость и свел к минимуму мои входные данные в один ряд, независимо от того, насколько широко вы расширяете экран.

Порядок поведения, которое я пытаюсь Чтобы начать с широкого экрана, сжатие до узкого экрана происходит следующим образом.

  1. Все элементы в одной строке.
  2. Текст внутри меток накладывается на верхнюю часть входных данных.
  3. Входные данные располагаются друг над другом.
  4. Родительская сетка складывает элементы в строки с <p> сверху и <button> снизу.

Кто-нибудь делает? знаете, как можно добиться такого поведения, устраняя все лишнее пространство, которое теряется?

...