前端 CSS 经典：grid 栅格布局

已于 2024-03-29 15:55:31 修改
阅读量1.4k 收藏 22
点赞数 20
分类专栏： 前端 CSS 经典 文章标签： 前端 css
于 2024-03-27 17:02:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64684095/article/details/137081451
版权

前言：Grid 布局是将容器划分成"行"和"列"，产生单元格，然后将"项目"分配给划分好的单元格，因为有行和列，可以看作是二维布局。

一 术语

1. 容器

采用网格布局的区域，也就是外层盒子。

2. 项目

容器包裹的一级子元素，不包含二级及其以下的子元素。当容器使用了 grid 布局，项目的 float，display 等设置都将失效。

3. 单元格

通过容器设置行列属性，切割出来的单元格。单元格不等于项目，打个比方，容器相当于一个房子，单元格相当于在房子里划分出的一个个房间，项目相当于房间里的家具等东西。

二 容器属性

demo 默认样式，未设置 grid 属性。

<template>
  <div class="container">
    <span v-for="i in 10" :class="`item${i}`">{{ i }}</span>
  </div>
</template>

<style lang="scss" scoped>
  .container {
    background: green;
    span {
      border: 1px solid;
    }
  }
</style>

1. display

设置网格布局

1.1 display: grid

项目宽度填充整行

.container {
  background: green;
  display: grid;
  span {
    border: 1px solid;
  }
}

1.2 display: inline-grid

项目宽度根据内容撑宽。

.container {
  background: green;
  display: inline-grid;
  span {
    border: 1px solid;
  }
}

2. grid-template-columns

划分容器列和列宽，可以单独或混合使用：绝对值 px，百分比 %，比例 fr，关键字 auto，函数 minmax，函数 repeat，函数 fit-content

2.1 绝对值 px

例：设置 3 列，每列宽 300px

.container {
  background: green;
  display: grid;
  grid-template-columns: 300px 300px 300px;
  span {
    border: 1px solid;
  }
}

2.2 百分比 %

例：设置 3 列，每列宽 33.33 %

.container {
  background: green;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  span {
    border: 1px solid;
  }
}

2.3 比例 fr

总宽度除以总的 fr，得到每份 fr 所占宽度，然后分给设置的列宽，例：设置 3 列，第 2 列是第 1 列的 1 倍，第 3 列是第 1 列的 3 倍

.container {
  background: green;
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
  span {
    border: 1px solid;
  }
}

2.4 关键字 auto

宽度自适应，例：设置 3 列，第 1 列 100px，第 3 列 100px，第 2 列宽度自适应

.container {
  background: green;
  display: grid;
  grid-template-columns: 100px auto 100px;
  span {
    border: 1px solid;
  }
}

2.5 函数 minmax

minmax(min, max)，用于产生一个长度范围，例：设置 3 列，第 2 列 自适应宽度在 100px 到 300px 之间，第 1 列和第 3 列宽度为 300px。

.container {
  background: green;
  display: grid;
  grid-template-columns: 300px minmax(100px, 300px) 300px;
  span {
    border: 1px solid;
  }
}

2.6 函数 repeat

repeat(n, content)，n 代表重复次数，可以是数字代表几次，可以 auto-fill 自动填充满，content 代表重复内容。例：设置 3 列，每列 1fr。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  span {
    border: 1px solid;
  }
}

例：设置每列 100px，每行自动填充最多的 100px 列

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  span {
    border: 1px solid;
  }
}

2.7 函数 fit-content

fit-content(length)，当内容小于 length，以内容为准，如果大于 length 以 leng 为长度，例：设置 3 列，每列最大宽度 200px，当小于 200px，以内容撑开宽度。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, fit-content(200px));
  span {
    border: 1px solid;
  }
}

3. grid-template-rows

划分容器行和行高，属性同 grid-template-columns 一致，比例 fr 略有不同。如果不设置项目高度，1fr 代表的高度就是项目高度，如果设置有项目设置了高度，那就以该项目的高度除以该项目所分的 fr 算出 1fr 的大小。例：设置列宽 200px，自动铺满列，不设置项目高度，第 1 行 1fr，第 2 行 2fr，第 3 行 3fr。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: 1fr 2fr 3fr;
  span {
    border: 1px solid;
  }
}

例：设置列宽 200px，自动铺满列，设置项目 item5 高度 200 px，第 1 行 2fr，第 2 行 2fr，第 3 行 3fr。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: 1fr 2fr 3fr;
  span {
    border: 1px solid;
  }
  .item5 {
    height: 200px;
  }
}

4. grid-template-areas

