Как се интерпретира 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, така че да ми даде оразмеряване, така че заглавието да заема минимално необходимото място, а 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] е дроб единица и 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 представлява част от оставащото пространство в контейнера на мрежата.< /a>

Остатъчното пространство се изчислява след auto и т.н.

person Wenfang Du    schedule 04.07.2020