Я изучаю свойства CSS Grid. И я застрял на оправдании содержания. начало / конец / центр и т. д. работает нормально, но: растянуть - нет.
Я пытался изменить такие свойства, как высота, ширина и т. д. в родительском контейнере, Google также не знает.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 40px;
min-width: 100vh;
min-height: 100vh;
}
[class^ = "box-"] {
background-color: skyblue;
display: grid;
place-items: center;
}
.container {
display: grid;
gap: 50px;
height: 100vh;
grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px;
/*those values are exactly the same , like in fcc tutorial*/
justify-content: stretch;
/* nothing happens*/
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<link rel = "stylesheet" href = "style.css">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body>
<div class = "container">
<div class = "box-1"> A </div>
<div class = "box-2"> B </div>
<div class = "box-3"> C </div>
<div class = "box-4"> D </div>
</div>
</body>
</html>
Я пытался изменить такие свойства, как высота, ширина и т. д. в родительском контейнере, Google также не знает.
Я хочу, чтобы дочерние блоки растягивались вдоль оси x родителя до размера полной ширины.
Вы можете увидеть эффект растяжения, если определите размер auto
. Также обратите внимание, что растяжка является значением по умолчанию.
Из спецификации:
11.8. Растянуть автоматические треки
Этот шаг расширяет дорожки, которые имеют функцию автоматического максимального размера дорожки, путем деления любого оставшегося положительного, определенного свободного пространства поровну между ними. Если свободное пространство неопределенно, но контейнер сетки имеет определенную минимальную ширину/высоту, вместо этого используйте этот размер для расчета свободного пространства для этого шага.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 40px;
min-width: 100vh;
min-height: 100vh;
}
[class^ = "box-"] {
background-color: skyblue;
display: grid;
place-items: center;
}
.container {
display: grid;
gap: 50px;
height: 100vh;
grid-template-columns: auto auto;
}
<div class = "container" style = "justify-content: start;">
<div class = "box-1"> A </div>
<div class = "box-2"> B </div>
<div class = "box-3"> C </div>
<div class = "box-4"> D </div>
</div>
<div class = "container" style = "justify-content: stretch;">
<div class = "box-1"> A </div>
<div class = "box-2"> B </div>
<div class = "box-3"> C </div>
<div class = "box-4"> D </div>
</div>
@ArnoldRogalski не все онлайн-учебники на 100% верны или точны, поэтому не думайте, что то, что вы читаете в сети, на 100% верно, если только оно не из официальных ресурсов. Люди, пишущие для FCC, такие же, как вы и я (вы также можете писать для FCC)
Это имеет смысл. Но я все еще думаю, что учебник fcc вводит в заблуждение, особенно для начинающих, таких как я :)