CSS Grid布局

CSS Grid布局

基本概念

容器

CSS Grid布局

项目

CSS Grid布局

Gird基本概念

CSS Grid布局

容器的属性

  1. grid-template-columns
  2. grid-template-rows
  3. grid-row-gap
  4. grid-column-gap
  5. gid-gap(3和4的简写)
  6. grid-template-areas
  7. grid-auto-flow
  8. justify-items
  9. align-items
  10. pace-items(8和9的简写)
  11. justify-content
  12. align-content
  13. pace- content(11和12的简写)
  14. grid-auto-columns
  15. grid-auto-rows
容器属性:grid-template-*
  1. grid-template-columns
  2. grid-template-rows
基本参数

你想要多少行或者列,就填写相应属性值的个数,不填写,自动分配

div{
    grid-template-columns:10px 10px 10px;
    grid-template-rows:10px 10px;   
}
//表示分配了一个3列2行的栅格
repeat()

第一个参数是重复的次数,第二个参数是所要重复的值

div{
    grid-template-columns:repeat(3,100px)       //表示创建了3列100px的栅格
}
auto-fill

有时,单元格的大小是固定的,但是容器的大小不确定,这个属性就会自动填充

div{
    grid-template-columns:repeat(auto-fill,100px) 
}
fr

3.fr,为了方便表示比例关系,网格布局提供了f关键字( fraction的缩写,意为“片段”)

div{
    grid-template-columns:repeat(3,1fr)  //宽度平均分成3等分
}
容器属性:grid-row-gap/grid-column-gap

item(项目)相互之间的间距,注:此属性是容器属性

CSS Grid布局

容器属性:justify-items(水平方向)/ align-items(垂直方向)

设置单元格内容的水平和垂直的对齐方式

justify-items : start | end | center | stretch

例如

CSS Grid布局

容器属性 justify- content(水平方向)/ align- content(垂直方向)

设置整个内容区域的水平和垂直的对齐方式

容器属性grid-auto- columns/grid-auto-rows

用来设置多出来的项目宽和高

CSS Grid布局

项目的属性

项目属性:grid-column-start / grid-column-end/grid-row-start / grid-row-end

句话解释,用来指定tem的具体位置,根据在哪根网格线

CSS Grid布局

此属性简写为

div{
    //第一种写法
    grid-column-start:1;
    grid-column-end:3;
    
    //第二种写法
    grid-column:1 /3 ;
}

//两种写法等价

行列同时使用

CSS Grid布局

项目属性:justify-self /align-self/place-self
  1. justify-self属性设置单元格内容的水平位置(左中右),跟 justify- items属性的用法完全一致,
    但只作用于单个项目(水平方向)
  2. align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致
    也是只作用于单个项目(垂直方向)

其他css注意事项

box-sizing

box-sizing 默认值是 content-box

当布局为一下这种情况时

html

<body>
    <div id="main">
        <div id="content">

        </div>
    </div>
</body>

css

#main{
    width: 100%;
    background: #6666;
    padding: 10px;
    // box-sizing: border-box;
}
#content{
    width: 100%;
    height: 100px;
}

若无box-sizing 则会出现界面能拖动的情况,此时,直接设置box-sizing:boder-box,解决

CSS Grid布局

CSS Grid布局

上一篇:前端扯犊子之二Ajax


下一篇:gitlab使用URL导入远程仓库报错