<!DOCTYPE html>

<html lang="zh">

    <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>grid 布局 属性示例</title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            .container {

                display: grid;

                /*列布局*/

                grid-template-columns: 1fr 2fr;

                /*行布局*/

                grid-template-rows: 100% 100%;

                /*列间距*/

                grid-column-gap: 15px;

                /*行间距*/

                grid-row-gap: 15px;

                /*行轴对齐方式*/

                justify-items: stretch;

                /*列轴对齐方式*/

                align-items: stretch;

                /*网格总大小小于网格容器大小时，网格容器内的网格行轴对齐方式*/

                justify-content:center;

                /*网格总大小小于网格容器大小时，网格容器内的网格列轴对齐方式*/

                align-content:center;

            }

            .item{

                text-align: center;

                /*沿着行轴对齐grid item 里的内容*/

                justify-self:stretch;

                /*沿着列轴对齐grid item 里的内容*/

                align-self: center;

            }

            .item-1 {

                background: #008000;

            }

            .item-2 {

                background: #808080;

            }

            .item-3 {

                background: gold;

            }

            .item-4 {

                background: pink;

            }

            .item-5 {

                background: yellow;

            }

            .item-6 {

                background: #FFD700;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <div class="item item-1">1</div>

            <div class="item item-2">2</div>

            <div class="item item-3">3</div>

            <div class="item item-4">4</div>

            <div class="item item-5">5</div>

            <div class="item item-6">6</div>

        </div>

    </body>

</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. c语言中Triplet是什么意思？

    此词条多出现于三元组抽象数据类型的定义. 例如: 数据结构编程试验中,构造三元组类型. 1．三元组抽象数据类型的定义 ADT Triplet { 数据对象:D={e1, e2, e3| e1, e2, ...

  2. 运行微信支付demo

    首先要说说写这篇文章的初衷:集成支付宝支付运行demo都是可以正常运行的,但是我下载下来微信支付的demo,却发现一大堆报错,而且相关文章几乎没有,可能大家觉得没必要,也许你觉得很简单:但是技术大牛都 ...

  3. Codeforces Round #424 B. Keyboard Layouts（字符串，匹配，map）

    #include <stdio.h> #include <string.h> ][]; ]; ]; int main(){ scanf(]); scanf(]); scanf( ...

  4. 最小生成树(Minimum Spanning Tree)——Prim算法与Kruskal算法+并查集

    最小生成树——Minimum Spanning Tree,是图论中比较重要的模型,通常用于解决实际生活中的路径代价最小一类的问题.我们首先用通俗的语言解释它的定义: 对于有n个节点的有权无向连通图,寻 ...

  5. 贮油点问题(C++)

    贮油点问题…..一道送命系列的递推… 描述 Description 一辆重型卡车欲穿过S公里的沙漠,卡车耗汽油为1升/公里,卡车总载油能力为W公升.显然卡车装一次油是过不了沙漠的.因此司机必须设法在沿 ...

  6. NOIP2018提高组模拟题（四）

    能量(energy) Description ​ 有一块能量田,它的形状是 n*m的矩形,每一个格子上都有一个能量值 a[x][y] (可正可负).一块矩形田的能量定义为它的每个格子的能量值之和. ​ ...

  7. mdadm Raid5 /dev/md0 lost a disk and recovery from another machine

    centos -- how to add a new disk into a mdadm raid5 /dev/md0 which lost a /dev/sdc1 disk and  revoery ...

  8. 指定等级 Exercise07_01

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:指定等级 * */ public class Exercise07_01 ...

  9. 图像视图-ImageView

    (一) 知识点: (1)imageView.setImageAlpha(Alpha):设置图片透明度 (2)在布局imageView中设置图片位置:android:scaleType="ce ...

  10. 实现tomcat与IIS共用80端口

    一.80端口被system占用的问题 目前生产环境的需要两种方式网站发布: [1].使用IIS发布.net开发的网站: [2].使用tomcat发布java开发的网站: 启动tomcat的时候发现无法 ...