(CSS学习笔记)Grid布局

Grid布局在布局中展现出较为方便利用的效果，可将其看作二维的布局方式。

1.grid-template-columns

    <style>
        .container{
        	/*对border,width,height进行设置是为了方便理解Grid布局效果*/
      	    border: 1px solid black;
            width: 750px;  
            height: 750px;
            /*若要进行Grid布局，需先将父元素display设置为grid*/
            display: grid; 
            /*按照比例分配一行对应元素的宽,想在一行中放置几个元素就需要设置几个百分数*/
            grid-template-columns: 25% 25% 25% 25%;  
        }
    </style>
    
    <div class="container">
        <div style="background-color: brown;"></div>
        <div style="background-color: cornflowerblue;"></div>
        <div style="background-color: darkmagenta;"></div>
        <div style="background-color: goldenrod;"></div>
    </div>

※关注点※
第一张图片：grid-template-columns: 25% 25% 25% 25%;
第二张图片：grid-template-columns: 15% 25% 25%; 如果只设置一行的比例,则会在下一行进行同一比例分配

2.grid-auto-rows

    <style>
        .container{
            border: 1px solid black;
            width: 750px;
            height: 750px;
            display: grid;
            /*按照比例分配对应元素的高*/
            grid-auto-rows: 25% 25% 25% 25%;
        }
    </style>
    <div class="container">
        <div style="background-color: brown;"></div>
        <div style="background-color: cornflowerblue;"></div>
        <div style="background-color: darkmagenta;"></div>
        <div style="background-color: goldenrod;"></div>
    </div>

※关注点※
第一张图片：grid-auto-rows: 25% 25% 25% 25%;
第二张图片：grid-auto-rows: 5% 25% 25%; 如果设置比例较列轴上的元素少那么多出来的元素会重复比例,即每三个元素进行5% 25% 25%重复分配.

3.grid-template-columns && grid-auto-rows

    <style>
        .container{
            border: 1px solid black;
            width: 750px;
            height: 750px;
            display: grid;
            /*行元素按个数分别占75% 25%*/
            grid-template-columns: 75% 25%; 
            /*列元素按个数分别占25% 75%*/
            grid-auto-rows:25% 75%;
        }
    </style>
    <div class="container">
        <div style="background-color: brown;"></div>
        <div style="background-color: cornflowerblue;"></div>
        <div style="background-color: darkmagenta;"></div>
        <div style="background-color: goldenrod;"></div>
    </div>

4.fr

我们在进行行列元素分配空间时,除了给予百分比(%)的单位,也可将fr作为单位进行空间分配.

    <style>
        .container{
            border: 1px solid black;
            width: 750px;
            height: 750px;
            display: grid;
            /*相当于grid-template-columns:75% 25%*/
            grid-template-columns: 3fr 1fr;
            /*相当于grid-auto-rows:25% 75%*/
            grid-auto-rows:1fr 3fr;
        }
    </style>
    <div class="container">
        <div style="background-color: brown;"></div>
        <div style="background-color: cornflowerblue;"></div>
        <div style="background-color: darkmagenta;"></div>
        <div style="background-color: goldenrod;"></div>
    </div>

※关注点※
可将单位fr理解为所占总数的几分之几,比如3fr 1fr可看成前部分为3/4后部分为1/4.

5.repeat && gap

    <style>
        .container{
            border: 1px solid black;
            width: 750px;
            height: 750px;
            overflow: visible;
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-auto-rows:repeat(2,1fr);
            grid-gap: 1rem;
        }
    </style>
    <div class="container">
        <div style="background-color: brown;"></div>
        <div style="background-color: cornflowerblue;"></div>
        <div style="background-color: darkmagenta;"></div>
        <div style="background-color: goldenrod;"></div>
    </div>

※关注点※
repeat(2,1fr)表示一行或一列有两个元素并且两个元素的占比都为1fr.
grid-gap用来设置行列之间的空隙,可细分为grid-column-gap和grid-row-gap.
代码中的overflow:visible结合图的效果可知道设置的空隙是通过减少元素的宽高而不是通过扩大元素得到的.

