网格布局

学习来自阮一峰老师的教程网格布局和网络上的一些资料的学习

1、定义：

顾名思义，网格布局是将页面按行(row)和列(column)划分成一个个网格来进行布局

使用方法：display:grid || inline-grid来定义一个容器为网格布局

在定义网格布局的容器里面的display：table-ceil,float，vertical-align等设置会失效
示例图：

2、容器属性：
  • grid-template-columns: 定义每一列的列宽
  • grid-template-rows: 定义每一行的行高
注意： repeat：定义重复列宽或行高 fr：定义的属性值，代指片段宽度， 2fr为1fr的两倍宽，还有auto-fill关键字,minmax()方法，auto关键字等属性
  • grid-row-gap: 定义行与行之间的间距
  • grid-column-gap: 定义列与列之间的间距
  • grid-gap: grid-row-gap grid-column-gap
  • grid-auto-flow: 定义项目的排列顺序，row(默认值，先行后列) column(先列后行) row||column + dense(类似于浮动，尽量贴紧)
  • justify-items: 定义项目中的水平位置，值：start（左） | end（右） | center（中） | stretch（默认，拉升）;
  • align-items:定义项目中的垂直位置，值：start（左） | end（右） | center（中） | stretch（默认，拉升）;
  • place-items: justify-items align-items
  • justify-content: 是整体（全部）项目在容器中的水平位置，值：start | end | center | stretch | space-around | space-between | space-evenly
  • align-content :是整体（全部）项目在容器中的垂直位置，值与justify-content相同
  • place-content: justify-content align-content
  • grid-auto-columns 与 grid-auto-columns 对自动创建的多余网格设置列宽和行高
3、项目属性：

grid-column||row-start||end 定位项目从哪个网线开始或截止

grid-column: grid-column-start / grid-column-end 的简写 grid-row与之一样

justify||align-self ：设置单个项目的水平或垂直位置（不是全部，只设置一个）

place-self: jsutify-self align-self 简写

实例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<style>

    .main{

        /*

        grid: 默认为块元素

        inline-grid: 默认为行内块元素

         */

        display:grid;

        width:400px;

        height:150px;

        /* 定义列宽,定义多少个就分成多少列

        注意没定义行高，实际中会跟据项目自动分配行高（自动填充==默认值导致（stretch等））、

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

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

         */

        grid-template-columns: 100px 100px 100px;

        grid-row-gap: 10px;

        grid-column-gap: 10px;

        justify-items: stretch;

    }

    .left{

        background-color:lightcoral;

        /* justify-self: left; */

    }

    .contain{

        background-color:limegreen;

    }

    .right{

        background-color:lightskyblue;

    }

</style>

<body>

    <!-- <span>1111</span> -->

    <div class="main">

        <div class="left">1</div>

        <div class="contain">2</div>

        <div class="right">3</div>

        <div class="right">4</div>

        <div class="left">5</div>

        <div class="contain">6</div>

    </div>

    <!-- <span>2222</span> -->

</body>

</html>
总结：

不行了，看完脑子太乱了，这些语法还是等以后，做个实战来加深记录吧~~

关于css布局的记录(二) --网格布局的更多相关文章

  1. CSS进阶之模拟Bootstrap网格布局

    目前暂时实现效果,容后面整理心得,先贴上源代码. 源码 <!DOCTYPE html> <html> <head> <title>demo bootst ...

  2. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  3. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  4. css 网格布局

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  5. 使用BootStrap网格布局进行一次演示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Android零基础入门第32节：新推出的GridLayout网格布局

    原文:Android零基础入门第32节:新推出的GridLayout网格布局 本期主要学习的是网格布局是Android 4.0新增的布局,和前面所学的TableLayout表格布局 有点类似,不过他有 ...

  7. Grid 网格布局详解

    Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...

  8. CSS Grid基于网格的二维布局系统(详细教程)

    .grid-wrap{ display: inline-flex; padding: 20px; background: #f4f4f4; word-break: initial; } .handle ...

  9. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

随机推荐

  1. salesforce lightning零基础学习(十六) 公用组件之 获取字段label信息

    我们做的项目好多都是多语言的项目,针对不同国家需要展示不同的语言的标题.我们在classic中的VF page可谓是得心应手,因为系统中已经封装好了我们可以直接在VF获取label/api name等 ...

  2. 虚拟机中linux系统常用命令解释及vim3种命令模式详解

    1.man man 加上一个命令可以打开此命令具体使用方法,方便我们更好的了解新命令的使用(下图为我输入命令“man ls”虚拟机界面) 2.cd  切换目录 cd ..(返回上一级目录) cd ~( ...

  3. 重写TabBar遇到的按钮不显示的问题

    这里的控件frame没有进行设置,无法显示 这里初始化的按钮 frame也为0, 因此 在 重写某个控件的时候 一定要调用layoutSubviews这个方法来对这个控件内部的子控件进行赋值

  4. 程序员修神之路--打通Docker镜像发布容器运行流程

    菜菜哥,我看了一下docker相关的内容,但是还是有点迷糊 还有哪不明白呢? 如果我想用docker实现所谓的云原生,我的项目该怎么发布呢? 这还是要详细介绍一下docker了 Docker 是一个开 ...

  5. UML类图绘制

    UML图简介 含义:UML-Unified Modeling Language 统一建模语言,又称标准建模语言.是用来对软件密集系统进行可视化建模的一种语言 主要模型: 功能模型:从用户的角度展示系统 ...

  6. 漫谈LiteOS之开发板-串口（基于GD32450i-EVAL）

    [摘要] ​主要讲解物联网的技术积累,本期我们先带领大家学习漫谈LiteOS之漫谈开发板第一集-串口,本文基于GD32450i-EVAL对串口以及其通信做了一个简要的分析,以及开发过程中遇到的一些技术 ...

  7. window安装jboss服务器

    window安装jboss服务器 1.下载jboss服务器 地址:http://download.jboss.org/jbossas/7.1/jboss-as-7.1.1.Final/jboss-as ...

  8. composer install 或 update 速度慢的解决方案（composer加速）

    我们在使用composer install和composer update时,有的时候安装和更新速度非常慢,我们可以通过下面的几个方法来解决这个问题. 首先查看一下当前的 composer 全局配置地 ...

  9. 使用SSH服务远程管理主机（使用密钥）

    使用ssh服务远程管理主机 SSH是建立在应用层和传输层基础上的安全协议,目的是要在非安全网络上提供安全的远程登录和其他安全网络服务. 通过SSH连接可以远程管理Linux等设备,默认linuxssh ...

  10. .net core 3.1简体中文语言包，英文只能提示变成中文！

    .net core 3.1简体中文语言包,英文只能提示变成中文!这个是我自己手动用谷歌翻译翻译的一批文档,已经把.net core3.1完全翻译了,由于是翻译器翻译,所以怕翻译有错漏,所以没有去掉英文 ...