区域命名，区域命名形成区域一定要是矩形区域，无论是 L，凹，凸都是无效属性值。可以配合 grid-template-rows、grid-template-columns 使用。例：设置 3 列每列 100px，3 行每行 100px，通过区域命名实现如图布局。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas:
    "left top top"
    "left middle right"
    "bottom bottom right";
  span {
    border: 1px solid;
  }
  .item1 {
    grid-area: left;
  }
  .item2 {
    grid-area: top;
  }
  .item3 {
    grid-area: middle;
  }
  .item4 {
    grid-area: right;
  }
  .item5 {
    grid-area: bottom;
  }
}

5. grid-template

是 grid-template-columns、grid-template-rows 这 2 个属性的合并简写形式。

grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);

// 简写
grid-template: repeat(3, 100px) / repeat(3, 100px);

6. column-gap

列间距，支持数值和百分比。例：设置列间距为 20px。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  column-gap: 20px;
  span {
    border: 1px solid;
  }
}

7. row-gap

行间距，支持数值和百分比。例：设置行间距 10px。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  row-gap: 10px;
  span {
    border: 1px solid;
  }
}

8. grid-gap

行间距和列间距简写，grid-gap: 行间距，列间距，如果第二个值省略，默认两个值相等。例：设置行间距，列间距都为 20px。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 20px;
  span {
    border: 1px solid;
  }
}

9. grid-auto-flow

定义栅格元素的排列规则：row、column、row dense、column dense。

9.1 row

默认水平顺序排列

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  grid-auto-flow: column;
  span {
    border: 1px solid;
  }
}

9.2 column

垂直顺序排序

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  grid-auto-flow: column;
  span {
    border: 1px solid;
  }
}

10. justify-items

单元格内容水平位置设置：stretch、start、end、center

10.1 stretch

默认单元格内容水平填充单元格

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-items: stretch;
  span {
    border: 1px solid;
  }
}

10.2 start

单元格内容水平靠右

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-items: start;
  span {
    border: 1px solid;
  }
}

10.3 end

单元格内容水平靠左

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-items: end;
  span {
    border: 1px solid;
  }
}

10.4 center

单元格内容水平居中

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-items: center;
  span {
    border: 1px solid;
  }
}

11. align-items

单元格内容垂直位置：stretch、start、end、center

11.1 stretch

单元格内容垂直填充

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  align-items: stretch;
  span {
    border: 1px solid;
  }
}

11.2 start

单元格内容垂直靠上

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  align-items: start;
  span {
    border: 1px solid;
  }
}

11.3 end

单元格内容垂直靠下

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  align-items: end;
  span {
    border: 1px solid;
  }
}

11.4 center

单元格内容垂直居中

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  align-items: center;
  span {
    border: 1px solid;
  }
}

12. place-items

是 align-items 属性和 justify-items 属性的合并简写形式。如果省略第二个值，则浏览器认为与第一个值相等。例：设置单元格内容垂直和水平居中

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  place-items: center;
  span {
    border: 1px solid;
  }
}

13. justify-content

容器内容水平位置：start、end、center、stretch、space-around、space-between、space-evenly

13.1 start

默认容器内容水平靠左

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: start;
  span {
    border: 1px solid;
  }
}

13.2 end

例：设置容器内容水平靠右

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: end;
  span {
    border: 1px solid;
  }
}

13.3 center

例：设置容器内容水平居中

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: center;
  span {
    border: 1px solid;
  }
}

13.4 space-around

例：设置容器内容水平平均分布，项目间距是项目距离容器边框的两倍

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: space-around;
  span {
    border: 1px solid;
  }
}

13.5 space-between

例：设置容器内容水平平均分布，靠近容器边框项目紧贴容器，其余水平项目平均间距

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: space-between;
  span {
    border: 1px solid;
  }
}

13.6 space-evenly

例：设置容器内容水平平均分布，项目间距和项目距离容器边框间距相等

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: space-evenly;
  span {
    border: 1px solid;
  }
}

14. align-content

容器内容垂直位置：start、end、center、stretch、space-around、space-between、space-evenly，同 justify-content 属性一致。一般需要给容器设置固定高度。align-content 属性才有效。例：设置容器内容垂直居中

.container {
  height: 500px;
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 100px);
  align-content: center;
  span {
    border: 1px solid;
  }
}

15. place-content

是 align-content 属性和 justify-content 属性的合并简写形式。如果省略第二个值，浏览器就会假定第二个值等于第一个值。例：设置容器内容水平居中，垂直居中。

.container {
  height: 500px;
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 100px);
  place-content: center;
  span {
    border: 1px solid;
  }
}

三 项目属性

1. grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area

grid-column-start: number; 左边框垂直网格线

grid-column-end: number; 右边框垂直网格线

grid-column: grid-column-start / grid-column-end; 左、右边框垂直网格线简写

