CSS Grid布局

2021/5/10 18:55:54

编程Tag： 属性 css template 布局 grid columns box items

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

CSS Grid布局

基本概念

容器

项目

Gird基本概念

容器的属性

grid-template-columns
grid-template-rows
grid-row-gap
grid-column-gap
gid-gap（3和4的简写）
grid-template-areas
grid-auto-flow
justify-items
align-items
pace-items（8和9的简写）
justify-content
align-content
pace- content（11和12的简写）
grid-auto-columns
grid-auto-rows

容器属性：grid-template-*

grid-template-columns

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

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

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

justify-items : start | end | center | stretch

例如

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

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

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

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

项目的属性

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

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

此属性简写为

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

//两种写法等价

行列同时使用

项目属性：justify-self /align-self/place-self

justify-self属性设置单元格内容的水平位置（左中右），跟 justify- items属性的用法完全一致，
但只作用于单个项目（水平方向）
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布局

CSS Grid布局

基本概念

容器

项目

Gird基本概念

容器的属性

容器属性：grid-template-*

基本参数

repeat()

auto-fill

fr

容器属性：grid-row-gap/grid-column-gap

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

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

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

项目的属性

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

项目属性：justify-self /align-self/place-self

其他css注意事项

box-sizing

相关编程文章