<!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. admin管理工具

    admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INSTALLE ...

  2. android studio 自定义路径安装报错"You are attempting to install the android SDK

    android studio 自定义路径安装报错"You are attempting to install the android SDK 解决方法: 出现这个提示 主要是安装 Andro ...

  3. PHP的普通传值与引用传值以及unset

    首先,要理解变量名存储在内存栈中,它是指向堆中具体内存的地址,通过变量名查找堆中的内存; 普通传值,传值以后,是不同的地址名称,指向不同的内存实体; 引用传值,传引用后,是不同的地址名称,但都指向同一 ...

  4. Unable to set localhost. This prevents creation of a GUID

    原因:tomcat无法解析hostname 解决方案:解决方案:在/etc/hosts文件中添加hostname解析

  5. Response 部分功能

    设置状态码的方法:    void setStatus(int sc)     void setStatus(int sc, String sm) 设置响应头的方法:    void setHeade ...

  6. Android学习--探究服务(一)

    什么是服务? 服务(service)是Android中实现程序后台运行的解决方案,它非常适合去执行那些不需要和用户交互而且还要求长期运行的任务.服务的运行不依赖任何的用户界面,即使应用被切换到后台或者 ...

  7. 在scientificlinux7(centos7)中搭建apache+php本地服务器

    首先安装httpd(apache), 开始没有注意,以为可以这样安装 yum install apache 结果不对,搜索下 yum -qvh apache 命令是错的,在来 yum search a ...

  8. 树莓派编译nginx，支持rtmp直播

    树莓派3B+ 系统更新至最新 下载依赖 sudo apt-get update sudo apt-get install libxslt1-dev libgd-dev libgeoip-dev lib ...

  9. 【spfa】bzoj1295 [SCOI2009]最长距离

    题意:给你一个n*m的点阵.有些点是障碍,求一个欧几里得距离最大的点对(A,B),使得在移走的障碍≤T的情况下,可以从A走到B. 建图,跑n*m次spfa,求出从 每个点 出发到 其他所有点 的 经过 ...

  10. [CF468D]Tree

    [CF468D]Tree 题目大意: ​ 一棵\(n(n\le10^5)\)个编号为\(1\sim n\)的点的带边权的树,求一个排列\(p_{1\sim n}\),使\(\sum dis(i,p_i ...