<!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. Selenium2+python自动化-窗口多标签处理方法总结(转载)

    本篇转自博客:上海-小T 原文地址:https://i.cnblogs.com/EditArticles.aspx?opt=1 我们在用Selenium遇到多个浏览器窗口或单个浏览器多个标签(Tab) ...

  2. KVM(五)libvirt 介绍

    1. Libvirt 是什么 为什么需要Libvirt? Hypervisor 比如 qemu-kvm 的命令行虚拟机管理工具参数众多,难于使用. Hypervisor 种类众多,没有统一的编程接口来 ...

  3. log4j 输入不同日志文件

    log4j的强大功能无可置疑,但实际应用中免不了遇到某个功能需要输出独立的日志文件的情况,怎样才能把所需的内容从原有日志中分离,形成单独的日志文件呢?其实只要在现有的log4j基础上稍加配置即可轻松实 ...

  4. <Linux性能调优指南>主要思路流程

    网上IBM很早放出的一本免费电子书, 十来年了,参考意义还是很大. 国内有翻译成中文在线阅读的版本. 见如下两个URL Linux Performance and Tuning Guidelines ...

  5. 洛谷 P3383 【模板】线性筛素数-线性筛素数(欧拉筛素数)O(n)基础题贴个板子备忘

    P3383 [模板]线性筛素数 题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入输出格式 输入格式: 第一行包含两个正整数N.M,分别表示查询的范 ...

  6. Codeforces 608 A. Saitama Destroys Hotel

      A. Saitama Destroys Hotel   time limit per test 1 second memory limit per test 256 megabytes input ...

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

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

  8. Codeforces 1038E Maximum Matching

    可能写了个假算法 假设定义:含有一个欧拉路的图为类欧拉图 欧拉路的定义:一个无向连通图中,存在一条路径对所有边都遍历且仅遍历一次:判断方法:该连通图中度为奇数的点的个数不能超过2,即为0或者2 题目解 ...

  9. NOIP2018提高组模拟题（六）

    购物(shop) Description 小林来到商店中进行购物.商店里一共有 n 件物品,第 i 件物品的价格为 a[i] 元.小林总共需要购买 m 件物品,他希望他所花费的钱最少,请你计算出最小 ...

  10. Python RE模块中search()和match()的区别

    match()函数只检测RE是不是在string的开始位置匹配, search()会扫描整个string查找匹配: 也就是说match()只有在0位置匹配成功的话才有返回, 如果不是开始位置匹配成功的 ...