css 在'grid-template-columns'声明中使用自定义标识符[]括号的目的是什么？

llmtgqce 于 2022-12-01 发布在其他

关注(0)|答案(2)|浏览(146)

我在网站的CSS中看到过方括号内的名称：

/* simplified example */

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

MDN的文档解释说，这些是自定义标识符，可以在方括号中添加许多标识符。
但它并没有讨论为什么要使用它们以及这样做有什么效果。我的第一个猜测是它们是装饰性的，有助于代码的结构化。但是删除这些行，或者用像0或auto这样的值替换它们会改变布局。
为什么要用它们？它们有什么效果？

css

来源：https://stackoverflow.com/questions/74620214/what-is-the-purpose-of-using-custom-identifiers-brackets-in-a-grid-template

2条答案

按热度按时间

7cwmlq891#

一个不言自明的例子
第一个
[行名称]
一个<custom-ident>，用于为该位置中的行指定名称。ref
<custom-ident>
如果存在名为'<custom-ident>-star t'/'<custom-ident>-end'的命名行，则将第一个此类行分配给**网格项的位置。**ref

赞(0）回复(0）举报 2022-12-01

hm2xizp92#

我想我想通了：

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

...是书写的变体...

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

赞(0）回复(0）举报 2022-12-01

我来回答

css 在'grid-template-columns'声明中使用自定义标识符[]括号的目的是什么？

2条答案

相关问题

热门标签

最新问答