Как интерпретируется grid-template-rows: auto auto 1fr auto?

Недавно я создал макет, используя сетку CSS. Хотя это работает хорошо, меня смущает, как это работает. В частности, меня смущает строка grid-template-rows: auto auto 1fr auto;.

В итоге произошло то, что размер верхнего и нижнего колонтитула соответствовал содержанию, что имеет смысл, поскольку они занимали ширину страницы. Размер статьи зависит от ее содержания. Но «заголовок» и «навигация» были разделены таким образом, что размер заголовка соответствовал содержанию, а навигация занимала остальное пространство.

Если бы я использовал вместо этого grid-template-rows: auto auto auto auto;, заголовок и навигация имели бы одинаковый интервал, а это не то, что я хотел.

Как auto auto 1fr auto интерпретировался так, что он давал мне такой размер, что title занимал минимально необходимое пространство, а nav - остальное? Как "fr" и "auto" взаимодействуют в этом сценарии?

main {
    display: grid;
    grid-template-columns: 10rem auto;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "header header" "title article" "nav article" "footer footer";
}
    
header {
  grid-area: header;
  background: lightblue;
}

div {
  grid-area: title;
  background: orange;
}

nav {
  grid-area: nav;
  background: pink;
}

article {
  grid-area: article;
  background: yellow;
}
  
footer {
  grid-area: footer;
  background: lightblue;
}
<main>
<header>This is the header</header>
<div>This is the title</div>
<nav>This is the nav</nav>
<article>
  This is the article. This is the article. This is the article. This is the article.
  This is the article. This is the article. This is the article. This is the article.
  This is the article. This is the article. This is the article. This is the article.
  This is the article. This is the article. This is the article. This is the article.
  This is the article. This is the article. This is the article. This is the article.
  This is the article. This is the article. This is the article. This is the article.
</article>
<footer>This is the footer</footer>
</main>


css css-grid grid-layout
person Community    schedule 07.03.2018    source источник
comment
У вас есть 4 строки в вашей сетке - все (кроме 3-й) имеют размер auto. Таким образом, первая, вторая и четвертая строки размером auto и третья (содержащая nav) заняли все оставшееся пространство. Попробуйте установить grid-template-rows: auto 1fr 2fr auto;, чтобы увидеть, что произойдет.   -  person fen1x    schedule 07.03.2018

Ответы (4)


arrow_upward
11
arrow_downward

В макете сетки CSS значение grid-template-rows auto означает:

Размер строк определяется размером контейнера и размером содержимого элементов в строке.

и 1fr - новый гибкий модуль в GRID css. [Fr] является дробным unit, а 1fr - это 1 часть доступного пространства.

вот почему ваш третий элемент сетки занимает оставшееся пространство, а все оставшиеся элементы сетки занимают место в соответствии с его содержимым

person Bhuwan    schedule 07.03.2018

arrow_upward
22
arrow_downward

Как правило,

  • fr жаден,
  • auto застенчива.

Когда браузер отображает вашу сетку, сначала он вычисляет необходимые размеры auto элементов - все они получают минимум, с которым могут жить - и затем, после того, как все остальные размеры известно, начнет ли он заполнять оставшиеся пробелы fr-пропорциями. (Таким образом, после того, как все остальное будет сделано, браузер вычислит сумму всех чисел fr, скажем, у вас есть 1fr + 1fr + 3fr + 2fr, так что это 7, тогда оставшееся пространство будет разрезано на 7 равных частей, а затем каждый получит свою долю.)

Также, когда вы разделяете горизонтальное пространство:

  • 1fr 1fr 1fr даст вам 3 равных столбца,
  • auto auto auto дает столбцы с адаптивной шириной
person dkellner    schedule 15.05.2019

arrow_upward
2
arrow_downward

1fr означает «занять 1 долю доступного пространства», и, поскольку нет других элементов, определенных как fr, это также означает «занять все доступное пространство»

auto означает «принимать любое значение, которое имеет свойство grid-auto-rows», которое по умолчанию также равно auto, в этом случае это означает размер в соответствии с содержимым ... но дорожки также могут быть растянуты, если необходимо, чтобы соответствовать размеру содержимого на других столбцы

person Facundo Corradini    schedule 07.03.2018

arrow_upward
0
arrow_downward

Единица fr представляет собой часть оставшегося пространства в контейнере сетки. < / а>

Оставшееся пространство рассчитывается после auto и т. Д.

person Wenfang Du    schedule 04.07.2020