6.自适应minmax

    <style>
        .container{
            border: 1px solid black;
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-auto-rows: repeat(2,1fr);
            /*grid-auto-rows可以设置元素的高度*/
            grid-auto-rows: 375px;
        }
    </style>
    <div class="container">
        <div style="background-color: rgb(155, 153, 153);">
            医神阿波罗，阿斯克勒庇俄斯及天地诸神为证，鄙人敬谨宣誓，愿以自身能判断力所及，遵守此约。凡授我艺者敬之如父母，作为终身同世伴侣，彼有急需我接济之。视彼儿女，犹我弟兄，如欲受业，当免费并无条件传授之。凡我所知无论口授书传俱传之吾子，吾师之子及发誓遵守此约之生徒，此外不传与他人。
            我愿尽余之能力与判断力所及，遵守为病家谋利益之信条，并检束一切堕落及害人行为，我不得将危害药品给与他人，并不作此项之指导，虽然人请求亦必不与之。尤不为妇人施堕胎手术。我愿以此纯洁与神圣之精神终身执行我职务。凡患结石者，我不施手术，此则有待于专家为之。
            无论至于何处，遇男或女，贵人及奴婢，我之唯一目的，为病家谋幸福，并检点吾身，不做各种害人及恶劣行为，尤不做诱奸之事。凡我所见所闻，无论有无业务关系，我认为应守秘密者，我愿保守秘密。倘使我严守上述誓言时，请求神祇让我生命与医术能得无上光荣，我苟违誓，天地鬼神共殛之。
        </div>
        <div style="background-color: rgb(226, 219, 219);">
            简短而洗炼的的誓言，向世人公示了四条戒律：
            对知识传授者心存感激； 为服务对象谋利益，做自己有能力做的事； 绝不利用职业便利做缺德乃至违法的事情； 严格保守秘密，即尊重个人隐私、谨护商业秘密。
            来源和历史
            编辑
            希波克拉底本人从来没有提到过这个誓词，他同代的时候也没有任何类似的文件被发现。最早提到这份誓词的是1世纪罗马皇帝克劳狄一世身边的一名罗马医生。希波克拉底生活在前460年至前370年，这之间没有任何文献提到过这份誓词，因此该誓词的来源不明。
            有一种说法是这个誓词是毕达哥拉斯学派的人创立的。但是这个理论，今天基本上没有人支持了，因为没有毕达哥拉斯学派从医的纪录和论证。
            誓词的内容不很明确，而且它的文字在不同的时间里也不断被改变来适合当时的需要。从文艺复兴到20世纪它被看作是古代医学伦理的经典文献。在近代早期大学医科授予博士学位以及其它一些医学职业如助产士或者药师等毕业时使用希波克拉底誓词或者其中的部分内容。
            1804年蒙彼利埃医学院首次使用希波克拉底誓词全文作为毕业生的誓词。20世纪里许多高校，尤其是美国的高校在授予博士学位的仪式上使用希波克拉底誓词。
            今日，许多医学院试图使用其它比较适合当今情况的文字，来取代希波克拉底誓词。
            举例如：
            “今我进入医业，立誓献身人道服务；我感激尊敬恩师，如同对待父母；并本着良心与尊严行医；病患的健康生命是我首要顾念；我必严守病患寄托予我的秘密；我必尽力维护医界名誉及高尚传统；我以同事为兄弟；我对病患负责，不因任何宗教、国籍、种族、政治或地位不同而有所差别；生命从受胎时起，即为至高无上的尊严；即使面临威胁，我的医学知识也不与人道相违。
            我兹郑重地、自主地以我的人格宣誓以上的誓言。”
        </div>
        <div style="background-color: rgb(226, 219, 219);"></div>
        <div style="background-color: rgb(155, 153, 153);"></div>
    </div>

