grid 布局 设置行列间距
<!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 布局 设置行列间距的更多相关文章
- 前端每日实战：141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BOeEYV 可交互视频 此视频是可 ...
- 前端每日实战：142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGZbmQ 可交互视频 此视频是可 ...
- wpf后置代码中的Grid布局以及图片路径的设置
之前用Grid练习连连看布局时,遇到了几个困惑.此次就把当时的一些收获写出来,供以后翻看. 图片路径可能比较常用,所以就写在第一个了. 在xaml中,设置图片非常简单,只要把图片拷贝到资源目录(这里假 ...
- css 中的grid布局基础
CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准 ...
- grid 布局的使用
grid 布局的使用 css 网格布局,是一种二维布局系统. 浏览器支持情况:老旧浏览器不支持, 概念: 网格容器.元素应用dispalay:grid,它是所有网格项的父元素. <div cla ...
- 图解CSS布局（一）- Grid布局
图解CSS布局(一)- Grid布局 先上图 简介 Grid 布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可 ...
- CSS学习笔记：grid布局
目录 一.Grid布局简介 二.Grid布局的一些概念 三. 容器元素属性 1. grid-template-* 1.1 网格行和列的设置 1.2 repeat的使用 1.3 使用fr 1.4 aut ...
- [转]使用CSS3 Grid布局实现内容优先
使用CSS3 Grid布局实现内容优先 http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...
- CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...
随机推荐
- python 九九乘法表
for i in range(1,10): for j in range(1,i+1): print('%d x %d = %d\t' %(j, i, j*i),end="") p ...
- 深入理解Java的注解（Annotation）：基本概念（1）
zz自:http://www.cnblogs.com/peida/archive/2013/04/23/3036035.html 什么是注解(Annotation): Annotation(注解)就是 ...
- python算法：约瑟夫问题
据说著名犹太历史学家 Josephus有过以下的故事:在罗马人占领乔塔帕特後,39 个犹太人与Josephus及他的朋友躲到一个洞中,39个犹太人决定宁愿死也不要被人抓到,于是决定了一个自杀方式,41 ...
- poj 1654(利用叉积求面积)
Area Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 17937 Accepted: 4957 Description ...
- （一）shell基础
(1)shell作用: 1)自动化批量系统初始化程序(软件安装,时区设置,安全策略) 2)自动化批量软件部署程序(LNMP,LAMP,LNTM) 3)管理应用程序(kvm,集群管理扩容) 4)日志分析 ...
- 服务器重启之后wdcp打不开【解决】
service wdapache restart
- cogs 双服务点设置
4. 双服务点设置 ☆ 输入文件:djsb.in 输出文件:djsb.out 简单对比时间限制:1 s 内存限制:128 MB 问题描述为了进一步普及九年义务教育,政府要在某乡镇建立两 ...
- Proxy（2016山东省省赛C）（最短路）（spfa)
问题 C: Proxy 时间限制: 2 Sec 内存限制: 128 MB提交: 17 解决: 5[提交][状态][讨论版] 题目描述 Because of the GFW (Great Firew ...
- 揭秘响应式web设计
0.引言 响应式web设计的作用主要使网页能在不同小大的显示窗口下依然优雅.当前的显示窗口有pc,ipad,iphone以及一些其他的设备.不同的显示窗口的分辨率各不相同,如何在不同的分辨率的情况下 ...
- web前端读取文本文件内容
html5+js实现,参照xxyy888的CSDN博客文章<使用HTML+javascrpt读取txt文本文件>失败,将作者文章中的代码重新整理了下依然不行,文章代码存在的问题是括号错误, ...