速通栅格布局（Grid Layout），只有干货，没有废话

最新推荐文章于 2025-02-28 09:23:52 发布
最新推荐文章于 2025-02-28 09:23:52 发布
阅读量2.9k 收藏 44
点赞数 38
分类专栏： CSS进阶 文章标签： 前端 css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45751819/article/details/143103033
版权

栅格布局：CSS网格布局是CSS中最强大的布局系统，因为它是二维系统，这意味着它可以同时处理列和行。

学习栅格布局，最重要的几个基础概念一定要清楚：单元格、栅格线、行、列、区域

一、声明容器

类似块级（block）容器，可以直接声明是栅格（grid），也可以声明（inline-grid）

display: grid;
display: inline-grid;

二、划分行和列

使用 grid-template-columns 规则可划分列数，使用 grid-template-rows 划分行数。

<!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>
      .container {
        width: 300px;
        height: 200px;
        /* 声明网格布局 */
        display: grid;
        /* 声明2行，行高100px */
        grid-template-rows: 100px 100px;
        /* 声明3列，列宽100px */
        grid-template-columns: 100px 100px 100px;
        border: 1px solid red;
      }
      .box {
        background-color: antiquewhite;
        padding: 10px;
        box-sizing: border-box;
        background-clip: content-box;
        border:1px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </body>
</html>

划分行和列也可以采用百分比的形式

display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 25% 25% 25% 25%;

还可以使用比例划分

display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;

上面的代码中有些地方是可以简化的，比如行和列的设置

width: 300px;
height: 100px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);

有些时候，会遇到这种情况，有三个单元格，第一个和第二个宽度（高度）确定，第三个自适应，这时候给这个设置auto属性

<style>
  main {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: 20vw auto 30vw;
  }
  div {
    background: blueviolet;
    border: solid 1px #ddd;
    color: white;
    padding: 5px;
  }
</style>
<main>
  <div href="">css</div>
  <div href="">html</div>
  <div href="">javascript</div>
</main>

间距定义

//行间距
row-gap 
//列间距
row-column-gap
//一次性定义行间距 列间距
gap
<!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>
      .container {
        width: 300px;
        height: 200px;
        /* 声明网格布局 */
        display: grid;
        /* 声明2行，行高100px */
        grid-template-rows: repeat(2, 1fr);
        /* 声明3列，列宽100px */
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid red;
        /* 设置行间距 */
        /* row-gap: 10px; */
        /* 设置列间距 */
        /* column-gap: 10px; */
        gap: 10px;
      }
      .box {
        background-color: antiquewhite;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid blue;
        background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </body>
</html>

栅格命名（不重要，这个比较麻烦，后面有简化写法）

栅格线可以使用命名与编号找到，方便控制指定栅格，或将内容添加到指定栅格中

命名可以独立命名也可以重复命名

grid-row-start: r2-start;//行开始栅格线
grid-column-start: c1-end;//列开始栅格线
grid-row-end: r2-end;//行结束栅格线
grid-column-end: c3-start;//列结束栅格线

独立命名

<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        padding-top: 50px;
    }

    article {
        margin: 0 auto;
        width: 300px;
        height: 300px;
        border: solid 5px silver;
        display: grid;
        grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];

        grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];
    }

    div {
        background: blueviolet;
        background-clip: content-box;
        border: solid 1px blueviolet;
        padding: 10px;
        box-sizing: border-box;
        color: white;
    }

    div:first-child {
        grid-row-start: r2-start;
        grid-column-start: c1-end;
        grid-row-end: r2-end;
        grid-column-end: c3-start;
    }
</style>
...

<article>
	<div>栅格命名</div>
</article>

自动命名（针对重复设置的栅格系统会自动命名）

<style>
    article {
        margin: 0 auto;
        width: 300px;
        height: 300px;
        border: solid 5px silver;
        display: grid;
        grid-template-rows: repeat(3, [r-start] 100px [r-end]);
        grid-template-columns: repeat(3, [c-start] 100px [c-end]);
    }

    div {
        background: blueviolet;
        background-clip: content-box;
        border: solid 1px blueviolet;
        padding: 10px;
        box-sizing: border-box;
        color: white;
    }

    div:first-child {
        grid-row-start: r-start 2;
        grid-column-start: c-start 2;
        grid-row-end: r-start 2;
        grid-column-end: c-end 2;
    }
</style>
...

<article>
	<div>栅格命名</div>
</article>

元素定位

1、根据栅格命名（就是上面的独立命名）

2、根据自动命名（就是上面的自动命名）

3、通过设置具体的第几条栅格线来设置区域位置