※关注点※
在图中我们可以注意到设置高度之后,如果我们在元素中添加了内容,且内容的容量大于元素容量那么其内容会被遮住无法显示,特别是在做动态页面时可能会出现这样的状况,为了避免这样的尴尬局面,可以添加minmax()进行调整.

		    border: 1px solid black;
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-auto-rows: repeat(2,1fr);
            grid-auto-rows: minmax(375px,auto);

※关注点※
grid-auto-rows: minmax(375px,auto)可理解为如果元素内容没有超过当高度为375px的元素用量时则以375px为高,若超过就以展示完来设置高度,下方的元素高度不变.

7.justify-items && align-items

	<style>
        .container{
            border: 1px solid black;
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-auto-rows: repeat(2,1fr);
            grid-auto-rows: minmax(50px,auto);
            grid-gap: 1rem;
            justify-items: left;
            aligin-items:start;
        }
    </style>
    <div class="container">
        <div style="background-color: rgb(155, 153, 153);">医神阿波罗</div>
        <div style="background-color: rgb(226, 219, 219);">医神阿波罗</div>
        <div style="background-color: rgb(226, 219, 219);">医神阿波罗</div>
        <div style="background-color: rgb(155, 153, 153);">医神阿波罗</div>
    </div>

※关注点※
justify-items使用来设置内容的以哪个位置对齐,有left/center/right的值，不设置的话默认值为stretch。
aligin-items使用来设置内容垂直方向的对齐，有start/center/end的值，对应顶部/中央/底部对齐，默认为stretch。

8.grid-columns && grid-rows

首先展示下grid-column和grid-row的效果。

        .container{
            border: 1px solid black;
            width: 750px;
            height: 750px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }
        .brown{
            grid-column:1/3;
            grid-row:1/3;
        }
        .goldenrod{
            grid-column: 1/4;
        }
    </style>
    <div class="container">
        <div style="background-color: brown;" class="brown"></div>
        <div style="background-color: cornflowerblue;" class="cornflowerblue"></div>
        <div style="background-color: darkmagenta;" class="darkmagenta"></div>
        <div style="background-color: goldenrod;" class="goldenrod"></div>
    </div>

※关注点※
理解grid-column和grid-row作用第一先要分析未添加两者的分割图。

	<style>
        .container{
            border: 1px solid black;
            width: 750px;
            height: 750px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }
    </style>
    <div class="container">
        <div style="background-color: brown;" class="brown"></div>
        <div style="background-color: cornflowerblue;" class="cornflowerblue"></div>
        <div style="background-color: darkmagenta;" class="darkmagenta"></div>
        <div style="background-color: goldenrod;" class="goldenrod"></div>
    </div>

如果我们想令棕色色块在行中占据1到3部分的地方可以添加brown选择器并设置grid-column。

        .container{
            border: 1px solid black;
            width: 750px;
            height: 750px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }
        .brown{
            grid-column:1/3;
        }
    </style>
    <div class="container">
        <div style="background-color: brown;" class="brown"></div>
        <div style="background-color: cornflowerblue;" class="cornflowerblue"></div>
        <div style="background-color: darkmagenta;" class="darkmagenta"></div>
        <div style="background-color: goldenrod;" class="goldenrod"></div>
    </div>

如果我们想令棕色色块在列中占据1到3的部分可以为brown选择器添加grid-row代码。

        .brown{
            grid-column:1/3;
            grid-row:1/3;
        }

※关注点※
此时的分割图就有了变化

最后我们想让金色色块在行中占据1到4的部分可为goldenrod选择器添加代码，就有一开始的效果图了。

        .goldenrod{
            grid-column: 1/4;
        }

