Interactive online courses HTML Academy
2026-03-09 14:05 Diff
https://htmlacademy.org/courses/layout/grid/unfixed-column

In carrying out the previous assignments, we made sure that if you do not specify explicit sizes for the grid rows and columns, then they will expand to occupy all of the free space by default. Let’s see how we can benefit from this.

Consider the example of setting an explicit width to the first and last column of a three-column grid, and assign all of the remaining space to the width of the middle column without giving it a fixed size.

Now we can set column sizes using fixed values, such as, for example, like this:

grid-template-columns: 100px 100px 100px;

But if we want to allow the middle column to have an automatic size, then the keyword auto should appear in the ad. Thus, the code will look like this:

grid-template-columns: 100px auto 100px;

Let’s try out this approach.