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 规则应用于 父元 ...
随机推荐
- 第二篇：zone（区域）
什么是区域? 网络区域定义网络连接的信任级别(the level of trust for network connections).一个网络连接只能是一个区域的一部分,但一个区域可以包含许多网络连接 ...
- CentOS7配置阿里云yum源和EPEL源
配置阿里云yum源(参考:http://mirrors.aliyun.com/help/centos) 1.备份 [root@bogon ~]# cd /etc/yum.repos.d/ [root@ ...
- hdu 5194(DFS)
DZY Loves Balls Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)T ...
- python如何通过pymongo连接到mongodb?
python版本2.7,mongodb2.6.9,pymongo 首先在mongodb中创建一个数据库users,然后连接到users from pymongo import MongoClientm ...
- Mysql优化之——启用查询缓存
启用MySQL查询缓存可以极大地减低数据库服务器的CPU使用率,实际使用情况是:开启前CPU使用率120%左右,开启后降到了10%. 查看查询缓存情况: mysql> show variable ...
- selenium Select用法笔记
select_by value:参数为option中的value属性,例如:HTML代码中 <ignore_js_op> ,应该是value="volvo"这个值,所以 ...
- HDU 6213 Chinese Zodiac 【模拟/水题/生肖】
Problem Description The Chinese Zodiac, known as Sheng Xiao, is based on a twelve-year cycle, each y ...
- 使用Nginx+uWSGI部署Django项目
1.linux安装python3环境 参考链接:https://www.cnblogs.com/zzqit/p/10087680.html 2.安装uwsgi pip3 install uwsgi l ...
- 洛谷——P1795 无穷的序列_NOI导刊2010提高（05）
P1795 无穷的序列_NOI导刊2010提高(05) 题目描述 有一个无穷序列如下: 110100100010000100000… 请你找出这个无穷序列中指定位置上的数字 输入输出格式 输入格式: ...
- 容斥原理 求M以内有多少个跟N是互质的
开始系统的学习容斥原理!通常我们求1-n中与n互质的数的个数都是用欧拉函数! 但如果n比较大或者是求1-m中与n互质的数的个数等等问题,要想时间效率高的话还是用容斥原理! 本题是求[a,b]中与n ...