CSS Grid 网格布局-容器属性

最新推荐文章于 2023-03-16 14:46:50 发布
最新推荐文章于 2023-03-16 14:46:50 发布
阅读量832 收藏 1
点赞数
文章标签： css 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44704740/article/details/121266886
版权

代码地址

一. display: grid

<span>foo</span>
<div class="box">
  <div class="item"><p>1</p></div>
  <div class="item"><p>2</p></div>
  <div class="item"><p>3</p></div>
</div>
<span>bar</span>

指定一个容器(box)采用网格布局。容器的直接子元素(item)为项目

.box {
  display: grid;
}

在这里插入图片描述
也可以使用grid的同时将元素设置为行内元素

.box {
  display: inline-grid;
}

在这里插入图片描述

二. grid-template-columns、grid-template-rows

容器指定了网格布局以后，接着就要划分行和列。

grid-template-columns属性定义每一列的列宽。

grid-template-rows属性定义每一行的行高。

它的值以及详细用法如下：

<div class="box">
    <div class="item">
      <p>1</p>
    </div>
    <div class="item">
      <p>2</p>
    </div>
    <div class="item">
      <p>3</p>
    </div>
    <div class="item">
      <p>4</p>
    </div>
    <div class="item">
      <p>5</p>
    </div>
    <div class="item">
      <p>6</p>
    </div>
    <div class="item">
      <p>7</p>
    </div>
    <div class="item">
      <p>8</p>
    </div>
    <div class="item">
      <p>9</p>
    </div>
    <div class="item">
      <p>10</p>
    </div>
    <div class="item">
      <p>11</p>
    </div>
    <div class="item">
      <p>12</p>
    </div>
    <div class="item">
      <p>13</p>
    </div>
    <div class="item">
      <p>14</p>
    </div>
    <div class="item">
      <p>15</p>
    </div>
    <div class="item">
      <p>16</p>
    </div>
    <div class="item">
      <p>17</p>
    </div>
    <div class="item">
      <p>18</p>
    </div>
    <div class="item">
      <p>19</p>
    </div>
    <div class="item">
      <p>20</p>
    </div>
    <div class="item">
      <p>21</p>
    </div>
    <div class="item">
      <p>22</p>
    </div>
    <div class="item">
      <p>23</p>
    </div>
    <div class="item">
      <p>24</p>
    </div>
  </div>

.box {
  display: grid;
  /* 绝对单位 */
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px;

  /* 百分比 */
  grid-template-columns: 33.333% 33.333% 33.333%;
  grid-template-rows: 100px;

  /* repeat(重复的次数, 重复的值) */
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(1, 100px);

  /* repeat(重复的次数, 重复的模式) */
  grid-template-columns: repeat(3, 100px 120px);
  grid-template-rows: repeat(2, 50px 100px);

  /* auto-fill 关键字, 自动填充, 实现N个相同的正方形填满容器 */
  height: 500px;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows: repeat(auto-fill, 100px);

  /* fr 关键字, 比例关系, 实现双飞翼布局 */
  grid-template-columns: 200px 1fr;
  grid-template-rows: 100px;

  /* minmax(最小值, 最大值) */
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);
  grid-template-rows: 100px;

  /* auto 关键字 表示由浏览器自己决定长度。圣杯布局 */
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 100px;

  /* 网格线的名称 */
  /* 上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。*/
  /* 方括号里面依次是这八根线的名字。网格布局允许同一根线有多个名字，比如[fifth-line row-5]。 */
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4 列4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

.box > .item:nth-of-type(1) {
  background-color: aqua;
}
.box > .item:nth-of-type(2) {
  background-color: salmon;
}
.box > .item:nth-of-type(6) {
  background-color: brown;
}
.box > .item:nth-of-type(9) {
  background-color: blueviolet;
}
.box > .item:nth-of-type(16) {
  background-color:tomato;
}
.box > .item:nth-of-type(19) {
  background-color:yellowgreen;
}

三. grid-gap

<div class="box">
 <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 class="item">7</div>
 <div class="item">8</div>
 <div class="item">9</div>
</div>

