CSS Grid justify-content: растягивание не работает

Я изучаю свойства 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 родителя до размера полной ширины.

Скрин из туториала fcc

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете увидеть эффект растяжения, если определите размер 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>

Это имеет смысл. Но я все еще думаю, что учебник fcc вводит в заблуждение, особенно для начинающих, таких как я :)

Arnold Rogalski 19.11.2022 14:43

@ArnoldRogalski не все онлайн-учебники на 100% верны или точны, поэтому не думайте, что то, что вы читаете в сети, на 100% верно, если только оно не из официальных ресурсов. Люди, пишущие для FCC, такие же, как вы и я (вы также можете писать для FCC)

Temani Afif 19.11.2022 14:51

Другие вопросы по теме