<style>
    article {
        margin: 0 auto;
        width: 300px;
        height: 300px;
        border: solid 5px silver;
        display: grid;
        grid-template-rows: repeat(3,100px);
        grid-template-columns: repeat(3,100px);
    }

    div {
        background: blueviolet;
        background-clip: content-box;
        border: solid 1px blueviolet;
        padding: 10px;
        box-sizing: border-box;
        color: white;
    }

    div:first-child {
        grid-row-start:2;
        grid-column-start:2;
        grid-row-end:2;
        grid-column-end:2;
    }
</style>
...

<article>
	<div>栅格命名</div>
</article>

4、根据偏移量

<style>
    article {
        margin: 0 auto;
        width: 300px;
        height: 300px;
        border: solid 5px silver;
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(3, 1fr);
    }

    div {
        background: blueviolet;
        background-clip: content-box;
        border: solid 1px blueviolet;
        padding: 10px;
        box-sizing: border-box;
        color: white;
        font-size: 25px;
    }

    div:first-child {
        grid-row-start: 2;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
    }
</style>
...

<article>
	<div>栅格定位</div>
</article>

简写模式

1、可以使用 grid-row 设置行开始和结束栅格线，使用 grid-column 设置列开始和结束栅格线。

grid-row: 2/4;
grid-column: 2/4;

2、grid-area更加简洁，同时对 grid-row 与 grid-column 属性的组合声明

//语法结构
grid-row-start/grid-column-start/grid-row-end/grid-column-end。

如下所示

