如何用JSS复现CSS Tricks示例中的grid-template配置？

没问题！我来帮你把这段CSS Grid配置转换成JSS写法～

先明确下这段原生CSS的作用：它为.container元素定义了一个两行三列的网格布局，给行起始/结束线添加了命名标记，每行高度固定为25px，列宽分别是自适应宽度、50px固定宽度、自适应宽度；同时将第一行的三个单元格合并为header区域，第二行的三个单元格合并为footer区域。

方法一：直接对应原生CSS的合并写法 #

JSS支持直接使用字符串形式的gridTemplate属性，语法和原生CSS完全一致，这是最直接的复现方式：

const styles = {
  container: {
    gridTemplate: `
      [row1-start] "header header header" 25px [row1-end]
      [row2-start] "footer footer footer" 25px [row2-end]
      / auto 50px auto
    `
  }
};

方法二：拆分Grid属性写法 #

如果你希望代码结构更清晰，也可以将grid-template拆分为三个独立的JSS属性，效果和原生配置完全相同：

const styles = {
  container: {
    // 定义行高及行线命名
    gridTemplateRows: '[row1-start] 25px [row1-end row2-start] 25px [row2-end]',
    // 定义列宽
    gridTemplateColumns: 'auto 50px auto',
    // 定义网格区域
    gridTemplateAreas: `
      "header header header"
      "footer footer footer"
    `
  }
};

两种写法都能完美实现你想要的Grid布局效果～

内容的提问来源于stack exchange，提问作者Vegar