CSS Grid Layout为CSS引入了一个二维网格系统。网格可用于布局主要页面区域或小型用户界面元素。

网格是一组交叉的水平和垂直线 - 一组定义列，其他行。元素可以放在网格上，以行或者列为标准。

grid布局的优点：

1：固定和灵活的轨道尺寸

2：可以使用行号，名称或通过定位网格区域将项目放置在网格上的精确位置。网格还包含一种算法，用于控制未在网格上显示位置的项目的放置。

3：在需要时添加其他行和列

4：网格包含对齐功能，以便我们可以控制项目放置到网格区域后的对齐方式，以及整个网格的对齐方式。

5：可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠。然后可以用z-index属性控制该分层。

父元素必须设置display为grid或inline-grid

父元素grid属性：

  1. grid-template-columns（row）：设置网格的列(行)，每一个值就代表创建那行（列）的列（行）宽
  2. fr：代表容器的可用空间，等份的分成对应份数。
  3. minmax()：设置创建网格的最大值或最小值，此函数接受两个参数，第一个参数定义最小值，第二个值为最大值，auto值允许尺寸拉伸，
  4. repeat()：创建重复的轨道，此函数接受两个参数，第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。
  5. grid-column（row）-gap：设置列与列(行与行)之间的间距

grid子元素的属性：

  1. grid-column-start/grid-column-end：设置列线的开始和结束位置
  2. grid-row：是grid-row-start和grid-row-end的简写，当设置为一个值时，代表列的开始位置，
  3. grid-column：当设置为一个值时，代表行的开始位置，
  4. span：span后面紧随数字，表示合并多少个列或行
  5. grid-area：四个值，第一个值对应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">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<style>

    *{

        padding: 0;

        margin: 0;

    }

.wrapper {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 10px;

  grid-auto-rows: minmax(100px, auto);

}

.wrapper div{

    background-color: aquamarine;

}

.one {

  grid-column: 1 / 3;

  grid-row: 1;

}

.two {

  grid-column: 2 / 4;

  grid-row: 1 / 3;

}

.three {

  grid-column: 1;

  grid-row: 2 / 5;

}

.four {

  grid-column: 3;

  grid-row: 3;

}

.five {

  grid-column: 2;

  grid-row: 4;

}

.six {

  grid-column: 3;

  grid-row: 4;

}

</style>

<body>

    <div class="wrapper">

      <div class="one">One</div>

      <div class="two">Two</div>

      <div class="three">Three</div>

      <div class="four">Four</div>

      <div class="five">Five</div>

      <div class="six">Six</div>

    </div>

</body>

</html>

css 中的grid布局基础的更多相关文章

  1. 图文详解前端CSS中的Grid布局，你真的可以5分钟掌握

    前言 网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局 首先我们看看 ...

  2. CSS中常见的布局

    一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现  (1)两列布局 https://www.cnblogs.com/qin ...

  3. css中的那些布局

    因为最近心血来潮,就总结了一下css中的几种常见的多列布局. 两列自适应布局 两列自适应布局算是css布局里面最基础的一种布局了,不少网站在使用. 这种布局通常是左侧固定,右边自适应,当然也有反过来的 ...

  4. wpf后置代码中的Grid布局以及图片路径的设置

    之前用Grid练习连连看布局时,遇到了几个困惑.此次就把当时的一些收获写出来,供以后翻看. 图片路径可能比较常用,所以就写在第一个了. 在xaml中,设置图片非常简单,只要把图片拷贝到资源目录(这里假 ...

  5. 从实例中学习grid布局

    对于Web开发者来说,网页布局一直是个比较重要的问题. Web 布局主要经历了以下四个阶段: 1.table表格布局: 2.float浮动及position定位布局: 3.flex弹性盒模型布局,革命 ...

  6. css 中 stick footer 布局实现

    做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮.stick footer 就是让 footer 元素固定在底部 当内容不足满屏时,footer 紧 ...

  7. css中的圣杯布局和双飞翼布局

    圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...

  8. 使用css中的flex布局弹性手风琴效果

    不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. CSS中的圣杯布局与双飞翼布局

    一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2. ...

随机推荐

  1. JAVA实操项目：转账接口设计

    在一个项目中,一般都会支付相关的业务,而涉及到支付必定会有转账的操作,转账这一步想起来算是比较关键的部分,这个接口的设计能力,也大致体现出一个人的水平. 昨天碰到了一个题目: 尝试用java编写一个转 ...

  2. js怎么把一个数组里面的值作为一个属性添加到另一数组包含的对象里（小程序）

    上面这个需求我说的似乎不太明白,之前也是没有碰到过,也是最近在搞小程序,涉及到小程序前后台数据交互,展示的部分!!不太明白没关系等会我给大家举个例子,就明白了说起来有点拗口,一看就明白了,其实如果是原 ...

  3. sql server 我常用的语句

    1. computed column ) persisted; 2. unique nullable create unique nonclustered index[UniqueName] on [ ...

  4. 日常英语---六、Maplestory Illium

    日常英语---六.Maplestory Illium 一.总结 一句话总结: maplestory-['meiplstɔri]  illium-镍铬合金 ['meiplstɔri]  n. 枫之谷(网 ...

  5. pythoncook 文件和io

    1.文件不存在,则写入:文件存在则,报错 try: with open('file','x') as f: f.write() except FileExistsError: print('file ...

  6. H5微信页面开发 IOS系统 input输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置，导致弹框里的按钮响应区域错位

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  7. 胜利大逃亡 HDU - 1253

    Ignatius被魔王抓走了,有一天魔王出差去了,这可是Ignatius逃亡的好机会. 魔王住在一个城堡里,城堡是一个A*B*C的立方体,可以被表示成A个B*C的矩阵,刚开始Ignatius被关在(0 ...

  8. Fiddler 4 界面功能介绍

    由于本人工作接触Web测试,所以我从网上找的资料,学习了解web测试内容,然后自己整理汇总的随笔,如文章中有不足的地方,请大家多多指教:或者文章内容与他人相似,望见谅 主界面: 工具栏 file:用于 ...

  9. LINQ 常用from

    单个form子句string[] values = { "LINQ学习", "LINQ基本语句", "from子句", "单个fr ...

  10. TSFDEVTY

    TSFDEVTY 用BAPI_OUTB_DELIVERY_CONFIRM_DEC做的发货过账,会VL09无法冲销需要UPDATE LIKP-VLSTK为空UPDATE likp SET vlstk = ...