grid布局

最新推荐文章于 2024-08-16 17:14:08 发布
最新推荐文章于 2024-08-16 17:14:08 发布
阅读量507 收藏 3
点赞数
分类专栏： nvnv 文章标签： css

了解grid

grid栅格布局，二维布局模块，具有强大的内容尺寸和定位能力，适合需要在两个维度上对齐内容的布局，Grid Layout 是一种基 于二维网格的布局系统，旨在完全改变我们设计基于网格的用户界面的方式，弥补网页开发在二维布局能力上的缺陷

　二维布局方式： 可以按照行列方式排列内容，把页面划分为几块。指定不同内容区块的大小，位置和层级
　
和table2.0的区别： table表格有内容结构，不能很自由的在里面做布局，grid内部元素可以自由设定位置，允许重叠和设定层级

术语

  • 网格容器（Grid Container）
    通过display属性设置属性值为grid或inline-grid可以创建一个网格容器。网格容器中的所有子元素就会自动变成网格项目
    container 就为网格容器
<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>
  • 网格项（Grid Item）
    网格容器的子元素，下面的item元素是网格项，但sub-item不是。
<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>
  • 网格线（Grid Line）
    组成网格线的分界线。它们可以是列网格线（column grid lines），也可以是行网格线（row grid lines）并且居于行或列的任意一侧，下面黄色线就是列网格线。

这里写图片描述

  • 网格轨道（Grid Track）
    两个相邻的网格线之间为网格轨道。你可以认为它们是网格的列或行，下面在第二个和第三个网格线之间的黄色部分为网格轨道。

这里写图片描述

  • 网格单元（Grid Cell）
    两个相邻的列网格线和两个相邻的行网格线组成的是网格单元，它是最小的网格单元。下面行网格线1（row grid lines 1）、行网格线2（row grid lines 2）和列网格线2（column grid lines 2）、列网格线3（column grid lines 3）组成的黄色区域为网格单元。

  • 网格区（Grid Area）
    网格区是由任意数量网格单元组成，下面行网格线1（row grid lines 1）、行网格线3（row grid lines 3）和列网格线1（column grid lines 1）、列网格线3（column grid lines3）组成的黄色区域为网格区。

这里写图片描述

设置在网格容器上的属性

 - display
 - grid-template-columns
 - grid-template-rows
 - grid-template-areas
 - grid-column-gap
 - grid-row-gap
 - grid-gap
 - justify-items
 - align-items
 - justify-content
 - align-content
 - grid-auto-columns
 - grid-auto-rows
 - grid-auto-flow
 - grid

  • display: grid | inline-grid | subgrid;
    grid: 生成块级网格
    inline-grid: 生成行内网格
    subgrid: 如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。
    注：当元素设置了网格布局，column、float、clear、vertical-align属性无效。

  • grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;grid-template-rows: <track-size> ... | <line-name> <track-size> ... ;
    属性值：
    track-size: 轨道大小，可以使用css长度，百分比或用分数（用fr单位）。
    line-name: 网格线名字，你可以选择任何名字。

<div class="container">
        <div class="item" style="background-color: red;">1</div>
        <div class="item" style="background-color: blue;">2</div>
        <div class="item" style="background-color: green;">3</div>
        <div class="item" style="background-color: yellow;">4</div>
        <div class="item" style="background-color: black;">5</div>
        <div class="item" style="background-color: pink;">6</div>
    </div>
    .container {
    background-color: #19ECEA;
    width: 600px;
    height: 300px;
    display: grid;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: auto 100px;
    //grid-template-columns: 100px 100px 100px;
    //grid-template-rows: 100px 100px;
}

当你设置行或列大小为auto时，网格会自动分配空间和网格线名称。
有auto

这里写图片描述

无auto
这里写图片描述

给网格线定义名字，注意名字需要写在[]里面。

grid-template-columns: [first] 100px [second] 100px [third] 100px [fourth];

每条网格线可以有多个名字

grid-template-columns: [first one] 100px [second] 100px [third] 100px [fourth];

如果定义包含重复部分，可以使用repeat()简化。

grid-template-columns: repeat(3, 100px [one]);等同于上面，不过网格线名字都为one

用fr单位可以将容器分为几等份，例如下面分成三等份。

grid-template-columns: 1fr 2fr 1fr;

这里写图片描述

如果fr单位和实际值一起使用，设置fr的行或列将分(除了实际值)剩余部分。

grid-template-columns: minmax(100px, 1fr);  // 最小100px, 最大满屏
grid-template-columns: fit-content(40%);    // 指定最大值不超过屏宽40%
grid-template-columns: repeat(3, 200px);    // 三列200px
  • grid-template-areas
    通过获取网格项中的grid-area属性值（名称），来定义网格模版。重复网格区（grid-area）名称将跨越网格单元格，‘.’代表空网格单元。
    属性值：
    grid-area-name: 网格项的grid-area属性值（名字）
    ‘.’ : 空网格单元
    none: 不定义网格区域
