Это потому, что поток по умолчанию равен row и не определено ни явных столбцов, ни неявных , поэтому у вас будет один столбец и столько же строккак элементы.
Вы можете достичь желаемого, установив grid-template-columns вместо grid-auto-columns, который будет явно определять столбцы (3 в вашем случае).
.container {
display: grid;
grid-auto-rows: 20px 50px;
grid-template-columns: 50px 50px 20px;
grid-row-gap: 5px;
grid-column-gap: 5px;
}
div {
margin: 0;
padding: 0;
border: 1px solid black;
}
.area {
grid-area: 1/1/1/4;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
И если вы измените поток на столбец, у вас будет это:
.container {
display: grid;
grid-auto-rows: 20px 50px;
grid-auto-columns: 50px 50px 20px;
grid-auto-flow:column;
grid-row-gap: 5px;
grid-column-gap: 5px;
}
div {
margin: 0;
padding: 0;
border: 1px solid black;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
Вы заметите аналогичную проблему для направления строки (без явных / неявных строк = 1 строка и n столбцов), которую вы можете исправить с grid-template-rows, который будет явно указывать строки:
.container {
display: grid;
grid-template-rows: 20px 50px;
grid-auto-columns: 50px 50px 20px;
grid-auto-flow:column;
grid-row-gap: 5px;
grid-column-gap: 5px;
}
div {
margin: 0;
padding: 0;
border: 1px solid black;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
Свойство CSS grid-auto-columns определяет размер неявно созданной дорожки столбца сетки .
Если элемент сетки расположен в столбце, размер которого явно не определяется столбцами-шаблонами сетки, создаются неявные дорожки сетки для его хранения.Это может произойти либо путем явного позиционирования в столбце, который находится вне диапазона , либо с помощью алгоритма автоматического размещения , создающего дополнительные столбцы . ref
Как вы можете прочитать, grid-auto-columns используется только тогда, когда существует неявная сеточная дорожка, созданная вручную , помещаяэлементы (как вы сделали) или путем изменения алгоритма автоматического размещения (как я сделал).Та же логика имеет место для направления строки, но поскольку поток по умолчанию row, он более интуитивно понятен.
В основном grid-auto-[rows|columns] полезны для обеспечения того, что создаваемая дополнительная (неявная) строка / столбец будет следовать определенному шаблону.
Пример с потоком строк:
.container {
display: grid;
/*our explicit grid 4x4 */
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px;
/**/
grid-auto-columns: 20px; /*extra columns will have 20px*/
grid-auto-rows: 40px; /*extra rows will have 40px*/
grid-row-gap: 5px;
grid-column-gap: 5px;
}
div {
margin: 0;
padding: 0;
border: 1px solid black;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div style="grid-column:3">I am creating an implicit column</div>
<div>7</div>
<div>8</div>
</div>
и с потоком колонны:
.container {
display: grid;
/*our explicit grid 4x4 */
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px;
/**/
grid-auto-columns: 20px; /*extra columns will have 20px*/
grid-auto-rows: 40px; /*extra rows will have 40px*/
grid-auto-flow:column;
grid-row-gap: 5px;
grid-column-gap: 5px;
}
div {
margin: 0;
padding: 0;
border: 1px solid black;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div style="grid-row:3">I am creating an implicit row</div>
<div>7</div>
<div>8</div>
</div>