GRID布局

分类：CSS作者：编程之家用户

GRID布局

目前CSS布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个成员的位置。不同之处在于，Flex布局是轴线布局，只能指定成员针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分成行和列，产生单元格，然后指定成员所在的单元格，可以看作是二维布局。

基础

通过指定display: grid;指定容器使用Grid布局，Grid布局中采用网格布局的区域，称为容器，容器内部采用网格定位的子元素，称为成员。容器中水平区域称为行，垂直区域称为列，可以将其看作二位数组。划分网格的线就称为网格线，正常情况下n行有n + 1根水平网格线，m列有m + 1根垂直网格线。注意当容器设置为Grid布局以后，容器子元素的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

容器属性

grid-template-rows grid-template-columns

grid-template-rows属性定义每一行的行高，设定为多少行就设置多少个值，取值可以为固定像素，也可以为百分比，grid-template-columns属性定义每一列的列宽，设定为多少列就设置多少个值，取值可以为固定像素，也可以为百分比

<div id="t1">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>
<!-- 
    0 1 2
    3 4 5
    6 7 8
 -->

<style type="text/css">
    #t1{
        display: grid;
        grid-template-rows: 30px 30px 30px;
        grid-template-columns: 30px 30px 30px;
    }
</style>

repeat

repeat()函数可以简化重复的值，其可以自动重复设定的规则

<div id="t2">
    <div>9</div>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
</div>
<!-- 9 ab cd e -->

<style type="text/css">
   #t2{
        display: grid;
        grid-template-columns: repeat(3,30px 10px); /* 设定为重复3次 30px 10px 规则 */
    }
</style>

auto-fill

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行或每一列容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充，当容器不足容纳成员时会自适应换行。

<div id="t3" style="width: 60px;">
    <div>f</div>
    <div>g</div>
    <div>h</div>
</div>
<!-- 
    f g
    h 
-->

<style type="text/css">
   #t3{
        display: grid;
        grid-template-columns: repeat(auto-fill,30px);
    }
</style>

fr

为表示比例关系，网格布局提供了fr关键字。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

<div id="t4">
    <div>i</div>
    <div>j</div>
    <div>k</div>
</div>
<!-- 
    i j  k
-->

<style type="text/css">
   #t4{
        display: grid;
        grid-template-columns: 1fr 2fr 3fr;
    }
</style>

minmax

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值，当距离不够时会从最大值自动减少长度或宽度到设定最小值为止。
minmax( [ <length> | <percentage> | min-content | max-content | auto ],[ <length> | <percentage> | <flex> | min-content | max-content | auto ] )

<div id="t5">
    <div>l</div>
    <div>m</div>
    <div>n</div>
</div>
<!-- 
    l m  n
-->

<style type="text/css">
   #t5{
        display: grid;
        grid-template-columns: 30px minmax(30px,100px) 30px;
    }
</style>

auto

auto关键字表示由浏览器自己决定长度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

<div id="t6">
    <div>o</div>
    <div>p</div>
    <div>q</div>
</div>
<!-- 
    o p     q
-->

<style type="text/css">
   #t6{
        display: grid;
        grid-template-columns: 10px auto 30px;
    }
</style>

grid-row-gap

grid-row-gap属性设置行与行的间隔，即行间距

<div id="t7">
    <div>r</div>
    <div>s</div>
    <div>t</div>
</div>
<!-- 
    r

    s

    t
-->

<style type="text/css">
   #t7{
        display: grid;
        grid-template-rows: 30px 30px 30px;
        grid-row-gap: 10px;
    }
</style>

grid-column-gap

grid-column-gap属性设置列与列的间隔，即列间距

<div id="t8">
    <div>u</div>
    <div>v</div>
    <div>w</div>
</div>
<!-- 
    u  v  w
-->

<style type="text/css">
   #t8{
        display: grid;
        grid-template-columns: repeat(3,30px);
        grid-column-gap: 10px;
    }
</style>

grid-gap

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值

<div id="t9">
    <div>x</div>
    <div>y</div>
    <div>z</div>
    <div>A</div>
</div>
<!-- 
    x  y

    z  A
-->

