(CSS学习笔记)Grid布局

最新推荐文章于 2024-12-03 09:30:00 发布
最新推荐文章于 2024-12-03 09:30:00 发布
阅读量480 收藏
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuangww05/article/details/104162656
版权
本文深入解析CSS Grid布局的特性与应用技巧，涵盖grid-template-columns、grid-auto-rows、grid-template-areas等关键属性，通过实例演示如何创建响应式网页布局。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

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布局，无论从灵活性还是设计方便性来说都是非常棒的！

zhuangww05
关注
CSS 网格FR 小数单位概述
allway2的博客
06-02 3142
了解 CSS 中的 FR 单元：一个在调整网格内间隙时自动计算布局划分的输入。分数 - 或分数单位 - 正在改变生活。为什么？因为它们是目前最灵活、反应最灵敏的单位！太糟糕了，它们只存在于网格中。分数或 1FR 是整体的一部分。1 分数是可用空间的 100%。2 份各占 50%。因此，1FR 是可用空间的 1/2。如果有250个分数？那么每个分数（1FR）是 1/250 或 0.4%。因此，1 个分数是 1（或 100）除以分数的总数。我们将在下面对此进行更多探讨。是2分！无论您要使用分数还是百分比，您需要
快速上手CSS布局（1）——Grid布局
weixin_50999722的博客
04-07 2079
Grid 布局是一种新型CSS布局方式，特点为二维布局，他比较擅长将一个页面划分为几个主要区域，本文主要介绍Grid布局的基本使用情况。
CSS 实际应用中遇到的
欢迎光临 我的心
09-24 325
grid-template-columns: repeat(2, 1fr) 网格布局 repeat：对于之后的列重复使用(2,1fr) fr: 分为2份之后，让该组件固定占一列，同理有2fr等
CSS之Grid网格布局
swimming_in_IT_的博客
05-31 1685
一：概述 网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针...
阮一峰老师 只要一行代码，实现五种CSS经典布局(转载)
鸭绒的博客
09-30 3967
只要一行代码，实现五种 CSS 经典布局 作者： 阮一峰 日期： 2020年8月10日 页面布局是样式开发的第一步，也是 CSS 最重要的功能之一。 常用的页面布局，其实就那么几个。下面我会介绍5个经典布局，只要掌握了它们，就能应对绝大多数常规页...
css经典学习笔记.zip
11-01
综上所述，《CSS经典学习笔记》旨在提供一个全面的CSS学习路径，无论你是初学者还是有经验的开发者，都能从中受益，提升你的CSS技能和网页设计能力。通过深入实践和不断探索，你会发现CSS不仅可以打造出美观的界面，...
CSS学习笔记（手写版）
07-26
### CSS学习笔记（手写版） #### CSS基础知识 **CSS**（Cascading Style Sheets，层叠样式表）是一种用于定义HTML文档外观的语言。它可以让网页具有更好的视觉表现力，同时使得HTML文档更加语义化。 1. **CSS选择...
CSS学习笔记～～～～
05-17
在`CSS学习笔记-01.md`、`CSS学习笔记-02.md`和`CSS学习笔记-03.md`中，可能会深入讲解这些概念，包括更多选择器用法、布局技巧、CSS3特效和预处理器的使用，帮助读者逐步掌握这个强大的样式语言。
我的HTML+Css学习笔记
02-25
这份“我的HTML+Css学习笔记”无疑是对于初学者来说极好的资源，它涵盖了从基础到进阶的重要概念。 HTML是网页内容的结构语言，通过一系列标签来定义网页的各个部分，如`<head>`、`<body>`、`<h1>`至`<h6>`的标题、...
CSSDemo:CSS学习笔记
04-08
【CSSDemo:CSS学习笔记】 在网页设计领域，CSS（Cascading Style Sheets）是用于控制网页元素样式和布局的重要工具。本学习笔记将深入探讨CSS的基础知识、选择器、盒模型、布局方式以及响应式设计等多个方面，帮助...
css中的网格布局
油墨香^-^的博客
09-14 356
网格是由一系列水平及垂直的线构成的一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。也就是下面这张图：我们一般会根据我们的设计图来决定网格的布局长什么样子。接下来我们从一个基础的网格系统开始学起来。
CSS小技巧
qq_22841387的博客
06-04 204
当前设计出来的页面为 需要同时使用背景图片和颜色去混合 解决方法 通过伪类元素插入图片，颜色透明 平移位置 向x轴的负方向左移60px 字体缩进两个字符 通过vw控制字体个数，但是需要注意的是，放大之后字体个数就不再是两个了 实现字体下划线效果——仿掘金 添加下方border即可 通过css画出菱形 一行排列两个 通过grid布局，设置grid为两列 放大后，响应式放大 放大到一定程度后，分为一列布局...
CSS网格布局
weixin_74261199的博客
09-26 1533
希望元素按照网格的方式进行布局，最简单的方式就是利用网格布局。
CSS Grid 网格布局教程
細水、長流√的专栏
04-22 176
作者：阮一峰 日期：2019年3月25日 一、概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布...
grid 网格布局
前端世界，乐趣无穷
08-24 1700
什么是网格？ 网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。CSS网格布局具有以下特点： 固定的位置和弹性的轨道的大小 你可以使用固定的轨道尺寸创建网格，比如使用像素单位。你也可以使用比如百分比或者专门为此目的创建的新单位 fr来创建有弹性尺寸的网格。 元素位置 你可以使用行号、行名或者标定一个网格区域来精确定位元素。网格同时还使用一种算法来控制未给出明确网格位置的元素。 创建额外的轨道来包含元素 可以使用网格布局定义一个显式网格，但是根
如何使用grid布局
qq_46511756的博客
06-21 2733
以下都是写在父元素（grid容器上）添加了grid布局的容器默认是块元素。可以添加display:inline-grid; 改变成为行内块元素。改变格子排列方向grid-auto-flow：column；处理格子的流动方式（了解）grid-auto-flow：dense； //可以把多余空间占满控制内容在容器格子内的排列控制格子的排列，和flex一样，写在父元素上，水平居中、贴边等……，垂直居中、底部对其等……，控制单个元素 justify-self、align-self。组合简写：place-conte
repeat()：重复指定次数
最新发布
dzhnb的博客
12-03 442
repeat()是一个简便的方法，用于生成重复字符串，适合在各种文本处理场景中使用。合理使用该方法可以简化代码，提高字符串操作的效率。
如何用一行 CSS 实现 10 种现代布局
我是一颗草，哪里荒凉往哪里长
04-22 546
超级居中 place-item:center 实现垂直居中 父级元素设置一下属性即可 display: grid; place-items: center; 解构煎饼式布局：flex: baseWidth 是设置盒子基本宽度 如果没有设置 则取默认的宽度 grow 是当父级盒子有剩余空间时候 剩余空间给子级填充剩余空间的比例 shrink 是当父级元素宽度不够时候 那么子级元素进行压缩适配父级的比例 案例如下： <!DOCTYPE html> <html lang="e
CSS 新的长度单位 `fr` 你知道么？
weixin_33922672的博客
06-21 618
本文译自：An Introduction to the fr CSS unit。首发知乎专栏「前端外刊评论」，介绍了 CSS Grid 规范中引入的一个新的长度单位 fr，我们一起来看看到底是怎么回事吧，译文走起！ 关于 CSS Grid 的激烈讨论到处都是，但我发现很少有讨论 fr 这个新的 CSS 长度单位（规范在这里）的文章。 为了讲清楚，先从一个典型的案例开始，我们看下面的例子，用 C...
CSS网页布局技巧与实践学习笔记
CSS Grid布局是一个二维的布局系统，可以用来创建网格系统。它将容器分为行和列，并可以将子元素放置到这些行列中。Grid布局非常适合复杂的布局设计。 7. 响应式设计 响应式设计是指创建一个能够自动适应不同屏幕...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值