CODEWITHSUNDEEP
csscss-grid
miliberlin
miliberlin

Reputation: 25

Relation between grid-template-areas and grid-template columns

I am new to coding and don't seem to understand the CSS Grid model correctly. In the code below the grid is divided into 3 grid-template-columns (300px each) but then there are 8 units per row in the grid-template-areas (for example: hd hd hd hd hd hd hd hd) and not 3 which does not make sense to me. Can somebody please help me understand why the number of units in the grid-template-area is not the same as the number of columns? (so it would be "hd hd hd" if there are 3 columns). What is their relation?

.container {
    display:grid;
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 250px 600px;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main"
    "ft ft ft ft ft ft ft ft";
}

Upvotes: 2

Views: 519

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371929

The first three hd columns will have a width of 300px.

The remaining five hd columns will default to content-width (auto).

The grid-template-columns property sets the width of columns sequentially. So the first three columns are 300px wide.

The remaining hd columns have no corresponding width set in grid-template-columns, so they are, essentially, width: auto. More specifically, columns defined in grid-template-areas, but not sized by grid-template-columns, are governed by grid-auto-columns, who's default setting is auto.

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273838

By defining your template-areas you defined a grid with 8x3 items. By default those items will have an auto width and and auto height like below:

.container {
    display:grid;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main"
    "ft ft ft ft ft ft ft ft";
    border:1px solid;
}
<div class="container">

</div>

The height will be 0 since there is no content and the width of your container will be splitted equally on the 8 columns.

If you add template-columns/rows you will explicitely define the width/height of the grid tracks. By defining only 3 numbers inside grid-template-columns you will define a width for only the first 3 columns and the other one will remain auto. Same logic with grid-template-rows

.container {
    display:grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 60px;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main"
    "ft ft ft ft ft ft ft ft";
    border:1px solid;
}
<div class="container">

</div>

If I consider the above code, you will have 50px 50px 50px auto auto auto auto auto for the columns and 50px 60px auto for the rows.

To be more accurate, here is the description for the sepcification:

The size of the explicit grid is determined by the larger of the number of rows/columns defined by grid-template-areas and the number of rows/columns sized by grid-template-rows/grid-template-columns. Any rows/columns defined by grid-template-areas but not sized by grid-template-rows/grid-template-columns take their size from the grid-auto-rows/grid-auto-columns properties. ref

As you can clearly see, we are falling into the case where we have rows/columns not sized by grid-template-rows/grid-template-columns so their size will be defined by grid-auto-rows/grid-auto-columns where the default valus is set to auto

You can adjust the value to get a different result:

.container {
    display:grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 60px;
    grid-auto-columns:10px;
    grid-auto-rows:20px;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main"
    "ft ft ft ft ft ft ft ft";
    border:1px solid;
}
<div class="container">

</div>

The above code will give use 50px 50px 50px 10px 10px 10px 10px 10px for the columns and 50px 60px 20px for the rows.

Upvotes: 3

Related Questions