9.grid-template-areas

        .container{
            border: 1px solid black;
            width: 750px;
            height: 750px;
            display: grid;
            grid-template-areas: 
            "brown brown"
            "cornflowerblue darkmagenta"
            "goldenrod goldenrod";
        }
        .brown{
            grid-area: brown;
        }
        .cornflowerblue{
            grid-area: cornflowerblue;
        }
        .darkmagenta{
            grid-area: darkmagenta;
        }
        .goldenrod{
            grid-area: goldenrod;
        }
    </style>
    <div class="container">
        <div style="background-color: brown;" class="brown"></div>
        <div style="background-color: cornflowerblue;" class="cornflowerblue"></div>
        <div style="background-color: darkmagenta;" class="darkmagenta"></div>
        <div style="background-color: goldenrod;" class="goldenrod"></div>
    </div>

※关注点※
用法十分的形象直接，要注意的是在父元素grid-template-areas里设置的色块代名词要在其选择器里用grid-area表示。

10.试手小练习

在这个练习中只需要用色块表示即可(方法不止一种)

<!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>
    <style>
        .header{
            height: 40px;
            display: grid;
            grid-template-columns: 1fr 4fr 1fr;
        }
        .header-user{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-column-gap: 5px;
        }
        .header-guide01{
            display: grid;
            grid-template-columns: repeat(8,1fr);
            grid-auto-rows: repeat(2,1fr);
            grid-gap: 5px;
        }
        .header-guide02{
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-auto-rows: repeat(2,1fr);
            grid-gap: 5px;
        }
        .main{
            height: 150px;
            display: grid;
            grid-template-columns: 1fr 2fr;
        }
        .main-recommend{
            display: grid;
            grid-template-columns: repeat(4,1fr);
            grid-auto-rows: repeat(2,1fr);
            grid-gap: 5px;
        }
        .footer01{
            height: 20px;
            display: grid;
            grid-template-columns: 5fr 2fr;
            grid-gap: 5px;
        }
        .footer02{
            height: 120px;
            display: grid;
            grid-template-columns: 5fr 2fr;
            grid-gap: 5px;
        }
         .footer02-recommend{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            grid-gap: 5px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-user" style="background-color: aqua;">
            <div style="background-color: hotpink;"></div>
            <div style="background-color: hotpink;"></div>
            <div style="background-color: hotpink;"></div>
        </div>
        <div class="header-guide01" style="background-color: burlywood;">
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
            <div style="background-color: indianred;"></div>
        </div>
        <div class="header-guide02" style="background-color: cornflowerblue;">
            <div style="background-color: lightcoral;"></div>
            <div style="background-color: lightcoral;"></div>
            <div style="background-color: lightcoral;"></div>
            <div style="background-color: lightcoral;"></div>
            <div style="background-color: lightcoral;"></div>
            <div style="background-color: lightcoral;"></div>
        </div>
    </div>
    <div class="main">
        <div style="background-color: darkcyan;"></div>
        <div class="main-recommend" style="background-color: darkgoldenrod;">
            <div style="background-color: darkmagenta;"></div>
            <div style="background-color: darkmagenta;"></div>
            <div style="background-color: darkmagenta;"></div>
            <div style="background-color: darkmagenta;"></div>
            <div style="background-color: darkmagenta;"></div>
            <div style="background-color: darkmagenta;"></div>
            <div style="background-color: darkmagenta;"></div>
            <div style="background-color: darkmagenta;"></div>
        </div>
    </div>
    <div class="footer01" style="background-color: olivedrab;">
        <div style="background-color: palevioletred;"></div>
        <div style="background-color: palevioletred;"></div>
    </div>
    <div class="footer02" style="background-color: peru;">
        <div class="footer02-recommend">
            <div style="background-color: rebeccapurple;"></div>
            <div style="background-color: rebeccapurple;"></div>
            <div style="background-color: rebeccapurple;"></div>
            <div style="background-color: rebeccapurple;"></div>
            <div style="background-color: rebeccapurple;"></div>
        </div>
        <div style="background-color: salmon;"></div>
    </div>
</body>
</html>

总结：个人认为Grid布局可将其看作table布局的升级版，二维的flex布局，无论从灵活性还是设计方便性来说都是非常棒的！