<style type="text/css">
  #t9{
        display: grid;
        grid-template-columns: repeat(2,30px);
        grid-template-rows: repeat(2,30px);
        grid-gap: 10px 10px;
    }
</style>

grid-template-areas

网格布局允许指定区域area，一个区域由单个或多个单元格组成，grid-template-areas属性用于定义区域。区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为{areaName}-start，终止网格线自动命名为{areaName-end

<div id="t10">
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
</div>
<!-- 
    B C
    D E
-->

<style type="text/css">
  #t10{
        display: grid;
        grid-template-columns: repeat(2,30px);
        /* 先划分出4个单元格，然后将其定名为a到d的4个区域，分别对应这4个单元格。*/
        grid-template-areas: 'a b' 'c d';
    }
</style>

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是先行后列，通过设置grid-auto-flow可以更改为先列后行，grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense，这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

<div id="t11">
    <div>F</div>
    <div>G</div>
    <div>H</div>
    <div>I</div>
</div>
<!-- 
    F H
    G I
-->

<style type="text/css">
   #t11{
        display: grid;
        grid-template-columns: repeat(2,30px);
        grid-auto-flow: column;
    }
</style>

justify-items

justify-items属性设置成员中内容的水平位置，取值为start | end | center | stretch

  • stretch默认值：拉伸，占满单元格的整个宽度。
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
<div id="t12">
    <div>J</div>
</div>
<!-- 
    J
-->

<style type="text/css">
    #t12{
        display: grid;
        justify-items: center;
    }
</style>

align-items

align-items属性设置成员中内容的垂直位置，取值为start | end | center | stretch

  • stretch默认值：拉伸，占满单元格的整个宽度。
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
<div id="t13" style="height: 50px">
    <div>K</div>
</div>
<!-- 
    K
-->

<style type="text/css">
    #t13{
        display: grid;
        align-items: center;
    }
</style>

place-items

place-items属性是align-items属性和justify-items属性的合并简写形式，如果省略第二个值，则浏览器认为与第一个值相等。

<div id="t14" style="height: 50px">
    <div>L</div>
</div>
<!-- 
    L
-->

<style type="text/css">
    #t14{
        display: grid;
        place-items: center center;
    }
</style>

justify-content

justify-content属性是整个内容区域在容器里面的水平位置，也就是成员的水平分布，取值为start | end | center | stretch | space-around | space-between | space-evenly

<div id="t15">
    <div>M</div>
    <div>N</div>
</div>
<!-- 
    M   N 
-->

<style type="text/css">
    #t15{
        display: grid;
        grid-template-columns: repeat(2,30px);
        justify-content: space-around;
    }
</style>

align-content

align-content属性是整个内容区域在容器里面的垂直位置，也就是成员的垂直分布，取值为start | end | center | stretch | space-around | space-between | space-evenly

<div id="t16" style="height: 50px;">
    <div>O</div>
    <div>P</div>
</div>
<!-- 
    O P
-->

<style type="text/css">
    #t16{
        display: grid;
        grid-template-columns: repeat(2,30px);
        align-content: center;
    }
</style>

place-content

place-content属性是align-content属性和justify-content属性的合并简写形式，如果省略第二个值，则浏览器认为与第一个值相等。

<div id="t17" style="height: 50px;">
    <div>Q</div>
    <div>R</div>
</div>
<!-- 
    Q   R
-->

<style type="text/css">
    #t17{
        display: grid;
        grid-template-columns: repeat(2,30px);
        place-content: center space-around;
    }
</style>

grid-auto-columns grid-auto-rows

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

<div id="t18">
    <div style="grid-row-start: 2;grid-column-start: 2;">S</div>
</div>
<!-- 
     
     S
-->

<style type="text/css">
    #t18{
        display: grid;
        grid-template-columns: repeat(1,30px);
        grid-template-rows: repeat(1,30px);
        grid-auto-rows: 100px; 
        grid-auto-columns: 100px; 
    }
</style>

项目属性

grid-column-start grid-column-end

grid-column-start属性指定左边框所在的垂直网格线，grid-column-end属性指定右边框所在的垂直网格线

<div class="gridBox">
    <div style="grid-row-start: 2;grid-column-start: 2;">T</div>
</div>
<!-- 
     
     T
