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

最新推荐文章于 2024-06-13 10:23:19 发布
最新推荐文章于 2024-06-13 10:23:19 发布
阅读量382 收藏 1
点赞数 2
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kannavi/article/details/104573434
版权

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
Kannavi
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
grid 布局
wu_2004的博客
09-04 726
grid-row-start 设置开始的位置，grid-row-end设置结束的位置。repeat 可以更方便的设置列， 第一个参数为列数，第二个参数为 所占空间的比值。grid-row-gap 设置行间距 grid-column-gap 设置列间距。第一个是横向开始的网格线，第二个是纵向开始，第三个是横向结束，第四个是纵向结束。grid-gap 有两个参数，第一个参数代表 行间距，第二个参数代表列间距。grid-column 第一个是开始的值，第二个是结束的值。span 设置的值，就是占用多个单元格。
css grid 布局
齐枫的博客
09-23 632
css grid CSS Grid 网格布局 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。 容器属性 注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display:
grid布局中的grid-template-columns属性和grid-template-rows属性参数说明
最新发布
weixin_43131100的博客
06-13 222
1.grid-template-columns属性（布局需要的竖列）；2.grid-template-rows属性（布局需要的横行）
CSS3新增样式（五）——grid布局
pro1822的博客
04-06 978
CSS3新增样式（四）——grid布局
grid布局
qq_38686150的博客
06-25 174
容器属性 grid-template-colunms: // 定义每一列的宽 // 取值 100px 200px 300px // 25% 25% 25% 25% grid-template-rows: // 定义每一行的高 // 100px 200px 300px 当元素设置为grid布局后 项目（子元素）flaot ,display:inline-block,display:table-cell,certical-align, column-* ...
CSS Grid 网格布局全解析
09-24
CSS Grid（网格布局）是现代网页设计中一个强大的工具，它使得创建复杂、响应式的二维布局变得轻松简单。Grid布局摒弃了传统布局模式的限制，让我们可以自由地定义网页的行和列，以及网格内元素的位置，实现了内容与...
使用CSS Grid布局实现网格的流动
09-25
CSS Grid布局是一种二维网格系统，用于页面布局设计。它允许设计者将元素排列成行和列，通过定义网格轨道大小、网格间隙以及网格区域，实现复杂的布局效果。CSS Grid布局由CSS Grid布局属性定义，与传统的浮动布局...
css的grid网格布局
06-02
CSS的Grid网格布局是一种二维布局系统，用于将页面分割为网格。与传统的基于浮动的布局相比，Grid布局提供了更加强大和灵活的方式来控制网格项目的对齐、定位和分层。在Grid布局中，可以定义网格容器和网格项，并...
网格(grid)布局
yjwlike的博客
10-18 3910
网格是由一系列水平（row 行）及垂直的线构（column 列）成的一种布局模式, 也就是说网格布局主要是操控行和列，面试呢常常会问到如何使一个盒子水平垂直居中是css中的一种布局方式，网格布局就是答案之一。设置元素的 display 值为 grid 或者 inline-grid，仅设置display为grid，而不控制行和列是没有任何效果的。其子元素依旧按照从上至下的默认布局进行排列。
Grid布局（网格布局）
仙人掌的博客
01-11 563
网格布局（Grid）是 CSS 中一个布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的CSS框架达到的效果，现在浏览器内置了。 下面这样的布局，就是Grid布局。 Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex布局是轴线布局，只能指定"项目"针对轴...
display:grid网格布局
热门推荐
hhupp1809684284的博客
05-26 1万+
grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。有时候，一些项目的指定位置，在现有网格的外部。grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。
如何使用grid布局
qq_46511756的博客
06-21 2289
以下都是写在父元素（grid容器上）添加了grid布局的容器默认是块元素。可以添加display:inline-grid; 改变成为行内块元素。改变格子排列方向grid-auto-flow：column；处理格子的流动方式（了解）grid-auto-flow：dense； //可以把多余空间占满控制内容在容器格子内的排列控制格子的排列，和flex一样，写在父元素上，水平居中、贴边等……，垂直居中、底部对其等……，控制单个元素 justify-self、align-self。组合简写：place-conte
css学习笔记-grid布局
Laollaoaolao的博客
08-11 833
概述 1.flex布局是一维布局，grid布局是二维布局. 2.flex考虑的是项目按行或列布局，grid布局需要同时考虑行和列. flex布局： grid布局： 基本概念 grid-template-columns可以设置容器的列数以及相应列的宽度 grid-template-rows可以设置容器的行数以及相应行的高度 可以按照像素设置行列的宽高，也可以按照比例来设置(fr) 容器属性 与flex属性相似 1.justify-items 单元格内元素在单元格中的横向排列方式(包括start
多种布局方式，很有意思
丑小鸭变黑天鹅的博客
03-17 641
多种布局方式，很有意思一、 利用grid实现居中效果二、自适应布局三、 经典侧边栏四、 固定的页眉页脚五、圣杯布局六、RAM技巧七、卡片弹性适应性八、使用夹具实现流体印刷九、aspect-ratio 本篇文章的技巧都是基于学过grid布局，懂其原理的基础上。如果还不知道grid布局，请坐飞机看博主另一篇文章 超级强大的grid布局 一、 利用grid实现居中效果 在没有和flex和grid之前，垂直居中一直不能很优雅的实现。而现在，可以结合我们grid和place-items优雅的实现同时水平居中和垂直居中
grid ，css布局
qq_34164814的博客
05-12 691
today,也就是今天啊，发现一个css样式，之前没听过，更没用过（在下才疏学浅，莫要见笑）！ 就是这个样式 display: grid; 哎呦呦，这个东西就是今天的主角！ 个人理解，这个就是把之前大家说的栅格布局，写进了css里面，大家用起来更方便的，不过现在的各大浏览器支持程度还不是很清楚，大家慎用！！（chrome. Edge还是支持的，亲测有效）； 基本概念 采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。也就是这个布局样式类似于fl
HTML-CSS(五十六)grid布局
weixin_44730244的博客
05-08 908
grid布局是一个二维布局方法，纵横两个方向总是同时出 grid-template-columns和grid-template-rows 对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应(auto)以及fr单位（网格剩余空间比例单位）。 auto与1fr区别在于，auto时根据内容撑起的变宽，fr是对剩余空间的划分 有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat（）语法进行简化操作 如果列布局（行布局的分布）选用fr作为单位，并且总fr的值<1
grid布局常用属性
qq_61838861的博客
02-13 2636
grid布局即网格布局（二维），flex布局（一维） <div class="wrap"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div&gt...
比flex更好用的css布局，CSS Grid 网格布局教程
05-28
CSS Grid 网格布局是一种比较新的 CSS 布局方式，可以更方便、更灵活地实现网页的布局和设计。相比于传统的布局方式（如 flex），CSS Grid 更加强大和灵活，可以在一个二维的网格中对页面进行布局。 下面是一个简单的 CSS Grid 网格布局的示例： ```html <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> ``` ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .item { background-color: #ddd; padding: 20px; text-align: center; } ``` 在上面的代码中，`.container` 是一个 CSS Grid 容器，`.item` 是容器中的子元素。通过设置 `display: grid`，我们告诉浏览器该容器使用 CSS Grid 布局。`grid-template-columns` 属性定义了容器中的列数和宽度，这里我们使用了 `repeat()` 函数来重复定义 3 列，每列宽度为 1fr。`grid-gap` 属性定义了子元素之间的间距。 通过这种方式，我们可以轻松实现一个网格布局，而不需要使用传统的布局方式。 当然，这只是 CSS Grid 的基础用法，CSS Grid 还有很多高级特性，如命名网格线、自适应网格、子元素排列顺序等等。学习 CSS Grid 可能需要一定的时间和精力，但是它的强大和灵活性是其他布局方式所无法比拟的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值