Функция minmax() в CSS работает неправильно

body{
    width:100%;
}


.parent{
    background: red;
    padding:10px;
    
    
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(300px, auto));
    
    row-gap: 10px ;
    column-gap: 5px;
    width:100%;

}

.parent div{
    background: gold;
    width: 100%;

}

.parent .item1{
    background:rgb(88, 88, 237);
}

.parent .item2{
    background:rgb(204, 130, 165);
    
}

.parent .item3{
    background:rgb(111, 229, 107);
   
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "style-grid.css">
    <title>Index</title>
</head>
<body>
    <div class = "parent">

   <div class = "item1">item1</div>
   <div class = "item2">item2</div>
   <div class = "item3">item3</div>
   <div class = "item4">item4</div>
   </div>
</body>
</html>

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

display:grid;
grid-template-columns: repeat(auto-fill,minmax(300px, auto));

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

display:grid;
grid-template-columns: repeat(auto-fill,300px);

PS: я уже проверил свои строки кода и сравнил их с кодами, найденными на каналах YouTube, в них нет ошибки, и я также использовал два разных браузера

я попробовал строки кода ниже:

display:grid;
grid-template-columns: repeat(auto-fill,minmax(300px, auto));

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

Добро пожаловать в Stack Overflow! Вопросы, требующие помощи по коду, должны включать кратчайший код, необходимый для его воспроизведения, в самом вопросе, желательно в фрагменте стека с использованием значка <>. См. Как создать минимальный воспроизводимый пример.

— 02.06.2024 13:19

Не видя соответствующего HTML и CSS, я не могу быть уверен, но уверены ли вы, что ширина ваших элементов превышает 300 пикселей?

— 02.06.2024 14:08

css css-grid

02.06.2024 12:26

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Чтобы убедиться, что все горизонтальное пространство используется четырьмя элементами, попробуйте использовать автоподбор и 1fr (вместо авто), чтобы указать максимальный размер столбца.

body {
  width: 100%;
}

.parent {
  background: red;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, auto));
  row-gap: 10px;
  column-gap: 5px;
  width: 100%;
}

.parent div {
  background: gold;
  width: 100%;
}

.parent .item1 {
  background: rgb(88, 88, 237);
}

.parent .item2 {
  background: rgb(204, 130, 165);
}

.parent .item3 {
  background: rgb(111, 229, 107);
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <link rel = "stylesheet" href = "style-grid.css">
  <title>Index</title>
</head>

<body>
  <div class = "parent">

    <div class = "item1">item1</div>
    <div class = "item2">item2</div>
    <div class = "item3">item3</div>
    <div class = "item4">item4</div>
  </div>
</body>

</html>

Работало как с auto-fit+1fr, так и с auto-fit+auto

— 02.06.2024 19:13

02.06.2024 19:01