css grid layout - высота строк никогда не работает - PullRequest
Новая
       7

css grid layout - высота строк никогда не работает

0 голосов
/ 18 мая 2018

Я хочу использовать проценты в моем css для моего приложения реакции, но это вызывает такую ​​головную боль.Ширина% работает фантастически все время, но высота% всегда является проблемой.Похоже, я должен указать высоту в пикселях, чтобы он работал, если только элемент не содержит дочерние элементы.

Я что-то упустил из этого.Будет ли div не установлен на 100% от оставшейся высоты без дочерних элементов.Приведенный ниже код не работает, несмотря на то, что я установил свойство align-items для растяжения.

.search-container{
    display: grid;
    grid-template-columns: auto 900px 300px auto;
    grid-template-rows: 30% auto auto;
    grid-gap: 20px;
}

.promo-container {
    background-color:blue;
    grid-column-start: 2;
    grid-column-end: 3;
    align-items: stretch;
}

.form-container {
    background-color:blue;
    grid-column-start: 3;
    grid-column-end: 4;
    align-items: stretch;
}

.results-header {
    background-color:rgb(255, 94, 0);
    grid-column-start: 2;
    grid-column-end: 4;
    height: 90px;
}

.refine-search {
    background-color:blue;
    grid-column-start: 2;
    grid-column-end: 3;
    height: 100%;
}

.results-container{
    background-color:rgb(0, 255, 42);
    grid-column-start: 2;
    grid-column-end: 3;
}
<div className="search-container">
  <div className="promo-container">
  </div>              
  <div className="form-container">
  </div>
  <div className="results-header">
  </div>
  <div className="refine-search">
  </div>
  <div className="results-container">
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 18 мая 2018

Проблема с ростом в том, что для работы вам нужно иметь детей.Поэтому, если вы хотите увидеть пустое пространство, где должны быть дочерние элементы (остальные элементы), вам действительно нужно установить пиксели, rem, fr и т. Д. В противном случае сетка не позволит пустому пространству быть там, еслитам ничего нетНапример, если я хочу увидеть оставшееся пространство, я могу сказать: 

`.someClass {
   display: grid; 
   /* I'm setting the rows to be 3 row with a given space of 1 fr 
    each row will be placed with given space unit */
   grid-templates-rows: repeat(3, 1fr);
   grid-template-columns: repeat(5, 1fr);
}`

В противном случае, если вы хотите создать сетку в зависимости от доступного пространства автоматически, вы можете установить все на автоматический режим, например: 

.someotherClass {
 display: grid;
 /* grid template areas is the combination of the template rows and columns */
 grid-templates-areas: auto;
 }

Конечно, с помощью auto я все еще могу упорядочить свои элементы по нужным строкам и столбцам, но пространство будет соответствующим образом отрегулировано для каждого элемента

Чтобы дать вам некоторое представление о том, как работает сеткаРаботы проверить эту страницу: https://cssgridgarden.com/

Надежда помогает:)

0 голосов
/ 18 мая 2018

Вам необходимо установить высоту родительских элементов. 

html, body, div {
    height: 100%;
    width: 100%;
}
...