css display: grid属性grid-template-areas

<style>
.container {border:none;display: grid;height: 600px;grid-template-columns: 200px 1fr;   /*两列，第一列200px，第二列自适应*/grid-template-rows: 50px 1fr 30px;  /*三行：第一行：50px,第二行：自适应，第三行：30px*/row-gap: 3px;  /*行间距*/column-gap: 3px;  /*列间距*/grid-template-areas: "toubu toubu""daohang main""daohang yejiao";
}
.item {box-shadow: 0 0 5px #CCCCCC;padding:5px;text-align: center;
}
.header {grid-area: toubu;   /*grid-area属性用于在网格布局中设置网格项目的大小和位置。 此属性还用于为网格项设置名称。*/
}
.nav{grid-area: daohang;
}.footer {grid-area: yejiao;
}.main {grid-area: main
}</style>

<div class="container"><div class="item header">头部</div><div class="item nav">导航</div><div class="item footer">页脚</div><div class="item main">主体部分</div>
</div>

效果如下:

css display: grid属性grid-template-areas相关推荐

html block属性,css display block属性的意思、作用和效果
css中display的block属性是什么意思呢?他是指拥有该属性的html元素以块的方式显示,同时,该元素的前面和后面都会换行,也就是说,如果给一个元素B设置的display:block,那么该元 ...
三分钟快速了解CSS Display的属性：Block,Inline,Inline-Block
文章目录三分钟快速了解CSS Display的属性:Block,Inline,Inline-Block Block Inline Inline-block Block,Inline,Inline-B ...
html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
CSS display:table属性用法解析
本节和大家重点讨论一下CSS display:table的使用,当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值,CSS表格能够解决所有那些我们在使用绝对定位和浮动 ...
CSS display的属性
可能的值值描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-blo ...
CSS display overflow 属性 cursor光标类型
display属性功能:规则网页元素如何显示的问题. 取值:none(隐藏).block(以块元素显示).inline(以行内元素显示) block:可以实现将行内元素转成块元素. ...
详解CSS——display各个属性值（带例子）
文章目录 display属性的支持情况 display属性的作用 display属性值默认值 inline none block inline-block list-item run-in tabl ...
css display：flex详解
页面布局的时候经常需要给块级子元素居中,目前发现最方便直接的是父级元素使用display:flex属性, css display:flex 属性 6 2018.09.04 16:03:53 字数 90 ...
css display：grid布局
简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...
【图片版】CSS网格布局（Grid）完全教程
简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...

css display: grid属性grid-template-areas

css display: grid属性grid-template-areas相关推荐

最新文章

热门文章