<div class="container">
        <div class="item1" style="background-color: red;">1</div>
        <div class="item2" style="background-color: blue;">2</div>
        <div class="item3" style="background-color: green;">3</div>
        <div class="item4" style="background-color: yellow;">4</div>
    </div>
    .item1 {
        grid-area: Header;
    }
    .item2 {
        grid-area: main;
    }
    .item3 {
        grid-area: slider;
    }
    .item4 {
        grid-area: Footer;
    }
    .container {
    background-color: #19ECEA;
    width: 600px;
    height: 300px;
    display: grid;
    grid-template-areas: "Header Header Header Header"
                        "main main . slider"
                        "Footer Footer Footer Footer";
    grid-template-columns: repeat(4, 50px);
    grid-template-rows: auto;
}

上面代码示例会创建四列三行网格，第一行将是Header，第二行前两个网格单元是main部分、第三个为空网格单元、第四个为slider，第三行是Footer。
这里写图片描述

  • grid-column-gap：<line-size>; 和 grid-row-gap: <line-size> ;
    网格单元间距。
    属性值：
    line-size: 网格线间距,设置单位值。
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 100px;
    grid-column-gap: 10px;
    grid-row-gap: 20px;

这里写图片描述

注：间隔仅仅作用在网格单元之间，不作用在容器边缘

  • grid-gap：<grid-column-gap> <grid-row-gap>;
    是grid-column-gap 和 grid-row-gap简写。
grid-gao: 10px 20px; 等同于上面

注：如果只设置一个值，那么grid-column-gap 和 grid-row-gap都为那个值。

  • justify-items: start | end | center | stretch（默认） ;
    垂直于列网格线对齐，适用于网格容器里的所有网格项。
    属性值：
    start: 左对齐。
    end: 右对齐。
    center: 居中对齐。
    stretch: 填满（默认）。
justify-items: center;

这里写图片描述

justify-items: end;

这里写图片描述

  • align-items: start | end | center | stretch ;
    垂直于行网格线对齐，适用于网格容器里的所有网格项。
    属性值：
    start： 顶部对齐。
    end： 底部对齐。
    center： 居中对齐。
    stretch：填满（默认）。

类似上面不过方向是垂直方向

  • justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;
    如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式（垂直于列网格线对齐）。
    属性值：
    start: 左对齐。
    end: 右对齐。
    center: 居中对齐。
    stretch: 填满网格容器。
    space-around: 网格项两边间距相等，网格项之间间隔是单侧的2倍。
    space-between: 两边对齐，网格项之间间隔相等。
    space-evenly: 网格项间隔相等。
justify-content: space-evenly;

这里写图片描述

justify-content: end;

这里写图片描述

  • align-content: start | end | center | stretch | space-around | space-between | space-evenly ;
    如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式（垂直于行网格线对齐）。
    属性值：
    start: 顶部对齐。
    end: 底部对齐。
    center: 居中对齐。
    stretch: 填满网格容器。
    space-around: 网格项两边间距相等，网格项之间间隔是单侧的2倍。
    space-between: 两边对齐，网格项之间间隔相等。
    space-evenly: 网格项间隔相等。

类似上面但是方向垂直

  • grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... ;
    自动生成隐式网格轨道（列和行），当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道。
    属性值：
    track-size: 网格轨道大小,可以是固定值，百分比或者是分数（fr单位）。

这里写图片描述

这里写图片描述

 grid-auto-columns: 100px;
    grid-template-columns: repeat(2, 100px [one]);
    grid-template-rows: 100px 100px;
 .item4 {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
}
.item3 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

对比这两张图，（第一张图）网格项item4定位在第五根列网格线（column line 5 ）和第六根列网格线（column line 6 ）之间。但是我们网格容器根本不存在这两条网格线，所以就用两个0宽度来填充。（第二张图）在这里我们可以用网格自动行（grid-auto-rows）和网格自动列（grid-auto-columns）来定义这些隐式轨道宽度。

再看一个grid-column的应用

.item1 {
    grid-column: 1 / 3;
}
// .item2 {
//  grid-area: main;
// }
.item3 {
    grid-row: 2/4;
}
.item4 {
    grid-column: 2/4;
}

这里写图片描述

  • grid-auto-flow : row（默认） | column | dense ;
    在没有设置网格项的位置时，这个属性控制网格项怎样排列。
    属性值：
    row: 按照行依次从左到右排列。
    column: 按照列依次从上倒下排列。
    dense: 按先后顺序排列。
grid-auto-flow: row;
.item1 {
    grid-column: 1;
    grid-row: 1/3;
}
.item6 {
    grid-column: 6;
    grid-row: 1/3;
}

这里写图片描述

grid-auto-flow: column;

这里写图片描述

  • grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];
    是一种简写形式，设置网格容器所有属性。
    属性值：
    none: 设置为所有属性的默认值。
    / : 设置行和列的值，其他属性为默认值。
    [ [ / ] ] : 设置网格自动流、网格自动行、网格自动列的值，其他未设置则为默认值。
