CSS 对于grid布局的理解，举例代码及解释
网格布局介绍：
CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些方法本质上都是只是 hack 而已，并且遗漏了很多重要的功能（例如垂直居中）。Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局（实际上 Flexbox 和 Grid 能结合在一起工作，而且配合得非常好）。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块，我们终于不需要想尽办法hack 页面布局样式了。
网格布局举例及注释：
<!doctype html>
<html>
<head>
<title>grid layout</title>
<style>
.wrapper {
display: grid; /*定义grid布局*/
grid-template-columns: repeat(3, 1fr); /*网格的列*/
grid-gap: 10px; /*列和行之间的间距为10px*/
grid-auto-rows: minmax(100px, auto); /* 行从最小100px到延申*/
}
.one { /* one类 */
grid-column: 1 / 3; /* 列从第一行到第三行 */
grid-row: 1; /* 第一行 */
} .two { /* two类 */
grid-column: 2 / 4; /* 列从第二列到第四列 */
grid-row: 1 / 3; /* 行从第一行到第三行 */
}
.three { /* three类 */
grid-column: 1; /* 第一列 */
grid-row: 2 / 5; /* 行从第二行到第五行 */
}
.four { /* four类 */
grid-column: 3; /* 第三列 */
grid-row: 3; /* 第三行 */
}
.five { /* five类 */
grid-column: 2; /* 第二列 */
grid-row: 4; /* 第四行 */
}
.six { /* six类 */
grid-column: 3; /* 第三列 */
grid-row: 4; /* 第四行 */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
</html>
CSS 对于grid布局的理解，举例代码及解释的更多相关文章
- 理解css中Grid布局，在项目中如何实现grid页面布局
简介 CSS中Grid是一种二维网格式布局方式.我们常规使用table.float.position.inline-block等布局,但它们遗漏了很多功能,例如垂直居中.后来css3中flexbox的 ...
- 前端每日实战：141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BOeEYV 可交互视频 此视频是可 ...
- 前端每日实战：142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGZbmQ 可交互视频 此视频是可 ...
- 图文详解前端CSS中的Grid布局，你真的可以5分钟掌握
前言 网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局 首先我们看看 ...
- 第二次前端作业grid布局练习
grid布局 CSS Grid(网格) 布局(又称为 “Grid(网格)” ),是一个二维的基于网格的布局系统,它的目标是完全改变我们基于网格的用户界面的布局方式.CSS 一直用来布局我们的网页,但一 ...
- 新手的grid布局
html部分 <!DOCTYPE html><html><head><meta charset="utf-8"><link r ...
- CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...
- 快速使用CSS Grid布局，实现响应式设计
常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...
- CSS Grid布局指南
简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...
随机推荐
- centos下MySQL登录1045问题解决
由于需要在centos下部署整个应用,自然少不了对数据库的操作.但很多人可能会遇到一些问题,比如创建用户成功,但是却无法登录. 无法登陆一般就两个原因.第一,远程访问端口没开,第二个原因就是密码错误了 ...
- 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式
边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
- 一文MyBatis-Plus快速入门
目录 一.依赖及配置 1.在idea中创建一个SpringBoot项目,在pom.xml中添需要的依赖 2.配置数据库连接 3.在启动类中添加注解 @MapperScan 扫描Mapper接口包 4. ...
- LibreOJ6279. 数列分块入门 3 题解
题目链接:https://loj.ac/problem/6279 题目描述 给出一个长为 \(n\) 的数列,以及 \(n\) 个操作,操作涉及区间加法,询问区间内小于某个值 \(x\) 的前驱(比其 ...
- 小小知识点（二十二）显示屏与主机之间连接，出现无信号字样时，应检查是否正确选择集显和独显VGA接口
显示屏与主机之间连接,出现无信号字样时,应检查是否正确选择集显和独显VGA接口 通过VGA接口判断集成显卡和独立显卡.在台式机主机上,VGA接口竖着放置的说明是集成显卡,VGA接口横着放置的说明是独立 ...
- 【Python3爬虫】突破反爬之应对前端反调试手段
一.前言 在我们爬取某些网站的时候,会想要打开 DevTools 查看元素或者抓包分析,但按下 F12 的时候,却出现了下面这一幕: 此时网页暂停加载,自动跳转到 Source 页面并打开了一个 ...
- 侠说java8-行为参数化(开山篇)
啥是行为参数化 行为参数化的本质是不执行复杂的代码块,让逻辑清晰可用. 相信使用过js的你肯定知道,js是可以传递函数的,而在 java中也有类似的特性,那就是匿名函数. 理解:行为参数化是一种方法, ...
- Linux下卸载oracle需要删除的文件
卸载oracle需要删除的文件 rm -rf /data1/oracle/app #oracle安装目录在/data1/oracle中 rm -rf /usr/local/bin/dbhome rm ...
- structs2的048漏洞复现 2.3.32版本
S2-048 远程代码执行漏洞 影响版本: 2.0.0 - 2.3.32 之前在网上说只要时2.3.*的版本都有这个漏洞,自己装了个2.3.34的试了几次都没有执行 然后下载了找到了这篇文章才知道影响 ...
- 【转】Matlab多项式拟合
转:https://blog.csdn.net/hwecc/article/details/80308397 例: x = [0.33, 1.12, 1.41, 1.71, 2.19] y = [0. ...