码迷,mamicode.com
首页 > 其他好文 > 详细

3 week work—Grid Layout

时间:2018-09-23 16:32:40      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:app   span   ack   property   token   inf   网格   color   column   

技术分享图片

 

HTML:

<div class="wrapper">             //建立一个三列轨道网格。
  <div class="one">One</div>      /*从第一个表格到第六个表格
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>      */
</div>

CSS:
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  //设置列距
  grid-gap: 10px;                         //网格间距为10px
  grid-auto-rows: minmax(100px, auto);    //新行创建的最小值为100像素,最大值为auto.
}
.wrapper div{
background-color:rgb(180,122,156); //设置网格背景颜色
border: 5px solid rgb(180,200,152); //设置边框大小为5px和颜色
} .one { //第一个网格 grid-column: 1 / 3; //设置列距 grid-row: 1; //网格行为1 } .two { //第二个网格 grid-column: 2 / 4; //列距为2/4 grid-row: 1 / 3; //网格行为1/3 } .three { //第三个网格 grid-column: 1; //列距为1 grid-row: 2 / 5; //网格行为2/5 } .four { //第四个网格 grid-column: 3; //列距为3 grid-row: 3; //网格行3 } .five { //第五个网格 grid-column: 2; //列距为2 grid-row: 4; //网格行为4 } .six { //第六个网格 grid-column: 3; //列距为3 grid-row: 4; //网格行为4 }
 

 

 

3 week work—Grid Layout

标签:app   span   ack   property   token   inf   网格   color   column   

原文地址:https://www.cnblogs.com/lbjiu/p/9692673.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!