我如何理解 templateColumns， templateRows， colSpan， RowSpan

Question

我是学习查克拉UI的新手，我想使用网格以使网站响应，所以我打开了查克拉的文档并找到了这个例子：

<Grid
h='200px'
templateRows='repeat(2, 1fr)'
templateColumns='repeat(5, 1fr)'
gap={4}
>
<GridItem rowSpan={2} colSpan={1} bg='tomato' />
<GridItem colSpan={2} bg='papayawhip' />
<GridItem colSpan={2} bg='papayawhip' />
<GridItem colSpan={4} bg='tomato' />
</Grid>

但是我不明白以下三个元素是如何使用的：

templateColumns
templateRows
colSpan
RowSpan

以及如何在Chakra UI中使用"templateColumns='repeat(3， 1fr)'"？

Answer 1

template-rowsCSS 中的 Template-Rows 属性用于设置grid中的行数和行高

CSS 中的template-columnsTemplate-Columns 属性用于设置grid的列数和列的大小

colspanCol-Span 属性定义单元格应跨越的列数。

HTML 中的"rowspan行跨度"属性指定单元格应跨越的行数

note*:rowspancolspan用作table上的htmltr或td的属性。

无论使用何种htmltag，template-columns和template-rows都用作gridcss财产