CODEWITHSUNDEEP
htmlcsscss-grid
xkeshav
xkeshav

Reputation: 54016

Why is grid-auto-columns having no effect?

I was exploring CSS Grid Layout and this is something I do not understand. I have used grid-auto-columns with grid-template-columns but it does not affect anything.

I have tried to set various values in grid-auto-columns but it does not affect anything.

Why not?

* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-columns: 50px;
  grid-auto-rows: 200px;
  grid-gap: 20px;
}

.wrapper>div {
  border: 2px solid rgb(233, 171, 88);
  border-radius: 5px;
  background-color: rgba(233, 171, 88, .5);
  padding: 1em;
  color: #d9480f;
}
<div class="wrapper">
  <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>9</div>
  <div>10</div>
</div>

Upvotes: 2

Views: 3567

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371193

Short Answer

The reason grid-auto-columns is having no effect is the absence of columns in the implicit grid.

Explanation

In CSS Grid Layout, there are two types of grids: explicit and implicit.

An explicit grid is the grid that you explicitly define. You create an explicit grid when you use the following properties:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid (which is the shorthand for the three properties above, among others)

However, you are not required to keep grid items in the explicit grid. You can essentially place items and create grid areas anywhere you want, even outside the explicit grid. That's where the implicit grid comes in.

The implicit grid is created by rows and columns that are automatically generated to accommodate grid items that are positioned outside of the explicit grid.

While grid-template-columns and grid-template-rows size explicit tracks, grid-auto-columns and grid-auto-rows size implicit tracks.

Looking at your code, there are two columns and three rows in the explicit grid.

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-columns: 50px;
  grid-auto-rows: 200px;
  grid-gap: 20px;
}

The three explicit rows will take an equal distribution of the free space (1fr). Any additional rows will have a height of 200px.

The two explicit columns will take an equal distribution of the free space. Any additional columns will have a width of 50px.

But in your code there are no columns outside the explicit grid; there are only two columns. So grid-auto-columns has no effect.

Here's how the spec defines these grid types:

7.1. The Explicit Grid

The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid of a grid container.

The grid property is a shorthand that can be used to set all three at the same time.

The final grid may end up larger due to grid items placed outside the explicit grid; in this case implicit tracks will be created, these implicit tracks will be sized by the grid-auto-rows and grid-auto-columns properties.

7.5. The Implicit Grid

The grid-template-rows, grid-template-columns, and grid-template-areas properties define a fixed number of tracks that form the explicit grid.

When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid.

These lines together with the explicit grid form the implicit grid.

The grid-auto-rows and grid-auto-columns properties size these implicit grid tracks.

Upvotes: 2

Related Questions