-->

<style type="text/css">
    .gridBox{
        display: grid;
        grid-template-columns: repeat(2,30px);
    }
</style>

grid-row-start grid-row-end

grid-row-start属性指定上边框所在的水平网格线，grid-row-end属性指定下边框所在的水平网格线

<div class="gridBox">
    <div style="grid-row-start: 2;">U</div>
</div>
<!-- 
     
    U
-->

<style type="text/css">
    .gridBox{
        display: grid;
        grid-template-columns: repeat(2,30px);
    }
</style>

还可以给轴线命名来指定位置

<div class="gridBox" style="">
    <div style="grid-column-start: c2;grid-row-start: r2;">V</div>
</div>
<!-- 
     
      V
-->

<style type="text/css">
    .gridBox{
        display: grid;
        grid-template-columns:[c1] 30px [c2] 30px [c3]; /* 指定列并为轴线命名 */
        grid-template-rows:[r1] 30px [r2] 30px [r3]; /* 指定行并为轴线命名 */
    }
</style>

grid-column grid-row

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

<div class="gridBox">
    <div style="grid-column: 2 / 3;grid-row: 2 / 3;">W</div>
</div>
<!-- 
     
      W
-->

<style type="text/css">
    .gridBox{
        display: grid;
        grid-template-columns: repeat(2,30px);
    }
</style>

grid-area

grid-area属性指定项目放在grid-template-areas指定的区域，还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

<div class="gridBox" style="grid-template-areas: 'a b' 'c d';">
    <div style="grid-area: b;">X</div>
    <div style="grid-area: 2 / 2 / 3 / 3;">Y</div>
</div>
<!-- 
      X
      Y
-->

<style type="text/css">
    .gridBox{
        display: grid;
        grid-template-columns: repeat(2,30px);
    }
</style>

justify-self align-self place-self

justify-self属性设置单元格内容的水平位置，跟justify-items属性的用法完全一致，但只作用于单个项目，取值为start | end | center | stretch;。
align-self属性设置单元格内容的垂直位置，跟align-items属性的用法完全一致，也是只作用于单个项目，取值为start | end | center | stretch;。

  • stretch默认值：拉伸，占满单元格的整个宽度。
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。

place-self属性是align-self属性和justify-self属性的合并简写形式。

<div class="gridBox">
    <div style="place-self: center end;">Z</div>
</div>
<!-- 
    Z
-->

<style type="text/css">
    .gridBox{
        display: grid;
        grid-template-columns: repeat(2,30px);
    }
