CSS中grid的9个属性

最新推荐文章于 2023-08-21 10:08:18 发布
最新推荐文章于 2023-08-21 10:08:18 发布
阅读量320 收藏 2
点赞数
分类专栏： CSS 文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53568983/article/details/125794916
版权

目录结构：

  1. 创建容器
  2. 划分容器块
  3. 创建项目
  4. 项目合并
  5. 项目排列方式
  6. 项目间距
  7. 项目对齐方式
  8. 项目类容在项目中的对齐方式
  9. 单个项目类容在项目中的对齐方式

1. grid : 创建grid容器

display: grid;

2.grid-template-columns/rows: 显式生成网格单元

注意：：
第22行和23行，可以多加几个值，每个值就是每一行或者每一列的宽度，是容器属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid容器/项目属性-1</title>
    <!-- em作为倍数单位，会累乘 -->
</head>
<body>
    <div class="container">
        <div class="item1">1</div>
    </div>
    <style>
        /* 定义容器： */
        .container{
            width: 30em;
            height: 30em;
            background-color: antiquewhite;
            display: grid;
            /* 划分网格单元 */
            grid-template-columns: 10em 10em 10em;
            grid-template-rows: 10em 10em 10em;
        }
        
        .container>.item1{
            background-color: aliceblue;
             
        }
    </style>
</body>
</html>

3. grid-area: 将项目放入指定的网格单元中

注意：：
第72行为grid-area属性，第1，2，3，4个参数的意思分别是，从第几行开始，从第几列开始，合并多少行，合并多少列，是容器属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid容器/项目属性-1</title>
    <!-- em作为倍数单位，会累乘 -->
