问题在于使用单词span
作为您的网格区域名称。跨多条网格线时会使用“跨度”一词,因此会混淆CSS解析器。
div.outer { display: grid; grid-template-columns: 40% 30% 10% 20%; grid-template-rows: 50% 50%; grid-template-areas: "text text . button" "check show . button"; } div.outer>span { grid-area: show; }
编辑1:
要添加上,之所以跨度最初采取了第一个点的空间,是因为()span.showy
的grid-area: span;
不认可,因此并没有对电网的地方。在这种情况下,它将占用第一个可用空间,即第一个点(。)。点符号根本没有错。
编辑2:中
的跨度用法示例grid-area
,取自W3Schools。
使“ item1”从第2行第1列开始,并跨度2行和3列:
.item1 { grid-area: 2 / 1 / span 2 / span 3; }