CSS样式之grid 布局

爱敲代码的小李

已于 2023-09-19 15:11:21 修改

阅读量308

点赞数 1

文章标签： css 前端

于 2023-09-18 19:30:26 首次发布

本文链接：https://blog.csdn.net/li17835756262/article/details/132990983

版权

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

一、概念

1、网格容器（Grid Container）：设置了 display: grid 的父元素，成为一个网格容器，它包含了网格的所有单元格。

2、网格项目（Grid Item）：直接放置在网格容器内的元素称为网格项目，它们被放置在网格的单元格中。

3、网格行（Grid Row）：网格容器被划分为水平的行，可以通过属性 grid-template-rows 来设定行的数量和高度。

4、网格列（Grid Column）：网格容器被划分为垂直的列，可以通过属性 grid-template-columns 来设定列的数量和宽度。

通过组合这些概念，可以创建出复杂的网页布局，并使用属性如 grid-template-areas、grid-gap、justify-content、align-items 等来进一步控制布局效果。

例子：

<!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>
.wrapper {
  margin: 60px;
  
  display: grid;
  
  grid-template-columns: repeat(3, 200px);
  
  grid-gap: 20px;
  
  grid-template-rows: 100px 200px;
}
.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}

  </style>
</head>
<body>
  <div class="wrapper">
  <div class="one item">One</div>
  <div class="two item">Two</div>
  <div class="three item">Three</div>
  <div class="four item">Four</div>
  <div class="five item">Five</div>
  <div class="six item">Six</div>
</div>
</body>
</html>

二、容器属性

1、容器属性 grid-template-*

（1）repeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

grid-template-columns:100px 100px 100px; // 显示为三列每一列宽度100px 
grid-template-columns:repeat(3,100px);  //同上

grid-template-rows: 50px 50px;//显示为两行，每行为50px

（2）auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素.

.wrapper-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

（3）fr 关键字：Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr 单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。

.wrapper-3 {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

（4）minmax() 函数：minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 3fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的三倍。

.wrapper-4 {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(300px, 3fr);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

（5）auto 关键字：浏览器自己决定长度

grid-template-columns: 200px auto 200px 表示第一第三列为 200px，中间由浏览器决定长度

（6）grid-row-gap 属性：设置行间距

grid-column-gap 属性：设置列间距

grid-gap 属性：grid-row-gap 属性和grid-column-gap 属性的简写形式。

grid-gap: 10px 20px 表示行间距1px,列间距20px

（7）grid-template-areas属性

sum{grid-template-areas：'a b c'
                     'd e f'
                     'g . i';
//区域不需要利用，使用“点”表示}
sum1{
grid-area:a
}
sum2{
grid-area:b
}
sum3{
grid-area:e
}

定义一个区域是由一个或者多个单元格组成

grid-area 属性指定项目放在哪一个区域

（8）容器属性 grid-auto-flow

在网格中被自动布局的元素按照顺序排列，默认的放置顺序是"先行后列".即先填满第一行，再开始放入第二行。

row dense属性值表示换行时留下的空间可以由下面的元素填补上去。

（9）容器属性 justify-items(水平方向)/ align-items(垂直方向)

place-items : start end；这是justify-items和align-items的简写

单元格内容的对齐方式：

属性值	含义
center	居中对齐
start	开始位置
end	结束位置
stetch	拉伸（默认）

设置单元格内容的水平和垂直的对齐方式

容器中整个内容区域的对齐方式

属性值	含义
center	居中
start	开始位置
end	结束位置
stetch	拉伸（默认）
space-around	环绕对齐
space-between	两端对齐
space-evenly	平均对齐

（10）justify-self 属性、align-self 属性以及 place-self 属性

justify-self 属性：作用于单个项目，设置单元格内容的水平位置，跟justify-items 属性的用法一样。

align-self 属性：作用于单个项目，设置单元格内容的垂直位置，和align-items属性的用法一样

属性值	含义
start	对齐单元格的开始边缘
end	对齐单元格的结束边缘
center	单元格内部居中
stretch	默认，拉伸、占满单元格的整个宽度

爱敲代码的小李

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式之grid 布局

Grid布局即网格布局，是一种新的CSS布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。一、概念1、网格容器（Grid Container）：设置了的父元素，成为一个网格容器，它包含了网格的所有单元格。2、网格项目（Grid Item）：直接放置在网格容器内的元素称为网格项目，它们被放置在网格的单元格中。3、网格行（Grid Row）：网格容器被划分为水平的行，可以通过属性来设定行的数量和高度。
复制链接

扫一扫