CSS教程

CSS Grid布局

本文主要是介绍CSS Grid布局，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

CSS Grid布局

基本概念

容器

image-20210510103951053

项目

image-20210510104037683

Gird基本概念

image-20210510104218666

容器的属性

  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（项目）相互之间的间距，注：此属性是容器属性

image-20210510152443070

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

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

justify-items : start | end | center | stretch

例如

image-20210510153848511

容器属性 justify- content（水平方向）/ align- content（垂直方向）

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

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

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

image-20210510154824189

项目的属性

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

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

image-20210510155159453

此属性简写为

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

//两种写法等价

行列同时使用

image-20210510155856700

项目属性：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，解决

image-20210510181855679

这篇关于CSS Grid布局的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航