<!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;

            }

            .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. 前端每日实战：141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BOeEYV 可交互视频 此视频是可 ...

  2. 前端每日实战：142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGZbmQ 可交互视频 此视频是可 ...

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

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

  4. css 中的grid布局基础

    CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准 ...

  5. grid 布局的使用

    grid 布局的使用 css 网格布局,是一种二维布局系统. 浏览器支持情况:老旧浏览器不支持, 概念: 网格容器.元素应用dispalay:grid,它是所有网格项的父元素. <div cla ...

  6. 图解CSS布局（一）- Grid布局

    图解CSS布局(一)- Grid布局 先上图 简介 Grid 布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可 ...

  7. CSS学习笔记：grid布局

    目录 一.Grid布局简介 二.Grid布局的一些概念 三. 容器元素属性 1. grid-template-* 1.1 网格行和列的设置 1.2 repeat的使用 1.3 使用fr 1.4 aut ...

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

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

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

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

随机推荐

  1. pandas基础学习

    1.导入两个数据分析重要的模块import numpy as npimport pandas as pd2.创建一个时间索引,所谓的索引(index)就是每一行数据的id,可以标识每一行的唯一值dat ...

  2. Go嵌入类型及内部提升样例

    这个有点新鲜哟... package main import ( "fmt" ) type notifier interface { notify() } type user st ...

  3. Go语言map映射的基本操作

    对比python, java都有对应的字典类型及哈希类型. package main import ( "fmt" ) //main is the entry of the pro ...

  4. [BZOJ2006] [NOI2010]超级钢琴 主席树+贪心+优先队列

    2006: [NOI2010]超级钢琴 Time Limit: 20 Sec  Memory Limit: 552 MBSubmit: 3591  Solved: 1780[Submit][Statu ...

  5. 【cocos2d-js官方文档】十二、对象缓冲池

    cc.pool的使用场景 经常创建和销毁的元素,例如打飞机游戏里面的子弹等. 不适用的场景:不是很经常创建的物体,比如背景,建筑等. 如何使用cc.pool 让你的类支持cc.pool 首先,你需在需 ...

  6. 随机数问题--已知有个Random7()的函数，返回1到7随机自然数，让利用这个Random7()构造Random10()随机1~10.

    Math.random()随机生成(0,1)之间的float数,Random7随机生成[1,7]之间的整数,利用Random7构造Random10的步骤: 1.生成数a:a是两次Random7的结果, ...

  7. codevs 方格取数

    1043 方格取数 2000年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Descri ...

  8. 【找规律】URAL - 2065 - Different Sums

    就让0出现得尽可能多嘛……大概感受一下就是这样…… 0 0 ... 0 0 0 0 4 -4 3 -3 2 -2 1 -1 #include<cstdio> using namespace ...

  9. 1.3（Spring MVC学习笔记）数据绑定

    一.数据绑定介绍 用户发送过来的数据,只有传递到服务器端的参数上才会起作用. 比如用户输入的用户名和密码要和后台方法中代表用户名和密码的变量关联起来, 从而才能使用用户传递的数据进行一些操作,这样数据 ...

  10. Scala高手实战****第19课：Scala的包、继承覆写及Spark源码鉴赏

    1.SparkSession.scala //导入某个类 import scala.beans.Introspector //导入某包下所有的类 import scala.beans._ //导入某包 ...