.box {
  background-color: #daa520;
  
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  /* 列间距 */
  /* grid-column-gap: 12px; */
  /* 行间距 */
  /* grid-row-gap: 12px; */
  /* 简写 grid-gap: <grid-row-gap> <grid-column-gap>; */
  /* 根据最新标准，上面三个属性名的grid-前缀已经删除 */
  /* grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap */
  grid-gap: 12px 24px;
}

.box .item {
  background-color: #ccc;
}

在这里插入图片描述

四. grid-template-areas

<div class="box">
	<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 class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
</div>

.box {
   display: grid;
   grid-template-columns: repeat(3, 100px);
   grid-template-rows: repeat(3, 100px);

   /* grid-template-areas属性用于定义区域。 */
   /* grid-template-areas: 'tl tc tr''cl cc cr''bl bc br'; */
   /* 多个单元格合并成一个区域的写法如下。 */
   /* grid-template-areas: 'a a a''b b b''c c c'; */
   /* 如果某些区域不需要利用，则使用"点"（.）表示。*/
   grid-template-areas: 'a . c''d . f''g . i';
 }

 .box .item {
   background-color: #ccc;
 }

在这里插入图片描述

五. grid-auto-flow

<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</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

.box {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  
  /* 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。*/
  /* 默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行 */
  /* grid-auto-flow: row; */
  /* 这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。 */
  /* grid-auto-flow: column; */

  /* 某些项目(item-1 item-2)指定位置以后，剩下的项目怎么自动放置 */
  /* 现在修改设置，设为row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。 */
  /* grid-auto-flow: row dense; */

  /* 如果将设置改为column dense，表示"先列后行"，并且尽量填满空格。 */
  grid-template-columns: repeat(4, 100px);
  grid-auto-flow: column dense;
}

.item {
  font-size: 4em;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.item-1 {
  background-color: #ef342a;
  grid-column-start: 1;
  grid-column-end: 3;  
}

.item-2 {
  background-color: #f68f26;
  grid-column-start: 1;
  grid-column-end: 3; 
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

.item-6 {
  background-color: #f8d29d;
}

.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
}

.item-9 {
  background-color: #4dc7ec;
}

在这里插入图片描述

六. place-items

<div class="box">
  <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 class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

<!-- --------水平垂直居中--------- -->
<div class="aaa">
  <div class="bbb"></div>
</div>
<!-- --------水平垂直居中--------- -->

.box {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);

  /* justify-items属性设置单元格内容的水平位置（左中右） */
  /* align-items属性设置单元格内容的垂直位置（上中下）。 */
  /* 可选值: start | end | center | stretch（默认） */
  justify-items: center;
  align-items: center;
  /* place-items属性是align-items属性和justify-items属性的合并简写形式。 */
  place-items: start end;
  /* 如果省略第二个值，则浏览器认为与第一个值相等。 */
  place-items: center;
}

.box .item {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #ccc;
}
/* 水平垂直居中 */
.aaa {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  background-color: #999;
}
.bbb {
  width: 50px;
  height: 50px;
  background-color: bisque;
}

在这里插入图片描述

七. place-content

 <div class="box">
  <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 class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

.box {
 display: grid;
 grid-template-columns: repeat(3, 100px);
 grid-template-rows: repeat(3, 100px);

 /* justify-content属性是整个内容区域在容器里面的水平位置（左中右） */
 /* align-content属性是整个内容区域的垂直位置（上中下） */
 /* 可选值 start | end | center | stretch | space-around | space-between | space-evenly */
 justify-content: center;
 height: 500px;
 background-color: beige;
 align-content: center;

 /* space-around - 每个项目两侧的间隔相等, 所以，项目之间的间隔比项目与容器边框的间隔大一倍。 */
 justify-content: space-around;

 /* space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。 */
 justify-content: space-evenly;

 /* place-content属性是align-content属性和justify-content属性的合并简写形式。 */
 /* 如果省略第二个值，浏览器就会假定第二个值等于第一个值。 */
 place-content: end;
 
}

.box .item {
 width: 40px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 background-color: #ccc;
}

在这里插入图片描述

八. grid-auto-columns、grid-auto-rows

<div class="box">
  <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 class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
</div>