.container{
    grid: 200px auto / 1fr auto 1fr;
}
等同于
.container{
    grid-template-rows: 200px auto;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: none;
}

.container{
    grid: column 1fr / auto;
}
等同于
.container{
    grid-auto-flow: column;
    grid-auto-rows: 1fr;
    grid-auto-columns: auto;
}

设置在网格项上的属性

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
  • grid-column
  • grid-row
  • grid-area
  • justify-self

  • align-self

  • 通过网格线来定义网格项的位置。grid-column-start、grid-row-start定义网格项的开始位置，grid-column-end、grid-row-end定义网格项的结束位置。
    属性值：
    line: 指定带编号或者名字的网格线。
    span : 跨越轨道的数量。
    span : 跨越轨道直到对应名字的网格线。
    auto: 自动展示位置，默认跨度为1。

注：如果未声明grid-column-end或grid-row-end，默认将跨越一个轨道。项目也可以重叠，设置z-index来确定堆叠顺序。

  • grid-column: <start-line> / <end-line> | <start-line> / span <value> ;grid-row: <start-line> / <end-line> | <start-line> / span <value> ;
    是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写。

  • grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;
    定义网格项名字，以便创建模块（容器属性grid-template-areas来定义模块）。
    属性值：
    name: 项目名子。
    <row-start> / <column-start> / <row-end> / <column-end>: 可以是数字或网格线名字。

  • justify-self: justify-self: start | end | center | stretch;
    定义单个网格项垂直于列网格线的对齐方式。
    属性值：
    start: 网格区域左对齐。
    end: 网格区域右对齐。
    center: 网格区域居中。
    stretch: 网格区域填满。

提示：也可以在容器上设置justify-items，达到全部网格项对齐。

  • align-self: start | end | center | stretch;
    定义单个网格项垂直于行网格线的对齐方式。
    属性值：
    start: 网格区域顶部对齐。
    end: 网格区域底部对齐。
    center: 网格区域居中。
    stretch: 网格区域填满。
nvnv_yezi
关注
专栏目录
10.介绍一下CSS中的Grid网格布局?
kleinBlue.的博客
11-07 790
一、是什么 Grid布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列 擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系 这与之前讲到的flex一维布局不相同 设置display:grid/inline-grid的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法 <divclass="container"> <divclass="itemitem-1"> ...
《十二》CSS3 Grid 网格布局
花铛
12-09 1197
网格布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Flex 布局是轴线布局，只能指定项目针对轴线的位置，可以看作是一维布局。适用于一个方向上的布局。Grid布 局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。适用于有行有列的布局。Grid 布局远比 Flex 布局强大。
前端页面布局之【Grid布局】详解
最新发布
cnzzs的博客
08-16 1515
目录????前言????浏览器支持????Gird简介和基本概念????属性介绍???? 父元素上的属性???? 设置grid布局????设置网格的列数与行数????通过网格单元的名字来布局 grid-template-areas????设置网格轨道的大小????justify-items????align-items????justify-content????align-content????grid...
Grid 布局
猫老板的豆
04-25 1826
Grid布局是一种用于网页布局的CSS技术，它允许开发者定义一个元素内部的行和列，并在这些网格中放置子元素。这是一个强大的布局方式，可以看作是二维布局，也是唯一的二维布局方案。
一文搞懂Grid 布局
weixin_64310738的博客
03-16 2040
一文搞懂Grid 布局
Grid布局综合Demo案例
05-27
网格布局（Grid布局）是CSS3中的一个强大工具，它为网页设计提供了二维的、基于网格的布局系统，使得在创建复杂且响应式的页面布局时更加灵活和有序。本综合Demo案例将深入探讨如何利用Grid布局来实现各种复杂的网页...
使用CSS Grid布局实现网格的流动
09-25
CSS Grid布局是一种二维网格系统，用于页面布局设计。它允许设计者将元素排列成行和列，通过定义网格轨道大小、网格间隙以及网格区域，实现复杂的布局效果。CSS Grid布局由CSS Grid布局属性定义，与传统的浮动布局...
基于grid布局实现的响应式栅格系统
09-10
在本文中，我们将深入探讨如何利用CSS Grid布局来构建一个强大的响应式栅格系统，以及如何结合SCSS（Sassy CSS）进行更高效、可维护的编码。 1. CSS Grid布局基础： CSS Grid布局是CSS3中引入的一种二维布局系统，...
CSS Grid布局教程之网格单元格布局
12-13
CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）...
Grid布局
weixin_48796690的博客
01-09 1061
Grid 布局是什么？ Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。 堪称是最强大的的 CSS 布局方案，是目前唯一 一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局： Grid 布局和 flex 布局 讲到布局，我们很容易就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。其实这个想法不太完善。为什么呢，接下来就听笔者来给你介绍下吧！ fl
阮一峰老师 CSS Grid 网格布局教程(转载)
热门推荐
鸭绒的博客
09-30 3万+
特别声明：这篇博客转载于阮一峰老师，转载是为了方便日后复习，实在写的太棒了。 <!-- div class="asset-body" --> <h2>一、概述</h2> 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值