1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8.         <title>grid 布局 属性示例</title>
  9.         <style type="text/css">
  10.             * {
  11.                 margin: 0;
  12.                 padding: 0;
  13.             }
  14.  
  15.             .container {
  16.                 display: grid;
  17.                 /*列布局*/
  18.                 grid-template-columns: 1fr 2fr;
  19.                 /*行布局*/
  20.                 grid-template-rows: 100% 100%;
  21.                 /*列间距*/
  22.                 grid-column-gap: 15px;
  23.                 /*行间距*/
  24.                 grid-row-gap: 15px;
  25.                 /*行轴对齐方式*/
  26.                 justify-items: stretch;
  27.                 /*列轴对齐方式*/
  28.                 align-items: stretch;
  29.  
  30.                 /*网格总大小小于网格容器大小时，网格容器内的网格行轴对齐方式*/
  31.                 justify-content:center;
  32.                 /*网格总大小小于网格容器大小时，网格容器内的网格列轴对齐方式*/
  33.                 align-content:center;
  34.             }
  35.             .item{
  36.                 text-align: center;
  37.                 /*沿着行轴对齐grid item 里的内容*/
  38.                 justify-self:stretch;
  39.                 /*沿着列轴对齐grid item 里的内容*/
  40.                 align-self: center;
  41.             }
  42.  
  43.             .item-1 {
  44.                 background: #008000;
  45.             }
  46.  
  47.             .item-2 {
  48.                 background: #808080;
  49.             }
  50.  
  51.             .item-3 {
  52.                 background: gold;
  53.             }
  54.  
  55.             .item-4 {
  56.                 background: pink;
  57.             }
  58.  
  59.             .item-5 {
  60.                 background: yellow;
  61.             }
  62.  
  63.             .item-6 {
  64.                 background: #FFD700;
  65.             }
  66.         </style>
  67.     </head>
  68.  
  69.     <body>
  70.         <div class="container">
  71.             <div class="item item-1">1</div>
  72.             <div class="item item-2">2</div>
  73.             <div class="item item-3">3</div>
  74.             <div class="item item-4">4</div>
  75.             <div class="item item-5">5</div>
  76.             <div class="item item-6">6</div>
  77.         </div>
  78.     </body>
  79.  
  80. </html>

grid 布局 属性示例的更多相关文章

  1. 理解css中Grid布局，在项目中如何实现grid页面布局

    简介 CSS中Grid是一种二维网格式布局方式.我们常规使用table.float.position.inline-block等布局,但它们遗漏了很多功能,例如垂直居中.后来css3中flexbox的 ...

  2. [转]使用CSS3 Grid布局实现内容优先

    使用CSS3 Grid布局实现内容优先  http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...

  3. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  4. Grid布局指南

    简介 CSS网格布局(又称“网格”),是一种二维网格布局系统.CSS在处理网页布局方面一直做的不是很好.一开始我们用的是table(表格)布局,然后用float(浮动),position(定位)和in ...

  5. CSS Grid布局指南

    简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...

  6. 学习CSS Grid布局

    一. 重要术语: CSS Grid(网格) 布局(又称为 "Grid(网格)" ),是一个二维的基于网格的布局系统,它的目标是完全改变我们基于网格的用户界面的布局方式. FlexB ...

  7. css：display：grid布局

    简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...

  8. 前端页面布局之Grid布局

    在讲布局前,先说两句题外话,写博时,突然想到了郭德纲说过的一个段子“说两个人骂架,不是你有理,你嗓门大,你唾沫星子崩我一脸,你就能骂赢,要看谁命长,过两年你死了,我站你坟头咋说咋是对的,你在那小匣里还 ...

  9. grid 布局（2）

    目录 grid 布局(2) grid区域属性 网格线名称 grid-template-areas 属性 grid-auto-flow 容器内子元素的属性 grid 布局(2) grid区域属性 网格线 ...

随机推荐

  1. rest_frameword框架的基本组件

    序列化 序列化:转化数据和校验数据(提交数据时校验数据类型) 开发我们的Web API的第一件事是为我们的Web API提供一种将代码片段实例序列化和反序列化为诸如json之类的表示形式的方式.我们可 ...

  2. hdu 3870（平面图最小割转最短路）

    Catch the Theves Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 65768/32768 K (Java/Others) ...

  3. Django 静态文件配置 （Nginx）

    初学Django,在访问静态文件时候遇到很多误区,一直配置不成功,在此记录一下. Django静态文件访问分为两种:一种是Debug模式下,测试开发网站时对静态文件的访问,一种是实际生产环境中对静态文 ...

  4. linux中直接进行系统调用和通过C库调用的示例

    深入了解LINUX,这方面内容不可少,这段时间再补补.. #include <syscall.h> #include <unistd.h> #include <stdio ...

  5. crontab执行python报错原因总结

    1.相对路径导致   2.环境变量问题,py脚本首行应指定python路径,不能用软链接   3.python3.3是默认utf-8,需要 &&脚本   最好使用crontab -e ...

  6. 漫谈网络通信——从OSI网络模型到TCP/IP协议族

    OSI七层模型 OSI(Open System Interconnection,开放系统互联)七层网络模型成为开放式系统互联参考模型,是一个把网络通信在逻辑上的定义,也可以理解成为定义了通用的网络通信 ...

  7. （四）mysql数据类型

    数据类型基本介绍 数值类型 整形类型:tinyint,int,bigint 浮点类型:float,double 字符串类型 char系列:char varchar text系列:text blob系列 ...

  8. 洛谷——P1287 盒子与球

    P1287 盒子与球 题目描述 现有r个互不相同的盒子和n个互不相同的球,要将这n个球放入r个盒子中,且不允许有空盒子.问有多少种方法? 例如:有2个不同的盒子(分别编为1号和2号)和3个不同的球(分 ...

  9. CodeForces 348C Subset Sums(分块)（nsqrtn）

    C. Subset Sums time limit per test 3 seconds memory limit per test 256 megabytes input standard inpu ...

  10. Milk Pails（BFS）

    Milk Pails 时间限制: 1 Sec  内存限制: 64 MB提交: 16  解决: 4[提交][状态][讨论版] 题目描述 Farmer John has received an order ...