首页 > 代码库 > [Grid Layout] Describe a grid layout using named grid lines
[Grid Layout] Describe a grid layout using named grid lines
We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-template-columns and grid-template-rows, and how to refer to these from our grid items.
Syntax like:
grid-template-columns: [left-sidebar-start] 1fr [main-content-start] 2fr [right-sidebar-start] 1fr;We can name those whatever we want to.
You can also give multi names for one line:
grid-template-columns: [left-sidebar-start] 1fr [left-sidebar-end main-content-start] 2fr [main-content-end right-sidebar-start] 1fr [right-sidebar-end];And we also named the last columns name as ‘right-sidebar-end‘.
Later we can contorl the position like this:
grid-template-rows: [body-start] 6fr [body-end footer-start] 2fr [footer-end];
The same for the rows:
grid-template-rows: [body-start] 6fr [body-end footer-start] 2fr [footer-end];
So for four column lines: 1 --> left-sidebar-start2 --> left-sidebar-end, main-content-start3 --> main-content-end, right-sidebar-start4 --> right-sidebar-endFor three row lines:1 --> body-start2 --> body-end, footer-start3 --> footer-end
For more information, check the article
<iframe style="width: 100%; height: 600px;" src="https://embed.plnkr.co/VDJMSMC6nQuugPuf31U3/" width="320" height="240"></iframe>
[Grid Layout] Describe a grid layout using named grid lines
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。