<!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. Django基础之视图

    Django的View(视图) 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误, ...

  2. MATLAB作图方法与技巧(二)

    作为MATLAB作图方法与技巧(一)的补充 1.绘制二维散点图 ① scatter函数 scatter(x,y,s,c)函数绘制向量x和y的散点图,其中s代表点的大小,c代表点的形状,s和c缺省时为默 ...

  3. Java中导入导出Excel -- POI技术

    一.介绍: 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已经习惯用Excel打印.这样在我们实 ...

  4. 【转】virtualenv / venv 使用小结

     在python3.3之前,需要利用virtualenv等工具来实现python虚拟开发环境的配置,在python3.3中加入了venv模块支持原生创建虚拟环境.但在python3.3版本中venv模 ...

  5. 整数快速乘法/快速幂+矩阵快速幂+Strassen算法

    快速幂算法可以说是ACM一类竞赛中必不可少,并且也是非常基础的一类算法,鉴于我一直学的比较零散,所以今天用这个帖子总结一下 快速乘法通常有两类应用:一.整数的运算,计算(a*b) mod c  二.矩 ...

  6. Disjoint Sets

    Disjoint Sets Disjoint Sets的意思是一堆集合們,它們相互之間都沒有交集.沒有交集是指:各個集合之間沒有擁有共同.相同的元素.中文稱作「分離集」. Disjoint Sets的 ...

  7. [Contest20180325]序列

    Hogura有一个序列$a$,她希望你帮她维护下面的这些操作. $1\ l\ r\ x$对$l\leq i\leq r$的$a_i$执行$a_i=a_i+x$ $2\ l\ r\ x$对$l\leq ...

  8. 【后缀数组】uoj#35. 后缀排序

    模板 #include<cstdio> #include<algorithm> #include<cstring> using namespace std; #de ...

  9. TabHost

    (一) 知识点:id使用系统自带 1.效果图: 2.布局 activity_main.xml <?xml version="1.0" encoding="utf-8 ...

  10. VHDL硬件描述语言实现数字钟

    --VHDL上机的一个作业,程序太长实验报告册上写不下了.于是就在博客上留一份吧.LIBRARY IEEE; USE IEEE.STD_LOGIC_1164.ALL; USE IEEE.STD_LOG ...