首页 > 代码库 > [CSS] Specify grid columns, rows, and areas at once with the grid-template shorthand
[CSS] Specify grid columns, rows, and areas at once with the grid-template shorthand
We can specify grid columns, rows, and areas in one property using the grid-template shorthand.
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-areas: "nav-1 nav-2 nav-3" "main main nav-3"; grid-template-columns: 2fr auto 1fr; grid-template-rows: [nav-start] 1fr [nav-end main-start] 5fr [main-end]; }
The same as:
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template: [nav-start] "nav-1 nav-2 nav-3" 1fr [nav-end] [main-start] "main main nav-3" 5fr [main-end] / 2fr auto 1fr; /* [named grid row line start] "area1 area2 ..." 1fr [named-grid-line end] */ }
<iframe style="width: 100%; height: 700px;" src="https://embed.plnkr.co/lEJgGAZXTl6LEcwpCpNZ/" width="320" height="240"></iframe>
[CSS] Specify grid columns, rows, and areas at once with the grid-template shorthand
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。