.box {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);

  /* 有时候，一些项目的指定位置，在现有网格的外部。*/
  /* 比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。 */
  /* grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高 */
  /* 剩余项目的grid-auto-columns、grid-auto-rows与grid-auto-flow有关 */
  grid-auto-flow: column;
  grid-auto-columns: 200px 100px 100px;/* grid-auto-flow: row;时失效 */
  grid-auto-rows: 200px 100px 100px;  /* grid-auto-flow: column;时失效 */
  
}

.box .item {
  background-color: #ccc;
}

在这里插入图片描述

前端Jason
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
5分钟掌握Grid布局【多图示例】
weixin_34187862的博客
04-20 1491
Grid布局一览 网格系统 生成网格系统：display:gird "画"一个网格出来： grid-template-columns/rows 圈地为王（"画"一个元素）：grid-column/row 可视化布局：grid-template-areas 给网格设置gap 富余空间管理 越界处理与grid-auto-columns 自动放置与grid-auto-flow 其它现象 ...
web学习 -- css Grid 网格布局一基本概念与容器属性
qq_39273039的博客
08-04 453
将网页划分为一个个网格，可以任意组合不同的网格，做出各种各样的布局。 采用网格布局的区域，称为"容器"（container）。
display：grid 栅格布局教程
Zpy1144的博客
03-16 2722
display：grid，它更像是 flex 的升级版 布局上十分强大。
CSS面试题】实现一个在页面中垂直居中的正方形中有四个上下左右间距相等的小正方形
qq_37820129的博客
07-22 1143
面试题目： 编写css，实现一个前端样式：在一个大正方形内有四个相等的小正方形。要求大正方形上下左右居中， 每一个小正方形上下左右距离相等。 实现效果图 使用grid布局分割，然后划出来四块之后再使其中的四个div垂直居中。我以为这样已经实现了需求，但是后来发现是上下左右距离相等，这样的四个红色的方块彼此之间的距离是到边框距离的二倍。 代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta name
关于grid布局
du_aitiantian的博客
12-20 2460
前端，面试，css，grid布局
css-网格布局-详情
08-01
1. `display` 属性：设置为`grid`或`inline-grid`可使容器采用网格布局。`grid`使其成为块级元素，`inline-grid`则将其设为行内元素。例如： ```css .wrapper { display: grid; } ``` 2. `grid-template-...
CSS Grid 网格布局全解析
09-24
《CSS Grid 网格布局全解析》 CSS Grid（网格布局）是现代网页设计中一个强大的工具，它使得创建复杂、响应式的二维布局变得轻松简单。Grid布局摒弃了传统布局模式的限制，让我们可以自由地定义网页的行和列，以及...
CSS Grid 网格布局教程.docx
03-30
CSS Grid 网格布局是现代网页设计中的一个重要工具，它提供了一种高效且灵活的方式来组织页面内容。相比传统的布局方式，如浮动和定位，CSS Grid 提供了二维的布局能力，可以轻松创建复杂的网格系统。 一、CSS Grid...
css3-grid-layout.rar_CSS3_DEMO_divisiondml_六边形_网格布局
09-21
这个名为“css3-grid-layout.rar”的压缩包包含了一个名为“css3-grid-layout”的文件，它是一个DEMO，用于演示如何使用CSS3实现六边形网格布局，这对于学习和应用CSS3布局技巧非常有帮助。 首先，我们要了解CSS3 ...
CSS-自适应正方形的实现
qq_40007317的博客
11-26 1414
1、效果展示 html结构如下： <body> <div class="card-box"> <div class="card"></div> </div> </body> 2、实现方法 （1）设置垂直方向的padding 在 CSS 中，margin 和 padding 的百分比是相对于父元素的宽度来计算...
CSS Grid 系列(上)-Grid布局完整指南
weixin_33834910的博客
01-18 551
by Chris House 译者：若愚老师想要更好的阅读体验可在饥人谷技术博客 查看原文 CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。 你可以通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（网格元素），来...
将Gridview的item项设置成正方形
小欣儿的专栏
12-15 3474
今天来讲一个炒鸡简单的例子啊，就是将Gridview的item项设置成正方形的，首先新建一个自定义的view让它集成LinearLayout或者RelativeLayout，这个根据个人布局来定啊，最后重写onMeasure方法啊，然后在使用时，使用SquareLayout作为父布局啊。太简单了，直接上代码吧。嘿嘿public class SquareLayout extends RelativeL
网格布局的简单应用（display: grid;）
weixin_46236141的博客
03-01 686
我们在做布局的时候经常会发现有些地方的宽高排列都非常规则，而且有多行内容，这时使用网格（grid）布局就非常的方便快捷了。那么接下来我们做个简单的九宫格来看看该如何使用该布局： 实例 很明显九宫格就是九个小方块，那么我们可以用一个大盒子去套九个小盒子： <div id="main"> <div class="box1"></div> ...
display：grid布局
MorningDuGe
01-17 2万+
grid布局即网格布局，每个网格都有起止线，每两条线之间都有设定好的距离 1. 网格列宽设置 首先设置网格的父级元素display：grid grid-template-colums:100px 10px 100px 10px 100px; 表示第1列100px，第2列10px(此列可作为列与列之间的间隙) 2.网格高度设置 grid-template-rows:au
关于GridView宽高的问题(转载rain的文章)
otc_yan的专栏
08-07 1030
现在在Android应用中，GridView中每个Item都是正方形的场景越来越常见。比如 陌陌 的搜索结果界面 陌陌的搜索界面显示 Android手机和IPhone不同， IPhone硬件是苹果自己出的，屏幕尺寸基本没啥太大差别，所以很好适配。 而Android就不一样了，中高低档手机都有，屏幕尺寸严重不统一，如何做到一种实现适配各种Android手机屏幕才是关键。 今天我们
[LeetCode] Magic Squares In Grid 网格中的神奇正方形
weixin_30614109的博客
02-19 128
A 3 x 3 magic square is a 3 x 3 grid filled with distinct numbersfrom 1 to 9such that each row, column, and both diagonals all have the same sum. Given angridof integers, how many 3 x 3 "m...
网格布局display: grid；
热门推荐
weixin_51264427的博客
08-12 2万+
什么是网格布局 是一种强大的CSS布局方案，它将网页划分成一个个网格，可以任意组合的网格（类似excel） 网格布局是CSS3的布局系统 与弹性布局类似 网格可以理解成是二维布局（弹性布局是一维的） 可以使用align-item justify-content等属性 IE11部分支持 display:grid 设置该元素为网格容器 display: grid; grid-template-columns： 列宽 <!DOCTYPE html&gt...
对于css的display与span的重新认识
钢铁之家
07-26 1207
最近学习vue技术，在v-show、v-if 指令的官方介绍中，看到这么一句话：v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 原来只是单纯记得：     visibility=hidden，隐藏元素，位置还在；     display=none，隐藏元素，位置不在。 一直认为一旦设置display=none，该元素...
CSS Grid布局：合并单元格布局
01-07 1137
《CSS Grid布局：网格单元格布局》一文中通过一些简单的实例介绍了如何给容器定义网格，并且怎么使用网格线或者网格区域来实现单元格这样的简单的布局。在文章结尾之处也提到过，这样的单元格如同表格一样，仅仅一个个独立的单元格是无法满足一些复杂的Web布局，我们需要将多个单元格合并在一起，拼装成一个稍为复杂一点的布局。简单点说，就是由单元格慢慢过渡到具有合并单元格的布局（在脑海中想想曾经爱过的tabl
grid-template-columns 属性和 grid-template-rows 属性
最新发布
04-24
grid-template-columns属性和grid-template-rows属性是用于定义网格布局中的列和行的属性。 1. grid-template-columns属性定义了网格布局中的列。可以通过指定列的宽度来创建不同大小的列。可以使用长度单位（如像素、百分比、自动等）或者使用repeat()函数来定义多个相同大小的列。例如，下面的代码将创建一个包含3列的网格布局，每列的宽度为200像素： ```css .grid-container { display: grid; grid-template-columns: 200px 200px 200px; } ``` 2. grid-template-rows属性定义了网格布局中的行。与grid-template-columns类似，可以通过指定行的高度来创建不同大小的行。同样可以使用长度单位或者repeat()函数来定义多个相同大小的行。例如，下面的代码将创建一个包含2行的网格布局，第一行的高度为100像素，第二行的高度为50%： ```css .grid-container { display: grid; grid-template-rows: 100px 50%; } ``` 这些属性可以通过网格容器的CSS类来设置，以实现自定义的网格布局。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值