grid-auto-columns: 50px 50px 20px; without template or grid-area

Question

For me it's very counterintuitive that as soon as I remove grid-area the grid-auto-columns: 50px 50px 20px; doesn't divide the container in 3 columns 50px 50px 20px. You have to force a grid-area on it before you get 3 columns. Without you get a single column. Why is that? Why did they design it that way?

.container {
  display: grid;
  grid-auto-rows: 20px 50px;
  grid-auto-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 class="area">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-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>

Maybe what you want is `grid-template-columns` instead of `grid-auto-colums` — arieljuod, Apr 30 '19 at 01:20
more resources for you: https://stackoverflow.com/questions/55298508 and a nice application of implicit grids here: https://stackoverflow.com/questions/55309569 — kukkuz, Apr 30 '19 at 01:54

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

It's because the default flow is row and there is no explicit column defined nor implicit ones so you will have one column and as many rows as items.

You can achieve what you want by setting grid-template-columns instead of grid-auto-columns that will explicitely define the columns (3 in your case).

.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>

And if you change the flow to column you will have this:

.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>

You will notice a similar issue for the row direction (no explict/implicit rows = 1 row and n columns) that you can fix with a grid-template-rows that will explicitely specify the 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>

The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track.

If a grid item is positioned into a column that is not explicitly sized by grid-template-columns, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns. ^ref

As you can read, grid-auto-columns is only used when there is implicit grid track created by manually placing the items (like you did) or by changing the auto-placement algorithm (like I did). Same logic happen for the row direction but since the default flow is row it's more intuitive.

Basically grid-auto-[rows|columns] are useful to ensure that extra (implicit) row/column created will follow a specific pattern.

Example with a row flow:

.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>

and with column flow:

.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>

Ok thanks your examples makes it look consistent. Guess it just one of does IQ things where you need to be a little bit smarter than me to understand the pattern :) But you explained it well. — Gert Cuykens, Apr 30 '19 at 01:29

grid-auto-columns: 50px 50px 20px; without template or grid-area

1 Answers1