CSS Grid网格布局从未如此简单

祖新觉
2023-12-01

grid网格布局

一丶首先是作用在容器上的语法:
1.display : grid
将元素设置为网格布局
2.grid-template-columns : 设置列数
grid-template-rows : 设置行数
单位:fr,是个比例单位,表示占用网格的份数,1fr就代表一份,在网格的宽高固定的情况下使用。把每行的份数相加总和为多少fr,就把网格宽或高平均分成几份,具体每列设多少fr,就占据网格宽或高的多少份。例:grid-template-rows:1fr 1fr 1fr;网格共有三行,网格平均分成三份,每行占网格的一份。
可简写为:grid-template-rows: repeat(3 , 1fr);
grid-template-columns: repeat(3 , 1fr);
3. grid-template-areas : 划分区域的
可以将网格布局的元素划分成不同区域大小的矩形,且只能是矩形。
复合写法: grid-template:grid-template-rows
grid-template-columns
grid-template-areas
举例:grid-template:
“a1 a1 a1” 1fr
“a3 a3 a2” 1fr
“a3 a3 a2” 1fr
/1fr 1fr 1fr;
4.grid-column-gap : 列的间距
grid-row-gap : 行的间距
复合写法: grid-gap : grid-row-gap grid-column-gap
5.(1)justify-items : 子项的水平居中方式
默认 : stretch 默认值,拉伸。表现为水平或垂直填充。
start 以初始位置对齐
center 以中心位置对齐
end 以结束位置对齐
(2) align-items : 子项的垂直居中方式
默认 : stretch 默认值,拉伸。表现为水平或垂直填充。
start 以初始位置对齐
center 以中心位置对齐
end 以结束位置对齐

复合写法:place-items : align-items justify-items
6.(1)justify-content : 整体网格的水平对齐方式
默认:stretch 拉伸。表现为水平或垂直填充。
start :子项以初始位置对齐
end:子项以中心位置对齐
center:子项以结束位置对齐
space-between:表现为两端对齐。between是中间的意思,意思是多余的空白间距只在元素中间区域分配。
space-around:around是环绕的意思,意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly: evenly是匀称、平等的意思。也就是视觉上,每个flex子项两侧空白间距完全相等。

(2)align-content : 整体网格的垂直对齐方式
默认:stretch 拉伸。表现为水平或垂直填充。
start :子项以初始位置对齐
end:子项以中心位置对齐
center:子项以结束位置对齐
space-between:表现为两端对齐。between是中间的意思,意思是多余的空白间距只在元素中间区域分配。
space-around:around是环绕的意思,意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly: evenly是匀称、平等的意思。也就是视觉上,每个flex子项两侧空白间距完全相等。
复合写法: place-content : align-content justify-content

二丶作用在子项上的语法:

  1. grid-area : 找指定的区域
    (1)对应网格的名字
    (2)写对应的线的数字:grid-area : 1 / 3 / span 2 / 4;
    grid-row-start / grid-column-start / grid-row-end / grid-column-end
    通常使用第一种方法,举例: #box3 div:nth-of-type(2){ grid-area: a5; }
    #box3 div:nth-of-type(3){ grid-area: a9; }
  2. grid-column-start 水平方向上占据的起始位置
    grid-column-end 水平方向上占据的结束位置
    grid-row-start 垂直方向上占据的起始位置
    grid-row-end 垂直方向上占据的结束位置
    注:只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置,而是个数。
    正常数字是位置,加上span是个数。
    同时, justify-self algin-self place-self三种对齐方式。

下面分析一个实例:左边固定右边网格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0;}
img{display: block;}
ul{list-style: none;}
a{text-decoration: none;}
html,body{width: 100%;height: 100%;}
#main{width: 100%;height: 100%;display:flex}

/* -------------PART1-------------- */
#part1{width: 250px;padding-left: 20px;box-sizing: border-box;background: pink;}

#main .ul1{
    line-height: 30px;color: #5c5f63;margin-top: 40px;margin-bottom: 60px;
}
#main .ul1 li:nth-of-type(1){
    font-size: 28px;margin-bottom: 70px;
}
#main .ul1 li:nth-of-type(8){
    margin-bottom: 50px;
}
#main .ul2{
    font-size: 12px;line-height: 16px;color:#5c5f63 ;margin-top: 40px;margin-bottom: 21px;
}
#main a{color:#5c5f63 ;font-size: 12px;}
#main a:nth-of-type(2){
    padding: 0 12px;margin: 0 12px;
    border-right: 1px solid #5c5f63;
    border-left: 1px solid #5c5f63;
}

/* --------------------PART2----------- */

#part2{
    text-align: center;
    display: grid;flex: 1;
    grid-template: "a1 a1 a2 a3 a3 a3" 1fr
                   "a1 a1 a2 a3 a3 a3" 1fr
                   "a4 a4 a4 a5 a6 a6" 1fr
                   "a4 a4 a4 a7 a8 a8" 1fr
                   /1fr 1fr 1fr 1fr 1fr 1fr   ;
}

#part2 div:nth-of-type(1){
    grid-area: a1;background:url(../img/1.jpg) no-repeat center / 100% 100%;
}
#part2 div:nth-of-type(2){
    grid-area: a2;background:url(../img/2.jpg) no-repeat center / 100% 100%;
}
#part2 div:nth-of-type(3){
    grid-area: a3;background:url(../img/3.jpg) no-repeat center / 100% 100%;
}
#part2 div:nth-of-type(4){
    grid-area: a4;background:url(../img/4.jpg) no-repeat center / 100% 100%;
}
#part2 div:nth-of-type(5){
    grid-area: a5;background:url(../img/5.jpg) no-repeat center / 100% 100%;
}
#part2 div:nth-of-type(6){
    grid-area: a6;background:url(../img/7.jpg) no-repeat center /100% 100%;
}
#part2 div:nth-of-type(7){
    grid-area: a7;background:url(../img/6.jpg) no-repeat center / 100% 100%;
}
#part2 div:nth-of-type(8){
    grid-area: a8;background:url(../img/8.jpg) no-repeat center /100% 100%;
}

#part2 div span{
    display: flex;height: 100%;width: 0%;
    background: rgba(0, 0, 0, .5); overflow: hidden;color:transparent;justify-content: center;
    align-items: center;
}
#part2 div:hover span{
    animation: qq .5s ease forwards;
}
@keyframes qq{
    0%{width: 0%;}
    70%{color:transparent;}
    100%{width: 100%;color: white;}
}
    </style>
</head>
<body>
    <div id="main">
        <div id="part1">
            <ul class="ul1">
                <li>JEAN-GEORGES</li>
                <li>ABOUT</li>
                <li>RESTAURANTS</li>
                <li>GROUPS&EVENTS</li>
                <li>PHOTOS</li>
                <li>STORS</li>
                <li>PRESS</li>
                <li>RECIPES</li>
                <li>RESERVATIONS</li>
            </ul>
            <img src="../img/1.png" alt="">
            <ul class="ul2">
                <li>CAREERS</li>
                <li>CONTACT US</li>
                <li>NEWSLETTER</li>
                <li>ACCESSIBLE</li>
            </ul>
            <a href="#">LEGAL</a>
            <a href="#">PHOTOS</a>
            <a href="#">CREDITS</a>
        </div>
        <div id="part2">
            <div><span>RESERVATIONS</span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            
        </div>
    </div>
</body>
</html>
                                                                   逆战班
                                                               2020.02.29      
 类似资料: