CSS Gird布局用法_grid-template-rows铺满

作者：2023面试高手 | 2024-03-23 13:03:44

踩

grid-template-rows铺满

容器属性

grid-template-columns 列
grid-template-rows 行
row-gap 行间距
grid-auto-flow 排列方向默认row行
排列排版 justify-content 水平 align-content垂直
设置多余的设置大小 grid-auto
容器属性一个区域由单个或多个组成grid-template-areas

列grid-template-columns

grid-template-columns: 100px 100px; 左右均100px
grid-template-columns: 1fr 1fr ; 左右均等分等于 grid-template-columns: repeat(2, 1fr)
grid-template-columns: 1fr minmax(150px, 1fr) 第二个最小宽度设置150px
grid-template-columns: 100px auto 100px; auto 自动获取剩下的左右均100
网格线 grid-template-columns: [c1] 100px [c2] 100px [c3]100px [c4];

行grid-template-rows

grid-template-rows: 100px 100px 100px 100px; 不设置默认均分铺满

间距 row-gap

row-gap: 20px; 行与列均20px
合并两个属性行，列。一个都一样 gap: 20px 40px;

grid-auto-flow 排序顺序方向

grid-auto-flow: row; 默认横线排列
grid-auto-flow: column; 竖向排列
grid-auto-flow: row dense; 空间利用

排列排版 justify-content 水平 align-content垂直

start 最左
end 最右
center 中间
stretch 拉伸
space-around 向内分布
space-between 向外分布
space-evenly 均匀排列每个元素, 每个元素之间的间隔相等

设置多余的设置大小 grid-auto

grid-auto-rows: 50px;
grid-auto-columns: 50px;

容器属性一个区域由单个或多个组成grid-template-areas

grid-template-areas: 'a b c'
        'd e f'
        'g h i';

项目属性

从哪里开始到哪列结束行 grid-row 列grid-column
区域 grid-area
设置自身对齐 justify-self 行列 align-self

从哪里开始到哪列结束行 grid-row 列grid-column

/* grid-column-start: 1;
 grid-column-end: 3; */
 /* 简写 */
 /* grid-column: 1/3; */
 /* 跨越 */
 /* grid-column-start: span 2; */
 /* 横线  */
 /* grid-row-start: 1;
 grid-row-end: 3; */

区域 grid-area

  grid-area: a; 对应grid-template-areas

设置自身对齐 justify-self 行列 align-self

/* justify-self:  start | end|center|stretch; */
/* 竖向  */
/* align-self: start | end|center|stretch; */
/* 简写 place-self; */


<body>
    <div class="main">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <!-- <div class="item item-10">10</div> -->
    </div>
</body>
.main {
    width: 600px;
    height: 600px;
    border: 10px solid black;
    /* 容器属性 */
    display: grid;
    /* 不设置默认铺满，每列独占一行 */
    /* grid-template-columns: 100px 100px; */
    /* 平均等分 等于 grid-template-columns: 1fr 1fr 1fr; */
    /* grid-template-columns: repeat(3, 1fr); */
    /* 第二个最小宽度设置150px */
    /* grid-template-columns: 1fr minmax(150px, 1fr); */
    /* auto 自动获取剩下的 */
    grid-template-columns: 100px auto 100px;
    /* 网格线 */
    grid-template-columns: [c1] 100px [c2] 100px [c3]100px [c4];
    /* 不设置默认均分铺满 */
    /* grid-template-rows: 100px 100px 100px 100px; */
    /* 行间距 */
    /* row-gap: 20px; */
    /* 列间距 */
    /* column-gap: 20px; */
    /* 合并 两个属性行 ，列   一个则都一样*/
    /* gap: 20px 40px; */
    /* 默认横线排列 */
    /* grid-auto-flow: row; */
    /* 竖向排列 */
    /* grid-auto-flow: column; */
    /* 空间利用 */
    /* grid-auto-flow: row dense;  */
    /* 水平方向 justify-content 
    垂直方向 align-content
        start 最左
        end 最右
        center 中间 
        stretch 拉伸
        space-around 向内分布
        space-between 向外分布
        space-evenly 均匀排列每个元素,
        每个元素之间的间隔相等
    */
    /* justify-content: space-evenly; */
    /* 设置多余的设置大小    */
    grid-auto-rows: 50px;
    grid-auto-columns: 50px;
    /* 容器属性 一个区域由单个或多个组成 */
    grid-template-areas: 'a b c'
        'd e f'
        'g h i';
}
.item {
    font-size: 50px;
    background: yellowgreen;
    color: #fff;
}
.item-1 {
    /* 从哪里开始到哪列结束 */
    background: #e91e6e;
    /* 竖向 */
    /* grid-column-start: 1;
    grid-column-end: 3; */
    /* 简写 */
    /* grid-column: 1/3; */
    /* 跨越 */
    /* grid-column-start: span 2; */
    /* 横线  */
    /* grid-row-start: 1;
    grid-row-end: 3; */
}
.item-2 {
    background: #5df58b;
    /* 区域 */
    grid-area: a;
    /* 设置自身对齐 */
    /* justify-self:  start | end|center|stretch; */
    /* 竖向  */
    /* align-self: start | end|center|stretch; */
    /* 简写 place-self; */
}
.item-3 {
    background: #5d1350;
}
.item-4 {
    background: #5d1906;
}
.item-5 {
    background: #5df3de;
}
.item-6 {
    background: #5d4766;
}
.item-7 {
    background: #5d2dd1;
}
.item-8 {
    background: #94b784;
}
.item-9 {
    background: #ff370a;
}
.item10 {
    background: #ffa225;
}

代码

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/295308