Как сохранить минимальный и максимальный размер ячеек сетки CSS фиксированными - PullRequest
Новая
       6

Как сохранить минимальный и максимальный размер ячеек сетки CSS фиксированными

0 голосов
/ 18 февраля 2019

Я пытаюсь использовать CSS-сетку для создания абсолютно фиксированного макета.Макет для встроенного приложения, которое имеет элементы графического интерфейса и текстовые поля.Размеры ячеек не должны изменяться и корректировать их размеры, и если содержимое текстовых полей переполняется, должны появиться полосы прокрутки, в противном случае весь графический пользовательский интерфейс выходит из строя.Независимо от того, что я пытаюсь, мои клетки изменяют размер и подстраиваются по мере увеличения / уменьшения их содержимого.

Настройка: 

*           Desired FIXED layout 
*    +------------------------+----------------------+
*    |                        |       2              |
*    |                        |----------------------|
*    |                        |       3              |
*    |                        |----------------------|
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |         1              |                      |
*    |                        |       4              |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |------------------------+----------------------|
*    |                        |       6              |
*    |         5              |                      |
*    |                        |----------------------|
*    |                        |       7              |
*    +------------------------+----------------------+

и вот мой MWE.Я установил minwidth и minheight на 0 в контейнере, как и в предыдущих вопросах SX, но это, похоже, не дает эффекта (также пробовал в пунктах, тот же результат).(Браузер - версия FF 66 dev, если это имеет значение) 

.container {
  display: grid;
  grid-template-row: 70px 70px 310px 110px 30px;
  grid-template-column: 450px 350px;
  background: #FAEBD7;
  height: 590px;
  width: 700px;
  min-height: 0;
  min-width: 0;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
  background: #675443;
}

.item2 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #42676B;
}

.item3 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  background: #466567;
}

.item4 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
  background: #BABBAB;
}

.item5 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 6;
  background: #FFD700;
}

.item6 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 5;
  background: #FF69B4;
}

.item7 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 5;
  grid-row-end: 6;
  background: #ADFF2F;
}
<div class="container">
  <div class="item1">1 - Dark brown</div>
  <div class="item2">2 - Bluish gray Gray</div>
  <div class="item3">3 - Dark grey</div>
  <div class="item4">4 - Warm grayish</div>
  <div class="item5">5 - Gold (test)</div>
  <div class="item6">6 - Hot pink (test)</div>
  <div class="item7">7 - Green/Yellow (test)</div>
</div>

1 Ответ

0 голосов
/ 18 февраля 2019

1) Измените grid-template-row и grid-template-column на grid-template-rows и grid-template-columns - ни один из ваших размеров не будет работать, пока вы не измените их.

2) Добавьте overflow : auto ; к каждому из вашихпункт CSS правила.Это даст вам полосы прокрутки, если они вам нужны, и скроет полосы прокрутки, если вы этого не сделаете.

...