CSS Grid: автоматическая подгонка, ведущая себя как автозаполнение при использовании grid-column-start / end - PullRequest
Новая
       15

CSS Grid: автоматическая подгонка, ведущая себя как автозаполнение при использовании grid-column-start / end

0 голосов
/ 05 июня 2018

Я сталкиваюсь с некоторой путаницей, когда дело доходит до CSS Grid.У меня есть grid-template-column, установленная на автоподгонку, и это прекрасно работает.За исключением случаев, когда я устанавливаю начало / конец столбца на div5, вместо этого я получаю поведение автозаполнения, когда создается несколько пустых ячеек.Кажется, что max 1fr моей функции minmax не выполняет свою работу.

Я что-то упускаю здесь очевидное? 

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

#div5 {
  grid-column-start: 1;
  grid-column-end: -1;
}

Изображения ниже показывают увеличение / уменьшение размера окна, который показывает автоповедение заполнения.

Larger Window

Smaller Window

Добавлен фрагмент кода в соответствии с запросом Вы должны убедиться, что вы запускаете его в полноэкранном режиме и увеличиваете размер экрана по горизонтали, чтобы увидеть проблему. 

/* Div Styles */
#div1 { background: yellow     }
#div2 { background: dodgerblue }
#div3 { background: tomato     }
#div4 { background: limegreen  }
#div5 { background: yellow     }


/* Body Style */
body { margin: 0; }


/* Grid Settings */
body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(200px, 1fr);
}

#div5 {
  grid-column-start: 1;
  grid-column-end: -1;
}
<!DOCTYPE HTML>
<html>

<body>
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
  <div id="div4">Div 4</div>
  <div id="div5">Div 5</div>
</body>

</html>

1 Ответ

0 голосов
/ 06 июня 2018

Вы хотите, чтобы первые 4 элемента всегда заполняли первую строку, а последний элемент всегда заполнял вторую строку.

Это означает, что вам нужна сетка из 4 столбцов, причем последний элемент охватывает все 4 столбца.,

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

#div5 {
  grid-column-start: 1;
  grid-column-end: -1;
}


/* Div Styles */
#div1 { background: yellow     }
#div2 { background: dodgerblue }
#div3 { background: tomato     }
#div4 { background: limegreen  }
#div5 { background: aqua     }


/* Body Style */
body { margin: 0; }


/* Grid Settings */
body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(200px, 1fr);
}

#div5 {
  grid-column-start: 1;
  grid-column-end: -1;
}
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
  <div id="div4">Div 4</div>
  <div id="div5">Div 5</div>

Проблема с исходным кодом: 

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

состоит в том, что он использует auto-fit, который предназначен для адаптивных сеток макета, гдеколичество столбцов не фиксировано, а сетка создает новые столбцы на основе содержимого сетки и метода размещения.

Это, очевидно, не то, что вам нужно в вашем случае.

...