</head>
<body>
    <div class="container">
        <div class="item1">1</div>
    </div>
    <style>
        /* 定义容器： */
        .container{
            width: 30em;
            height: 30em;
            background-color: antiquewhite;
            display: grid;
            /* 划分网格单元 */
            grid-template-columns: 10em 10em 10em 50em;
            grid-template-rows: 10em 10em 10em;
        }
        
        .container>.item1{
            background-color: aliceblue;
             grid-area: 2 / 2 / span 3 /span 3;
    </style>
</body>
</html>

4. grid-auto-flow: 行与列的排列规则

注意：
如果合并了单元格，那么这个属性没有用，是容器属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid容器/项目属性-1</title>
    <!-- em作为倍数单位，会累乘 -->
</head>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <!-- <div class="item4">4</div> -->
    </div>
    <style>
        /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
        /* 定义容器： */
        .container{
            width: 30em;
            height: 30em;
            background-color: antiquewhite;
            display: grid;
            /* 划分网格单元 */
            grid-template-columns: 10em 10em;
            grid-template-rows: 10em 10em  ;
            grid-auto-flow: row;
        }
        
        .container>.item1{
            background-color: aliceblue;
             /* grid-area: 1 / 1 / span 2 /span 2; */
             margin: 20px;
        }
        .container>.item2{
            background-color: aliceblue;
             /* grid-area: 1 / 3 / span 2 /span 2; */
             margin: 20px;
        }
        .container>.item3{
            background-color: aliceblue;
             /* grid-area: 3 / 1 / span 2 /span 2; */
             margin: 20px;
        }
        .container>.item4{
            background-color: aliceblue;
             /* grid-area: 3 / 3 / span 2 /span 2; */
             margin: 20px;
        }
    </style>
</body>
</html>

5. grid-auto-row/column: 隐式网格的行/列的大小

该属性设置超出容器的项目的高度，是容器属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid容器/项目属性-1</title>
    <!-- em作为倍数单位，会累乘 -->
</head>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
    </div>
    <style>
        /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
        /* 定义容器： */
        .container{
            width: 20em;
            height: 20em;
            background-color: antiquewhite;
            display: grid;
            /* 划分网格单元 */
            grid-template-columns: 10em 10em;
            grid-template-rows: 10em 10em  ;
            grid-auto-rows: 5em 5em;
        }
        .container>.item1{
            background-color: aliceblue;
             /* grid-area: 1 / 1 / span 2 /span 2; */
             margin: 20px;
        }
        .container>.item2{
            background-color: aliceblue;
             /* grid-area: 1 / 3 / span 2 /span 2; */
             margin: 20px;
        }
        .container>.item3{
            background-color: aliceblue;
             /* grid-area: 3 / 1 / span 2 /span 2; */
             margin: 20px;
        }
        .container>.item4{
            background-color: aliceblue;
             /* grid-area: 3 / 3 / span 2 /span 2; */
             margin: 20px;
        }
        .container>.item5{
            background-color: red;
             /* grid-area: 3 / 3 / span 2 /span 2; */
             margin: 20px;
        }
    </style>
</body>
</html>

6. gap: 行列间隙

该属性指的是项目之间的间隙，是容器属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid容器/项目属性-1</title>
    <!-- em作为倍数单位，会累乘 -->
</head>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <!-- <div class="item4">4</div> -->
    </div>
    <style>
        /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
        /* 定义容器： */
        .container{
            width: 40em;
            height: 40em;
            background-color: antiquewhite;
            display: grid;
            /* 划分网格单元 */
            grid-template-columns: 10em 10em 10em 10em;
            grid-template-rows: 10em 10em 10em 10em;
            /* grid-auto-flow: row; */
             gap: 10px;
        }
        
        .container>.item1{
            background-color: aliceblue;
             grid-area: 1 / 1 / span 2 /span 2;
              
        }
        .container>.item2{
            background-color: aliceblue;
             grid-area: 1 / 3 / span 2 /span 2;
             
        }
        .container>.item3{
            background-color: aliceblue;
             grid-area: 3 / 1 / span 2 /span 2;
             
        }
        .container>.item4{
            background-color: aliceblue;
             grid-area: 3 / 3 / span 2 /span 2;
              
        }
    </style>
</body>
</html>

7. place-content: 所有项目在“容器”中的对齐方式

各项目在容器中的排列方式，是容器属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid容器/项目属性-1</title>
    <!-- em作为倍数单位，会累乘 -->
</head>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <!-- <div class="item4">4</div> -->
    </div>
    <style>
        /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
        /* 定义容器： */
        .container{
            width: 50em;
            height: 50em;
            background-color: antiquewhite;
            display: grid;
            /* 划分网格单元 */
            grid-template-columns: 10em 10em 10em 10em;
            grid-template-rows: 10em 10em 10em 10em;
            /* grid-auto-flow: row; */
             gap: 10px;
             place-content: center;
        }
        
        .container>.item1{
            background-color: aliceblue;
             grid-area: 1 / 1 / span 2 /span 2;
              
        }
        .container>.item2{
            background-color: aliceblue;
             grid-area: 1 / 3 / span 2 /span 2;
             
        }
        .container>.item3{
            background-color: aliceblue;
             grid-area: 3 / 1 / span 2 /span 2;
             
        }
        .container>.item4{
            background-color: aliceblue;
             grid-area: 3 / 3 / span 2 /span 2;
              
        }
    </style>
</body>
</html>

8. place-items: 所有项目在“网格单元”中的对齐方式

项目中的类容在项目中的排列方式，是容器属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid容器/项目属性-1</title>
    <!-- em作为倍数单位，会累乘 -->
</head>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <!-- <div class="item4">4</div> -->
    </div>
    <style>
        /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
        /* 定义容器： */
        .container{
            width: 50em;
            height: 50em;
            background-color: antiquewhite;
            display: grid;
            /* 划分网格单元 */
            grid-template-columns: 10em 10em 10em 10em;
            grid-template-rows: 10em 10em 10em 10em;
            /* grid-auto-flow: row; */
             gap: 10px;
             /* place-items: center end; */
        }
        
        .container>.item1{
            background-color: aliceblue;
             grid-area: 1 / 1 / span 2 /span 2;
             place-items: center end;
              
        }
        .container>.item2{
            background-color: aliceblue;
             grid-area: 1 / 3 / span 2 /span 2;
             
        }
        .container>.item3{
            background-color: aliceblue;
             grid-area: 3 / 1 / span 2 /span 2;
             
        }
        .container>.item4{
            background-color: aliceblue;
             grid-area: 3 / 3 / span 2 /span 2;
              
        }
    </style>
</body>
</html>

9. place-self: 某个项目在“网格单元”中的对齐方式

改变单个项目中的类容在项目中的排列方式，是项目属性

安全天天学
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css grid网格布局，以及速查属性值作用
PrimaryColor
01-12 239
网格布局属性 容器属性： 一、定义网格布局。 display:grid | inline-grid（行内网格布局） | subgrid; 说明：声明为一个网格布局。 二、创建网格列数。 grid-template-columns:1fr 1fr 1fr; 可取值单位（列举常用的）：1fr（比例。平分剩余空间），100px（像素）， 20%（百分比） ，1em（字符）， 1vw（屏幕宽度比）。 以空格分隔，有多少值就生成多少列。 说明：2fr：平分剩余空间，表示总宽度扣除其他单位
css中grid属性的使用详解
09-22
主要介绍了css中grid属性的使用详解的相关资料，详细的介绍了grid属性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS中网格布局grid的一些常见属性
wytccc的博客
10-24 241
作用于父容器：grid-template-rows、grid-template-columns、grid-template-areas、grid-template、grid-row-gap、grid-column-gap、grid-gap、justify-content、align-content、place-content、justify-items、align-items、place-items；作用于子容器：grid-area、justify-self、align-self、place--self
css之grid网格布局属性
qq_26406269的博客
12-29 432
grid-area：grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname规定网格项目的项目（两种书写方式，在单个网格里进行项目命名） grid-row-start 规定从哪一行开始显示项目 grid-column-start 规定从哪一列开始显示项目 grid-column-end 指定在哪条列线停止显示项目，或跨越多少列 grid-row-end 规定在哪条行线停止显示项目，或跨越多少行 grid-au
CSS—Grid布局之容器属性
雷雨天的雷胖子
01-17 570
目录 一、概述 二、详解 一、概述 Grid布局的属性分为两类，一类定义在容器上面，称为容器属性，一类定义在项目上面，称为项目属性。 二、详解 display属性 属性值为grid，表示当前元素采用网格布局。设为网格布局后，项目的float、inline-block、display:table-cell、vertical-align和column-*等设置将失效。 div {...
CSS Grid详解
时光清浅处，一步一安然
06-29 2631
代表每列的列宽将至少为 100px，而如果有更多的可用空间，栅格布局会将其均分给每列，因为这些列变成了 fraction 单位，而不是 px。如果按照以上，我们定义为3x3的网格，会发现和上一例子的效果是一样的。需要注意的是，我们给这个网格定义为2x3的网格，那么当它超出后，表现形式就不会受我们设置而改变。属性，但是，这还没有做任何事情，因为我们还没有定义我们希望我们的网格看起来如何。我们再看一个列子试图明白其中的奥秘，它的父元素属性设置与上例中是一样的。的前两行，所以第三行的行高是它本来的行高。
animate-css-grid：CSS网格的无痛过渡
02-23
无缝设置所有CSS网格属性的动画，包括： grid-column和grid-row grid-template-columns grid-gap 使用此脚本可以轻松地将CSS网格从一种状态优雅地过渡到另一种状态。 如果网格的内容发生更改，或者通过添加或删除类...
解析CSS中的Grid布局完全指南
12-13
Grid 是一个基于二维网格布局的系统，有了它我们可以非常方便的实现过去很复杂布局，无需再使用 float , inline-block , position 这些本质上是 hack 的方法。 CSS网格布局擅长于将一个页面划分为几个主要区域，以及...
ExtJS下grid的一些属性说明
12-12
1.界面修改(css style)： Extjs中界面风格与我们产品本身的风格有很大不同，从边框、选中行的颜色到鼠标移动到的行的颜色、菜单等，几乎都不同。Extjs对这些样式的设置都是由css完成的。如： 选中行的颜色就可用如下...
css的grid网格布局
06-02
grid布局的所有属性
jqgrid标签说明
05-08
在学习jqgrid的时候，是否遇到很多不懂的地方，在这里给出jqgrid的标签说明，希望对大家有所帮助
CSS Grid 网格布局-项目属性
qq_44704740的博客
11-11 658
代码地址 一. 项目的位置 <div class="box"> <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&
CSS网格布局grid属性详解及速查
不懂技术
08-02 436
grid网格属性速查
CSS Grid 布局完全指南(图解 Grid 详细教程)
web前端开发
01-08 924
CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通...
grid之表格属性及css函数
cfyfcyf的博客
06-19 332
css函数 repeat fit-content minmax 1、repeat： 跟踪列表的重复片段，允许大量显示重复模式的列或行以更紧凑的形式编写 可用范围：grid-template-column，grid-template-row 实例：repeat（auto-fill，minmax（50px,100px）） auto-fill:以网格项为准自动填充， auto-fit：以网格容器为准自动...
【CSS Grid网格布局】常用属性，示例代码解读
最新发布
花椒和蕊的博客
08-21 806
grid-column-start/grid-column-end/grid-row-start/grid-row-end：用于定义单个网格元素的起始位置和结束位置。grid-template-columns/grid-template-rows：用于定义网格的列和行的大小和数量。grid-auto-columns/grid-auto-rows：用于定义没有显式指定大小的网格的列和行的大小。grid-column-gap/grid-row-gap：用于定义网格的列间距和行间距。
CSS之grid布局
一只努力搬砖的打工妹纸
06-30 1378
grid布局
css之grid布局个人学习笔记
动感超人的博客
12-20 839
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”， 即先填满第一行，再开始放入第二行 （
css为什么要用浮动_渐进增强的 CSS 布局：从浮动到 Flexbox 到 Grid
weixin_39782545的博客
11-21 92
大多数主流浏览器都支持了 CSS Grid 布局。自然地，规范也成为了大小会议的热门话题之一。在参与了一些关于 Grid 布局和渐进增强的讨论后，我认为使用它还是有很大的不确定性。我听到一些很有趣的问题和发言，我想在这篇文章中讨论讨论。听到的声明和问题：1、我什么时候可以开始使用 CSS grid 布局？2、还需要好几年我才能在实际项目中使用 CSS Grid 布局，这太扯淡了。3、为了使用 CS...
css grid grid-template-columns 属性
04-05
CSS Grid中的grid-template-columns属性定义了网格容器中列的数量、大小和间隔。 语法： ``` grid-template-columns: value1 value2 value3 ...; ``` 属性值可以是以下之一： - `<length>`：指定列的固定长度。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安全天天学

你的鼓励是对我最大的鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值