Grid-auto-row необходима при использовании grid-template-районов? - PullRequest
Новая
       3

Grid-auto-row необходима при использовании grid-template-районов?

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

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

.wrapper {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: minmax(50px, auto);
    grid-template-areas:
    "nav nav nav nav nav nav nav nav"
    "area1 area1 area1 area1 area1 area1 area1 area1 "
"area1 area1 area1 area1 area1 area1 area1 area1 "
"area1 area1 area1 area1 area1 area1 area1 area1 "
"area1 area1 area1 area1 area1 area1 area1 area1 "
"area2 area2 area2 area2 area2 area2 area2 area2 "
"area2 area2 area2 area2 area2 area2 area2 area2 "
  "footer footer footer footer footer footer footer footer";
}

1 Ответ

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

Вы не определяете никаких grid-template-rows, так что да, это необходимо, если вы хотите установить высоту ваших строк. Без этого высота каждой строки будет определяться как auto, но, вероятно, в вашем случае minmax(50px,auto) также использует часть auto, поскольку 50px меньше вашего контента. В случае пустых строк у вас будет 50px.

Вот пример, чтобы увидеть разницу: 

.wrapper {
    display: grid;
    grid-auto-rows: minmax(50px, auto);
    grid-template-areas:
    "nav "
    "area1 "
"area1"
"area1"
"area1 "
"area2  "
"area2 "
  "footer ";
  margin:10px;
}
.nav {grid-area:nav}
.area1 {grid-area:area1}
.area2 {grid-area:area2}
.footer {grid-area:footer}

.wrapper > div {
  border:1px solid red;
}
<div class="wrapper">
<div class="nav"></div>
<div class="area1"></div>
<div class="area2"></div>
<div class="footer"></div>
</div>

<div class="wrapper" style="grid-auto-rows: minmax(10px, auto);">
<div class="nav"></div>
<div class="area1"></div>
<div class="area2"></div>
<div class="footer"></div>
</div>

Три свойства grid-template-rows, grid-template-columns и grid-template-areas вместе определяют явную сетку

Размер Явная сетка определяется большим числом строк / столбцов, определенных областями сетки-шаблона, и числом строк / столбцов, размер которых равен grid-template-rows / grid-template-columns. Любые строки / столбцы, определенные с помощью grid-template-area , но не имеющие размера от grid-template-rows / grid-template-columns, берут свой размер из свойств grid-auto-rows / grid-auto-columns. ref

...