Theory
Theory
Comments

Unfixed column width

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.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Unfixed column width</title> <link href="world.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="world"> <div class="land"> <div class="element element--water element--simple">1</div> <div class="element element--grass element--simple">2</div> <div class="element element--rocks element--simple">3</div> </div> </body> </html>

CSS

.land { display: grid; grid-template-columns: 100px 100px 100px; }

Goalscompleted

In the .land block grid change the size of the first column from 100px to auto,
then assign an automatic size to the second column
and third column.

Unfixed column width

Comments

Log in

Sign up

Restore access