grid-row-start: number; 上边框垂直网格线

grid-row-end: number; 下边框垂直网格线

grid-row: grid-column-start / grid-column-end; 左、右边框垂直网格线简写

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; 上、左、下、右边框垂直网格线简写

number 值默认从 1 开始依次递增。

例：设置一个 3 列每列宽 200px，3 行每行高 200px，让内容为 1 的项目居中。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  span {
    border: 1px solid;
  }
  .item1 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background: red;
  }
}

// grid-column、grid-row 简写
.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  span {
    border: 1px solid;
  }
  .item1 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background: red;
  }
}

// grid-area 简写
.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  span {
    border: 1px solid;
  }
  .item1 {
    grid-area: 2 / 2 / 3 / 3;
    background: red;
  }
}

2. justify-self

单元格内容的水平位置，同 justify-items 但只作用于单个项目。赋值：start、end、center、stretch。

3. align-self

单元格内容的垂直位置，同 align-items 但只作用于单个项目。赋值：start、end、center、stretch。

4. place-self

justify-self 和 align-self 简写，同 place-items 但只作用于单个项目。只有一个值时，第二个值默认与第一个值相同。

yqcoder
关注
  • 20
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
grid栅格布局
yanyihan16的博客
05-27 483
一、使用 .grid{ display: grid } .grid{ display: inline-grid } 二、容器划分 定义横、纵网格轨道。 <style> .grid { display: grid; grid-template-columns: 60px 60px 60px 60px; grid-template-rows: 60px...
CSS栅格布局（Grid）
ct5211314的博客
12-05 7369
今天写页面布局，突然想到了栅格布局，以往习惯了弹性布局，然后发现栅格布局有点香，然后就简单的整理了一下，用于学习与分享。 可以理解为将一个元素分成行列，然后可以设置对应的大小、布局、位置。 划分行列 使用 grid-template-columns 划分列数使用 grid-template-rows 划分行数假定一个需求，在一个容器内，左右列表，默认展示4列2行。（画的有点丑，哈哈哈哈）通过栅格布局进行页面的绘制。 上面代码发现，页面超出部分，高度不是25%了，那是因为容器外
【CSS3】flex布局实践篇 | 7种常见网页布局方案
weixin_57031986的博客
01-31 3156
【CSS3】flex布局实践篇 | 7种常见网页布局方案
CSS栅格系统
qq_18879887的博客
05-31 796
*内容标签*/ width : 400px;/*设置行间距设置列间距组合定义：设置行列间距为20px与10px} div {/*背景被裁剪到内容框*/ } </ style >/*内容标签*/ width : 400px;/*设置行间距设置列间距组合定义：设置行列间距为20px与10px} div {/*背景被裁剪到内容框*/ } </ style >/*内容标签*/ width : 400px;/*设置行间距。
grid布局
weixin_30698297的博客
06-01 110
经历过表格布局，浮动布局，flex布局。网页布局是越来越方便，下面讲的是grid布局，一些基本的grid基础知识 《1》网格布局的相关基本概念 1.容器和项目 容器：采用网格布局的区域 项目：容器内部采用网格定位的子元素 <div class="box"> <div class="item"&gt...
浅谈CSS 栅格系统布局原理分析
09-27
CSS栅格系统通过浮动、Flexbox或Grid布局等技术实现了页面元素的响应式排列。Bootstrap、Foundation和Pure等框架提供了现成的栅格系统，简化了开发过程。理解这些原理有助于开发者自定义和构建更符合项目需求的栅格...
前端经典学习项目案例，模仿飞灵网全站HTML+CSS源码
03-15
CSS3引入了新的布局模型如Flexbox和Grid，还有过渡、动画和3D变换等功能，让网页更具视觉吸引力。 3. jQuery：这是一个流行的JavaScript库，简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery使得前端代码更...
web前端开发常用布局demo
09-20
3. **栅格布局（Grid Layout）** 栅格系统是一种将页面划分为多个等宽或等高的单元格，用于组织内容。CSS Grid布局是现代浏览器支持的一种强大的二维布局系统，允许开发者在行和列上精确控制元素的位置。 4. **...
前端基础学习（HTML、css、UI框架、JS）
最新发布
06-05
CSS 布局技术包括流体布局、网格布局（如 CSS Grid）、Flexbox（弹性盒布局）和 CSS3 的绝对定位。此外，CSS 还提供了媒体查询，以实现响应式设计，使网页适应不同设备的屏幕尺寸。 3. JavaScript JavaScript 是一...
CSS3自适应手机布局效果
06-01
9. **前端框架**：像Bootstrap这样的前端框架提供了预设的响应式布局组件，如栅格系统，大大简化了自适应布局的开发。 在提供的压缩包文件中，`index.html`可能是包含这些CSS3自适应布局技术的实际网页文件；`...
前端开发_HTML5_布局-栅格布局
u013185175的博客
12-21 4835
栅格布局 1.引入 我们之前学习了多个布局的方式，下面我们一起来学习一种比较重要的布局方式：栅格布局。栅格布局是一种较为特殊的弹性布局，栅格(grid)是一种自适应布局，能根据不同终端自动伸缩容器的宽高。flex根据轴线(axis)布局，看起来像是一维布局；而grid针对网格线(grid line)布局，看起来更像是二维布局。 在我们熟知的常用前端框架中都可以发现栅格布局的系统实现，如常用的bootstrap等，我们可以把栅格布局看成是类似Excel表格一样，把整个页面按照不同比例的格子划...
grid栅格布局详解
三季人的博客
11-17 6767
一、概述 如果说flex是为一维布局而存在的，那么grid是为二维布局而存在的。 grid布局被称为栅格布局，也被称为网格布局，他可以将网页划分为许多个方格，我们可以在网格中填充自己的内容。 二、grid布局的基本内容 1、术语 如下图 栅格线：图中，横向或者纵向的一条线 栅格轨道：由两条相邻栅格线所包围的部分 栅格区域：由栅格线包围的矩形区域 栅格单元：最小的栅格区域 2、定义 指定容器采用网格结构通过指定它的display属性值为grid或inline-grid。 grid表示指示容器采用块级结构。
Web前端开发之CSS学习笔记10—栅格布局（网格布局）
qq_45709187的博客
05-30 4524
目录【网格布局grid】1.网格布局的构成 2.父容器grid container3.生成网格容器 display:grid/inline-grid4.构建网格 grid-template-columns/grid-template-rows（1）grid-template-columns（2）grid-template-rows5.定位空间 grid-template-areas和grid-area4.设置间隙grid-gap5.网格对齐方式（1）justify-content ：区域内容的水平对齐（2）
前端之css grid网格布局
weixin_46372074的博客
07-13 376
Grid 布局​ 与 ​Flex 布局​有一定的相似性，都可以指定容器内部多个项目的位置。 二、添加网格结构（行和列） 每个数值代表列的宽度, 数值的个数就是列数 2. 在父容器中设置行 每个数值代表行高, 数值的个数就是行数 3. 使用 CSS 网格单位设置列和行的大小 类似于ps绝对定位单位, em相对(父元素)定位单位,rem相对(根元素)定位单位 CSS 网格单位的相对定位单位是fr (fraction 片段) 按比例占领剩余尺寸 auto 根据内容占据尺寸 % 按百分比占领剩余尺寸...
前端网格布局
m0_51621504的博客
03-06 587
概念 将一个盒子划分成多个单元格，指定内容放在指定的单元格中，实现一种比较整齐的布局方式。 容器属性： display: grid/inline-grid; grid可以将元素转为块元素，inline-grid可以将元素转为行内元素。 <style> span{ width: 100px; height: 100px; border:3px solid #000; } .sp2{ disp...
Grid网格布局
weixin_44543519的博客
05-17 630
作者：李嘉乐 本次任务完成时间：2019年5月9日～2019年5月17日 开发工具与关键技术： VS2015、WPF 在XAML中有五个布局元素分别是：Grid、 DockPanel 、StackPanel、 WrapPanel 、Canvas，每个布局元素都有着自己的特点，现在我分享的是Grid布局。Grid 布局又叫网格布局。它是通过自定义行和列，并通过行列的数量、行高列宽来调整控件的布局元素...
css flex布局与grid布局
07-12
CSS的Flex布局和Grid布局都是用于网页布局的强大工具，它们有着不同的特点和用途。 Flex布局（也称为弹性布局）是一种一维布局模型，可以在水平或垂直方向上对元素进行灵活的排列和对齐。通过设置容器和子元素的属性，可以实现自适应、响应式的布局。常用的Flex属性包括：flex-direction、justify-content、align-items等。 Grid布局（也称为栅格布局）是一种二维布局模型，可以将页面划分为行和列，并通过设置网格容器和网格项的属性来实现灵活的布局。Grid布局非常适合复杂的页面结构和网格系统的设计。常用的Grid属性包括：grid-template-columns、grid-template-rows、grid-gap等。 Flex布局适用于需要在一条轴线上进行排列和对齐的简单布局，例如导航菜单、列表等。而Grid布局适用于需要在二维空间内进行精确布局和定位的复杂布局，例如网格系统、网页主体等。 在实际应用中，可以根据具体的布局需求选择使用Flex布局或Grid布局，也可以将它们结合使用以实现更复杂的布局效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

yqcoder

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值