<!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>
      .container {
        width: 300px;
        height: 200px;
        /* 声明网格布局 */
        display: grid;
        /* 声明2行，行高100px */
        grid-template-rows: repeat(2, 1fr);
        /* 声明3列，列宽100px */
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid red;
        /* 设置行间距 */
        /* row-gap: 10px; */
        /* 设置列间距 */
        /* column-gap: 10px; */
        gap: 10px;
      }
      .box {
        background-color: antiquewhite;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid blue;
        background-clip: content-box;
        /* grid-row: 1/3; */
        /* grid-column: 2/4; */
        grid-area: 1/2/3/4;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

布局

语法结构

 grid-template:
      '栅格名称 栅格名称 栅格名称 栅格名称' 行高
      '栅格名称 栅格名称 栅格名称 栅格名称' 行高
      '栅格名称 栅格名称 栅格名称 栅格名称' 行高/列宽 列宽 列宽 列宽;

示例

<!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>
      .container {
        display: grid;
        grid-template: 'header header header' 100px 'aside main main' 400px 'footer footer footer' 1fr;
        width: 800px;
        height: 600px;
      }
      .header {
        background-color: red;
        grid-area: header;
      }
      .main {
        background-color: yellow;
        grid-area: main;
      }
      .aside {
        background-color: green;
        grid-area: aside;
      }
      .footer {
        background-color: blue;
        grid-area: footer;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header"></div>
      <div class="main"></div>
      <div class="aside"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

占位符的使用

<!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>
      .container {
        display: grid;
        grid-template: 'header . . ' 100px 'aside main main' 400px 'footer footer footer' 1fr;
        width: 800px;
        height: 600px;
      }
      .header {
        background-color: red;
        grid-area: header;
      }
      .main {
        background-color: yellow;
        grid-area: main;
      }
      .aside {
        background-color: green;
        grid-area: aside;
      }
      .footer {
        background-color: blue;
        grid-area: footer;
      }
      .box {
        background-color: pink;
        grid-area: 1 / 3 / 2 / 4;
      }
      .logo {
        background-color: purple;
        grid-area: 1 / 2 / 1 / 2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header"></div>
      <div class="box"></div>
      <div class="logo"></div>
      <div class="main"></div>
      <div class="aside"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

关于栅格对齐

选项说明对象
justify-content所有栅格在容器中的水平对齐方式，容器有额外空间时栅格容器
align-content所有栅格在容器中的垂直对齐方式，容器有额外空间时栅格容器
align-items栅格内所有元素的垂直排列方式栅格容器
justify-items栅格内所有元素的横向排列方式栅格容器
align-self元素在栅格中垂直对齐方式栅格元素
justify-self元素在栅格中水平对齐方式栅格元素

栅格对齐属性

justify-content 属性的值如下

值说明
start容器左边
end容器右边
center容器中间
stretch撑满容器
space-between第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间
space-around每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍
space-evenly栅格间距离完全平均分配

align-content 属性的值如下

值说明
start容器顶边
end容器底边
center容器垂直中间
stretch撑满容器
space-between第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间
space-around每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍
space-evenly栅格间距离完全平均分配

元素对齐属性

justify-items 与 align-items 用于控制所有栅格内元素的对齐方式

justify-items 用于控制元素的水平对齐方式，可用的属性值如下

值说明
start元素对齐栅格的左边
end元素对齐栅格的右边
center元素对齐栅格的中间
stretch水平撑满栅格

align-items 用于控制元素的垂直对齐方式，可用的属性值如下

值说明
start元素对齐栅格的顶边
end元素对齐栅格的底边
center元素对齐栅格的垂直中间
stretch垂直撑满栅格

示例

<!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>
      main {
        display: grid;
        width: 100vw;
        height: 100vh;
        grid-template: 10vh 20vh / 20vw 10vw;
        justify-content: center;
        align-content: center;
        /* justify-items: center;
        align-items: center; */
      }
      div {
        background: blueviolet;
        border: solid 1px #ddd;
        color: white;
        padding: 5px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      div:nth-child(1) {
        background-color: #3498db;
      }
      div:nth-child(2) {
        background-color: #f1c40f;
      }
      div:nth-child(3) {
        background-color: #2ecc71;
      }
      div:nth-child(4) {
        background-color: #9b59b6;
      }
    </style>
  </head>
  <body>
    <main>
      <div href="">web</div>
      <div href="">css</div>
      <div href="">javascript</div>
      <div href="">前端三件套</div>
    </main>
  </body>
</html>

以上就是栅格布局的全部内容了，赶紧学起来吧！

css【详解】grid布局—— 网格布局（栅格布局）
朝阳39的博客
04-11 6万+
目录 gird布局 和 flex布局的区别 Grid 布局的基本术语 网格布局的使用方法 启用网格布局display: grid 划分列grid-template-columns 绝对值 px 百分比值 % 比例值 fr auto值 minmax()函数值 repeat()函数值 划分行grid-template-rows 自动填充auto-fill 给网格线命名 [] 设置行/列的间距 指定区域 不属于任何区域的单元格，用.表示 多个单元格合并成一个区域 改...
GridLayout 用法
07-01
GridLayout 用法 简洁明了 方便学习
Android 布局系列（五）：GridLayout 网格布局的使用
最新发布
weixin_39339407的博客
02-28 1837
通过这次实现，我们展示了如何利用 GridLayout 布局来创建一个简单而实用的计算器界面。GridLayout 提供了灵活的网格系统，让我们能够轻松地安排和对齐每个按钮，确保布局既美观又符合用户的操作习惯。虽然我们实现的只是一个基础的计算器界面，但通过这种布局方式，开发者可以进一步扩展功能，比如添加更多的操作符、实现历史记录、支持更多复杂的计算等。总的来说，GridLayout 是一个功能强大的布局工具，在很多需要精确对齐和分布的场景下都能大显身手。
GridLayout(网格布局)
热门推荐
Android移动开发者的专栏
05-26 5万+
前言: 作为android 4.0 后新增的一个布局,与前面介绍过的TableLayout(表格布局)其实有点大同小异; 不过新增了一些东东 ①跟LinearLayout(线性布局)一样,他可以设置容器中组件的对齐方式 ②容器中的组件可以跨多行也可以跨多列(相比TableLayout直接放组件,占一行相比较) 因为是android 4.0新增的,API Level 14,在这个版
GridLayout布局
静Yu的博客
01-31 9876
GridLayout布局管理器  GridLayout类在java.awt包中  GridLayout布局使得容器中的各个组件以规则 的网格状分布，平均占据整个容器空间  当容器的大小发生变化时，其中的组件大小也 发生变化，但始终平均占据容器空间  GridLayout容器中的组件始终充满网格某个块 的所有空间  GridLayout容器中添加组件时，以行为主序： 第一行第一个，第一行第二个…第二行第一个… GridLayout的构造方法 public GridLayout(int rows,
GridLayout
肥宅
08-10 1008
GridLayoutGridLayout Attributesandroid:alignmentMode 排列模式 alignBounds 对齐边界 alignMargins 对齐margin 如果子视图存在margin(边距), 可以控制是否对齐margin还是对齐子视图的边界. padding无效android:columnCount 列数android:rowCount 行数超过行数或
栅格布局（GridRow/GridCol）
01-11 3684
栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。灵活的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。
页面的自动网格布局grid layout-可调整位置和大小
06-03
基于jquery和jquery ui的自动布局，并支持直接调整每个模块的大小和调整位置，且方便与后台传送数据。在鼠标移动至每个模块上时，右下角会出现调整的图标，可进行drag和resize。其中的插件gridstack是在github中查找...
v-grid-layout：网格布局
02-15
v-grid-layout是Vue的网格布局系统，例如 。 这是的裸分支，它支持将GridItem嵌套在任何其他组件中 [| | ] 特征 可拖动的小部件 可调整大小的小部件 静态小部件 边界检查以进行拖动和调整大小 可以在不重建网格的...
react-grid-layout：用于响应的可拖动和可调整大小的网格布局，带有响应断点
02-04
React-Grid-Layout是一个类似于React的或的网格布局系统。 与那些系统不同，它具有响应能力并支持断点。 断点布局可以由用户提供或自动生成。 RGL仅适用于React，不需要jQuery。 来自生产使用情况的GIF [| ] ...
angular-grid-layout:响应式网格，带有可拖动和可调整大小的项目，用于Angular应用程序
03-06
角网格布局 带有可拖动项目和可调整大小项目的网格，用于Angular应用程序。 高度可定制的仪表板非常适合。 它的核心功能基于众所周知的库。 可以将其视为Angular生态系统的“端口”（经过一些更改）。 两者涵盖了...
使用Vue-Grid-Layout实现自定义工作台
02-01
Vue-Grid-Layout 是一个基于 Vue.js 的响应式栅格布局系统，它允许开发者创建自定义的工作台，用户可以根据需要自由调整各个组件的位置和大小。在本教程中，我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作...
grid layout
aoerqi4422的博客
09-24 139
首先，你必须使用 display:grid将容器元素定义为一个 grid(网格) 布局，使用 grid-template-colunms和grid-template-rows设置 列 和 行 的尺寸大小，然后通过 grid-colunm和 grid-row将其子元素放入这个 grid(网格) 中。 grid-template-colunms:是设置整个网格的每列的宽度. ...
grid layout网格布局详解
BDawn的专栏
07-02 7896
参考文档 MDN web docs 什么是网格容器 网格布局的特点 网格grid css属性介绍 网格item css属性介绍
[AWT] GridLayout
Nick 的笔记
03-13 1521
大家好我是Nick，今天我们一起来学习的是 GridLayout 和 GridBagLayout，这两个管理器虽然长得差不多，但是功能对比简直一个在天一个在地，那么现在跟着Nick一起来探索学习下趴~
Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）
~朴：shu的博客
11-22 4万+
在具有拖拽组成页面、组件动态调整大小、边缘碰撞监测的系统中，使用该布局无疑是最合适的。该栅格系统目前对 vue2 的支持是最好的，vue3 是需要用插件支持的，会在小节详细讲解。栅格布局难度不大，但是要理解里面的原理，并实际应用到自己的项目开发，还要结合自己项目的实际情况。
栅格布局（ 栅格 ）
AI-fisher的博客
07-20 1万+
文章目录一、开启栅格布局（display）——父容器二、配置行和列（grid-template-rows/grid-template-columns）——父容器三、配置行和列（grid-template）——父容器四、控制网格项的位置与大小（grid-row/grid-column）——子元素五、网格区域命名（grid-template-areas——父容器&&grid-area——子元素） 一、开启栅格布局（display）——父容器 栅格布局能将网页分成简单属性的行和列；Grid(网格)
栅格布局
qq_42791548的博客
04-25 687
栅格布局 栅格布局列偏移 列嵌套 列排序 排版列偏移 第一部分 第二部分 第三部分 </div> </div> 列嵌套 sm-9 sm-3 sm-6 sm-6 sm-1 sm-2 sm-9 列排序 1111111 2222222 1111111 2222222 1111111 </div> 排版 h1.响应式布局-Bo...
栅格布局（Grid Layout）怎么实现
05-24
栅格布局（Grid Layout）是一种常用的网页布局方式，实现起来也比较简单。以下是实现栅格布局的基本步骤： 1. 在 HTML 中，使用 `<div>` 标签创建一个容器，作为整个栅格布局的父元素。 2. 使用 CSS 中的 `display: grid` 属性将容器设置为栅格布局。 3. 使用 `grid-template-columns` 和 `grid-template-rows` 属性定义栅格布局中每个栅格的列数和行数。 4. 使用 `grid-column` 和 `grid-row` 属性指定每个子元素所在的栅格位置。 下面是一个简单的栅格布局示例代码： ``` <!DOCTYPE html> <html> <head> <style> .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 100px); gap: 10px; } .item { background-color: #ccc; padding: 20px; } .item1 { grid-column: 1 / 3; grid-row: 1 / 2; } .item2 { grid-column: 2 / 4; grid-row: 2 / 3; } </style> </head> <body> <div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> </body> </html> ``` 在上面的例子中，使用 `grid-template-columns` 和 `grid-template-rows` 分别定义了每个栅格的列数和行数，其中 `repeat(3, 1fr)` 表示有 3 列，每列的宽度平均分配。`gap` 属性用于定义栅格之间的间隔。使用 `grid-column` 和 `grid-row` 属性指定了每个子元素所在的栅格位置。 通过这些基本的步骤，就可以实现一个简单的栅格布局。当然，栅格布局还有很多其他的属性和技巧，需要根据实际需求进行灵活运用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值