CSS的grid布局学习笔记

boyMiSen

于 2019-09-02 10:25:25 发布

阅读量167

点赞数

分类专栏：前端学习文章标签： css3.0 gird布局

本文链接：https://blog.csdn.net/MiSenLMX/article/details/100195667

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

直接贴html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>grid</title>
</head>
<body>
    <div class="page">
        <div><p>1</p></div>
        <div><p>2</p></div>
        <div><p>3</p></div>
        <div><p>4</p></div>
        <div><p>5</p></div>
    </div>
</body>
</html>

<style>

/* 
grid布局                     3x3个格子则需要 4x4根线
                            划分网格后，子元素会按照顺序排列（默认先行后列）
grid-auto-flow              改变上述的排列顺序，默认值row，具备值：column， row dense column dense( dense表示紧密的，尽量先填满再进行下一行 )


grid-template-rows          多少行，指定行高
grid-template-columns       多少列，指定列宽
属性值：
repeat(重复次数, 长度/高度)
auto-fill                   尽可能多的填充，用法：~~: repeat(auto-fill, 100px)
fr关键字                     如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。fr还可与绝对长度结合，例如下面
minmax()                    函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
                            grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号[c1]，指定每一根网格线的名字，方便以后的引用
grid-auto-columns           指定自动创建的网格列宽，如果不指定，则根据！！内容！！大小适配
grid-auto-rows              同上
grid-template-areas         属性用于定义区域, 如某些区域不用，则使用 . 表示
                            注： 区域的命名会影响网格线，自动命名为 起始网格线：区域名-start，终止网格线：区域名-end
grid-area                   指定改子元素放在哪个格子里，格式： ~~: e;
                            还可以这样写，作为合并简写：grid-area: <row-start> / <column-start> / <row-end> / <column-end>;


grid-row-start              规定格子从行的哪条网格线 开始  1=>n （也可以是网格线的名字，见上面的 grid-template-areas； 也可以使用span关键字：span 2，表示跨越两个网格[1>3]）
grid-row-end                规定格子从行的哪条网格线 结束  1=>n （如果产生了重叠，则使用z-index属性指定重叠顺序）
grid-row                    上面两个合并，格式：~~: 1 / 3; [1>3] or ~~: 1 / span 2;
grid-column-start           规定格子从列的哪条网格线 开始  1=>n
grid-column-end             规定格子从列的哪条网格线 结束  1=>n
grid-column                 上面两个合并，格式和grid-row一样


grid-row-gap                行间距          !!!!注意是行和行的间距，第一行上面是没有间距的，列也是这样
grid-column-gap             列间距
grid-gap                    上两个的合并简写    20px 20px 如果只写一个，则默认两个一样


justify-items               设置格子内元素的水平位置，类似于flex属性里的一样，值有：start | end | center | stretch（拉伸占满整个宽度【默认值】）。
align-items                 设置格子内元素的垂直位置
place-items                 justify-items和align-items合并简写，默认两个值，只写一个视为两个相等。这里也和flex一样
justify-content             整个网格项目的水平位置。值：start | end | center | stretch（拉伸占领整个容器） | space-around | space-between | space-evenly;
align-content               整个网格项目的垂直位置。
                            space-evenly值表示项目与项目间隔相等，即：项目与容器边距=项目与项目边距
place-content               同理
justify-self                设置元素在格子内的水平位置，针对于其本身。属性值： ~~:  start | end | center | stretch [拉伸，占满单元格的整个宽度（默认值）]
align-self                  设置元素在格子内的垂直位置，针对于其本身。属性值与上一样
place-self                  合并




*/

.page {
    display: grid;
    /* grid-template-rows: 100px 100px 100px; */
    grid-template-rows: repeat(3, 200px);

    /* grid-template-columns: repeat(3, 13%); */
    /* grid-template-columns: repeat(auto-fill, 13%); */
    /* grid-template-columns: 1fr 1fr 2fr; */
    /* grid-template-columns: 150px 1fr 2fr minmax(100px, 1fr);            列宽不小于100px，不大于1fr */
    grid-template-columns: [c1] 1fr [c2] 1fr [c3] 1fr [c4];           /*  加网格线名字 */
    grid-row-gap: 50px;
    grid-column-gap: 100px;                  /* 上面这三个都可以省略gird头 */

    grid-template-areas: 'a b c' 'd e f' 'g h i';
    grid-auto-flow: column;                 /* 子元素排列规则 */
    /* place-items: center center;
    justify-content: center; */

}
p {
    padding: 0;
    margin: 0;
}

</style>

参考链接：
阮一峰的日志：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

boyMiSen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的grid布局学习笔记

直接贴html文件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
复制链接

扫一扫