css-grid布局(栅格布局)

YogaMiller

已于 2024-07-15 11:58:03 修改

阅读量840

点赞数 30

文章标签： css 前端

于 2024-07-15 11:52:19 首次发布

本文链接：https://blog.csdn.net/yogamiller/article/details/132517512

版权

css新世界-auto-fit

grid 一个比flex更强大的布局,适合做整体布局

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); auto-fit的话有strech效果
gap 不仅可以用于grid 也可用flex
. 在grid-template-areas表示这个位置空着
grid area 的 [a b]命名可重复命名表示的是同一根线, 感觉不如数字好用啊
min-content是一个尺寸关键字, 也可以表示width height…

在这里插入图片描述

  <style>
        .tb {
            display: grid;
            grid-template-columns: 3fr 5fr 3.5fr;
            grid-template-rows: 42px 300px;
            grid-template-areas: 
            	'a b b' /* 目前喜欢这种的方式, 比较直观  . 表示这个位置空着 */
                'a c d'; /* 相同的名字 代表相同的区域 */
            gap: 10px;
        }

        .tb>div {
            background-color: #f1cbc5;
            border-radius: 10px;
        }

        .tb-cate {
            grid-area: a;
        }

        .tb-module {
            grid-area: b;
        }

        .tb-baner {
            grid-area: c;
        }

        .tb-user {
            grid-area: d;
        }
    </style>

    <body>
        <div class="tb">
            <div class="tb-module"></div>
            <div class="tb-cate"></div>
            <div class="tb-banner"></div>
            <div class="tb-user"></div>
        </div>
    </body>

在这里插入图片描述

grid-template-columns / grid-template-rows

简写: grid: …行高 / … 列宽
支持 px % min-content max-content auto fr repeat() minmax() fit-content() 函数值
min-content 先找最大的, 然后取它的最小 content
auto 会受到 justfify-content align-content的影响
minmax(lenght | percentage | min-content | max-content | auto, 前面的 + fr) 也就是说 fr 只能放在第二个参数
fit-content(length | percentage) 内容越大尺寸越大, 但不超限定

min-content

先找到内容最大的那个,然后用它的最小尺寸(如果min-width大于内容的宽度, 则是min-width)

<div class="container">
	<item>css</item>
	<item></item>
	<item>css_world</item>
	<item></item>
	<item>css_new_world</item>
	<item></item>
</div>

max-content

最大内容宽度.

fr 网格布局的专用单位

fr 总和小于1 的话是占不满的.
搭配固定值的话, fr表示的是剩余空间的比例
配合auto 是减去auto的 fit-content

在这里插入图片描述

repeat( | auto-fill | auto-fit, 1px auto 30px)

auto-fit 会把空白匿名网格折叠合并…
auto-fit 更符合常规的布局需求
repeat() 函数只能用于 grid-template-rows/columns

repeat(auto-fit,minmax(100px,1fr)) // 弹性的同时保证了最小宽度.
repeat() auto // 无效
repeat() 20% 可以

父盒子有padding 或者 border ? 子盒子的margin 才能撑开父盒子？？
1vw = 1%的屏幕宽度.
1rem = 根元素的字体大小.

· 就是这个点, PingFangSC字体下和 Microsoft YaHei

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .tb {
                display: grid;
                grid-template-columns: [f] 100px [t] 300px [e];
                grid-auto-rows: 150px 100px;
                /* [d]150px 100px; 搞不懂为什么加个命名就变小了.... */
                gap: 10px;
            }

            .left {
                grid-column: f / t;
                /* 数字和命名搭配搭配也可, 1 / t  注意如果是一个位置的话可省略, 比如 1 / 2  2 / 3  这里的2 3就可以省略*/
                grid-row: 1 / 3; /* g-r-start g-r-end 的简称 */

            }

            .tb>div {
                background-color: lightgreen;
            }
        </style>
    </head>

    <body>
        <h1>[x] 100px [l]</h1>
        <div class="tb">
            <div class="left">a</div>
            <div>b</div>
            <div>c</div>
        </div>
    </body>

</html>

在这里插入图片描述

.wrapper{   /* 容器 */
	display: grid;  /* 容器 inline-grid 行内 */
	grid-template-columns: 1fr 1fr 1fr; /*repeat(2, 1fr 100px) repeat(auto-fill, minmax(100px, 1fr))*/
	grid-template-rows: 100px 100px 100px; /* 行高  */
	grid-auto-rows: 100px; /* 如果该行没有被grid-template-rows设置, 比如这个就设置了三行, 结果有了4 5 6行..这个就生效了.. */
	
	row-gap: 10px; /* 行间距 */
	column-gap: 10px; /* 列间距 */ grid-gap: row-gap column-gap; /* 行列复合写法 */
	
	justify-items: center; /* 水平方向 start end  */
	align-items: center; /* 垂直方向 start end  */ place-items: center center; 
	
	justify-content: center; /* 整体内容  space-evenly */
    grid-auto-flow:  row; / * [ row | column ]  ||  dense   */
}
.item{	
	grid-area: l; /* 这样比较方便直观 */	
	align-self: end;
	justify-self: end;  place-self: ; /* 上复合 */
}

盒模型

内容 => padding => border => margin
1.  block默认和父级盒子的宽度一样
2.  width auto是块级元素的默认值,  	100%; 的话会等于父级, 但是再加了padding border(content-box) 会溢出
3.  box-sizing: border-box; // line-height设置要减去padding和border 是内容区域的高度
4.  text-align: center; 内容区域
5.  居中(居中偏移固定的距离没有问题)
    box{
    box-sizing: border-box; /content-box/
    border: 10px;
    line-height: 100px; 
    text-align: center; /内容区域/
    }
6.  设置了box-sizing: border-box;方便写盒子, 但是写line-height, 要减去padding和border了,
7.  text-align center也是内容区域
8.  width: auto 和 100%的区别; auto; 默认的是auto; 100% 如果是content-box就会超出了

参考链接

Establishing grid containers
阮一峰Grid
Grid for layout, Flexbox for components
1-Line Layouts

YogaMiller

关注

30
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
css-grid布局(栅格布局)

* 数字和命名搭配搭配也可, 1 / t 注意如果是一个位置的话可省略, 比如 1 / 2 2 / 3 这里的2 3就可以省略*//* [d]150px 100px;搞不懂为什么加个命名就变小了.... *//* 目前喜欢这种的方式, 比较直观 . 表示这个位置空着 */grid 一个比flex更强大的布局,适合做整体布局。/* g-r-start g-r-end 的简称 *//* 相同的名字代表相同的区域 */fr 只能放在第二个参数。
复制链接

扫一扫