</style>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Css常用的排序方式权重分配
Css常用的排序方式权重分配 排序方式： 1、按类型&#160;如，显示和浮动、定位、尺寸、字体等 2、按字母&#160;按字母顺序排列，优点是规则简单 3、按定义长度&#160;按照样式定义的字符长度排列 各有优劣，实际应用中，推荐使用第一种。&#160;但是如果单靠前端工程师在编写过程中这么做的
用CSS实现一个抽奖转盘
原文：https://www.cnblogs.com/wenruo/p/9732704.html 先上效果 基本是用CSS实现的，没有用图片，加一丢丢JS。不过没有考虑太多兼容性。 首先画一个 &lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;
css属性：word-wrap:break-word; 与 word-break:break-all 的用法；
css属性：word-wrap:break-word; 与 word-break:break-all 的用法； zhangq0123 于 2016-10-19 11:06:12 发布 6475 收藏 9分类专栏： CSS HTML 文章标签： html css版权 CSS同时被 2 个专栏收录8 篇
颜色插件网
https://destiny001.gitee.io/color/
jq动态插入数据和设置最后一个标签样式
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &l
css之background的cover和contain的缩放背景图
css之background的cover和contain的缩放背景图 对于这两个属性，官网是这样解释的： contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 等比例缩放图象到垂直或者水平其中一项填满区域。 cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景
.CSS.MAP文件作用
.CSS.MAP文件作用 https://blog.csdn.net/qq_36441169/article/details/102575563 1、简介在写前端代码，使用bootstrap时，发现同一个目录下，不仅仅有.css文件的同时，还存在.css.map文件的存在。在前端页面调试时也发现，映
Jquery mobile 写html时文字太长无法自动换行
Jquery mobile 写html时文字太长无法自动换行。 Jquery mobile 1 篇文章0 订阅 订阅专栏 加上这个 style=&quot;word-wrap:break-word;word-break:break-all;&quot; 或者 style=&quot;word-wra
各种手册（layui手册、jq手册、css、js、ES6）
详见：http://www.shagua.wiki/project/3 layui图标：http://www.shagua.wiki/project/3?p=85 JQ手册 ：https://www.jc2182.com/jquery/jquery-jiaocheng.html css样式手册：ht
css里面圆形的代码,如何使用纯css实现圆形图像？（代码实例）
css里面圆形的代码,如何使用纯css实现圆形图像或叶子图像？（代码实例） 网易美学于&#160;2021-08-03 22:15:22&#160;发布946&#160;收藏 文章标签：&#160;css里面圆形的代码 有没有想过如何制作那些各式各样的圆形图像而无需用ps，本篇文章就来给你介绍一下如
css文字超出一行就显示省略号
css文字超出一行就显示省略号 1，css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2，css超出二行用点表示 overflow:hidden; text-overflow:ellipsis; disp
js动态追加数据单独设置某一个元素的样式
js动态追加数据单独设置某一个元素的样式。 在开发时，我们有很多数据是从后台获取然后展示的，例如列表，最近开发碰到个需求是获取到列表信息之后，不仅仅是拼接展示出来，还需要将其中的第一个li元素设置成其他的样式类，在网上找了一堆的办法都和自身业务需求不一致，没办法自己通过chrome控制台一点点调试，
css3手机端h5商品列表页，两列等分排列技巧
css3手机端h5商品列表页，两列等分排列技巧 .picture_list {&#x9;width: 100%;&#x9;overflow: hidden}.picture_list&gt;li {&#x9;width: 50%; min-height: 120px;&#x9;float: left;&#x9;padding: 0px 3
css3 transform:scale(x)实现字体的缩放：
css3 transform:scale(x)实现字体的缩放： css3 transform:scale(x)字体的缩放： transform:scale(x),针对于整体的缩放，缩放的整体包括宽，高，背景。这自然对于内联元素就无法使用此属性，最好使用无属性的span转换成块元素或者行内块元素进行设
jq获取第一个子元素并添加class
jq获取第一个子元素并添加class &lt;div class=&quot;main&quot;&gt; &lt;div class=&quot;tit&quot;&gt;颜色&lt;/div&gt; &lt;ul&gt; &lt;li&gt;银色&lt;/li&gt; &lt;li&gt;深灰色
设置背景图片的两种方式，并解决手机端背景图片高度自适应问题
设置背景图片的两种方式，并解决手机端背景图片高度自适应问题 赵世婷&#160;2017-09-19 15:59:43 14372 收藏&#160;5 1 设置背景图片的两种方式： 方式一： .back{undefinedposition: fixed;width: 100%;height: 100%
css层级选择器理论（为优化尽量减少层级选择器）
css层级选择器理论{#ek) E:first-child : 匹配的是E元素，E元素是父元素的第一个子元素 说明：利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能
Css多行字符截取方法详解
Css多行字符截取方法详解 时间：2021-07-01 10:21:17 相信有很多同学在写前端页面的时候，都会遇到字符长了需要截取的问题，最简单的方法就是手动去截取，可这样又感觉太low了，今天晚上就来讲讲利用css进行字符的截取，不了解css是如何截取的同学可以和我们一起看看哦！ 前言 最近在做
css中content可以用到的字符编码
css中content可以用到的字符编码 项目中用到的一些特殊字符和图标 html代码 &lt;div class=&quot;cross&quot;&gt;&lt;/div&gt; css代码.cross{width: 20px;height: 20px;border-radius: 10px;b
CSS 计算属性 calc()的完整指南(上）
CSS 计算属性 calc()的完整指南(上） 2020-05-03 CSS tricks上有一系列的完整指南文章，我后面会翻译这些内容，更新不会一下子完成，而是会分成几个，防止自己因看到文章过长而放弃翻译，一步一个脚印。 CSS有一个特殊的calc()函数，用于做基本的数学运算。下面是一个例子：
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot