1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4. <head>
  5. <meta charset="UTF-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8. <title>grid 布局 设置行列间距</title>
  9. <style type="text/css">
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. }
  14.  
  15. .container {
  16. display: grid;
  17. grid-template-columns: 1fr 2fr;
  18. grid-template-rows: 100% 100%;
  19. grid-column-gap: 15px;
  20. grid-row-gap: 15px;
  21. }
  22.  
  23. .item-1 {
  24. background: #008000;
  25. }
  26.  
  27. .item-2 {
  28. background: #808080;
  29. }
  30.  
  31. .item-3 {
  32. background: gold;
  33. }
  34.  
  35. .item-4 {
  36. background: pink;
  37. }
  38.  
  39. .item-5 {
  40. background: yellow;
  41. }
  42.  
  43. .item-6 {
  44. background: #FFD700;
  45. }
  46. </style>
  47. </head>
  48.  
  49. <body>
  50. <div class="container">
  51. <div class="item item-1">1</div>
  52. <div class="item item-2">2</div>
  53. <div class="item item-3">3</div>
  54. <div class="item item-4">4</div>
  55. <div class="item item-5">5</div>
  56. <div class="item item-6">6</div>
  57. </div>
  58. </body>
  59.  
  60. </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. Redis-4.0.8 readme.md

    This README is just a fast *quick start* document. You can find more detailed documentation at [redi ...

  2. SVN的配置和使用

    1.安装前必备 获取 Subversion 服务器程序 到官方网站 http://subversion.tigris.org/    我下的是CollabNetSubversion-server-1. ...

  3. C# 对话框使用大全

    对话框中我们常用了以下几种:1.文件对话框(FileDialog) 它又常用到两个: 打开文件对话框(OpenFileDialog) 保存文件对话(SaveFileDialog)2.字体对话框(Fon ...

  4. HDU 1495 非常可乐【BFS/倒水问题】

    非常可乐 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...

  5. The 15th Zhejiang Provincial Collegiate Programming Contest Sponsored by TuSimple - J CONTINUE...?

    CONTINUE...? Time Limit: 1 Second      Memory Limit: 65536 KB      Special Judge DreamGrid has  clas ...

  6. Trie树&kmp&AC自动机&后缀数组&Manacher

    Trie 计数+Trie,读清题意很重要 https://vjudge.net/problem/UVALive-5913 kmp AC自动机 模板:https://vjudge.net/problem ...

  7. 5、Flask实战第5天:页面跳转和重定向

    GET和POST请求 在网络请求中有许多请求方式,比如GET, POST, DELETE, PUT等,最常用的就是GET和POST GET 只会在服务器上获取资源,不会更改服务器的状态,这种请求方式推 ...

  8. python url拼接

    import datetime,requests import json,time,urllib import hashlib self.url_domain = “www.baidu,com/” u ...

  9. 【贪心】Codeforces Round #401 (Div. 2) D. Cloud of Hashtags

    从后向前枚举字符串,然后从左向右枚举位. 如果该串的某位比之前的串的该位小,那么将之前的那串截断. 如果该串的某位比之前的串的该位大,那么之前那串可以直接保留全长度. 具体看代码. #include& ...

  10. 【贪心】Gym - 100507H - Pair: normal and paranormal

    每次取相邻的两个可以射击的从序列中删除,重复n次. 可以看作括号序列的匹配. #include<cstdio> #include<vector> using namespace ...