What is the purpose of using custom identifiers [] brackets in a `grid-template-columns` declaration-CodePudding

I have seen names within square brackets in a site's CSS:

/* simplified example */

body {
    grid-template-columns: 
        [main-menu] 
        20%
        [content] 
        40%
        [asides]
        20%
        [ads] 
        20%
    ;
}

MDN's documentation explains that these are custom identifiers and that one can add many of them within the square brackets.

Yet it does not talk about why one would use them and which effect this has. My first guess was that they are cosmetic and help to structure the code. But deleting these lines, or replacing them with a value like 0 or auto changes the layout.

Why would one use them? Which effect do they have?

CodePudding user response：

A self-explanatory example

body {
  display: grid;
  grid-template-columns: 
        [main-menu] 
        20%
        [content] 
        40%
        [asides]
        20%
        [ads] 
        20%
    ;
}

.ads {
   grid-area: ads; /* I will get placed at the line called "ads" in the template */
   height: 100px;
   background: red;
}

<div ></div>

[linename]

A <custom-ident> specifying a name for the line in that location. ^ref

<custom-ident>

If there is a named line with the name '<custom-ident>-start'/'<custom-ident>-end', it contributes the first such line to the grid item's placement. ^ref

CodePudding user response：

I think I figured it out:

body {
  display: grid;
  grid-template-columns:
    [main-menu]
    20%
    [content]
    40%
    [asides]
    20%
    [ads]
    20%
  ;
}

... is a variant for writing ...

body {
  display: grid;
  grid-template-columns: 
    20%
    40%
    20%
    20%
  ;
  grid-template-areas: 
    "main-menu content asides ads"
  ;
}