grid布局

CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统，它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些方法本质上都是只是 hack 而已，并且遗漏了很多重要的功能（例如垂直居中）。Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局（实际上 Flexbox 和 Grid 能协同工作，而且配合得非常好）。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块

Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。

CSS Grid 今年也获得了主流浏览器（Safari，Chrome，Firefox，Edge）的原生支持。

grid布局练习

<!DOCTYPE html>
<html lang="en">
<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>Document</title>

<style>

.wrapper {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 10px;

  grid-auto-rows: minmax(100px, auto);

}

.one {

  grid-column: 1 / 3;

  grid-row: 1;

}

.two {

  grid-column: 2 / 4;

  grid-row: 1 / 3;

}

.three {

  grid-row: 2 / 5;

  grid-column: 1;

}

.four {

  grid-column: 3;

  grid-row: 3;

}

.five {

  grid-column: 2;

  grid-row: 4;

}

.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>

效果如图

（颜色为浏览器自动渲染效果）
 

第二次前端作业grid布局练习的更多相关文章

  1. 前端页面布局之Grid布局

    在讲布局前,先说两句题外话,写博时,突然想到了郭德纲说过的一个段子“说两个人骂架,不是你有理,你嗓门大,你唾沫星子崩我一脸,你就能骂赢,要看谁命长,过两年你死了,我站你坟头咋说咋是对的,你在那小匣里还 ...

  2. 图文详解前端CSS中的Grid布局，你真的可以5分钟掌握

    前言 网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局 首先我们看看 ...

  3. 前端每日实战：141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BOeEYV 可交互视频 此视频是可 ...

  4. 前端每日实战：142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGZbmQ 可交互视频 此视频是可 ...

  5. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  6. CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003

    Title/ CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003 序 : 写完这篇文章后,我准备一直做下去了,包括flight的各个分区,也看到前方的路. ...

  7. WPF中Grid布局

    WPF中Grid布局XMAl与后台更改,最普通的登录界面为例. <Grid Width="200" Height="100" > <!--定义 ...

  8. [转]使用CSS3 Grid布局实现内容优先

    使用CSS3 Grid布局实现内容优先  http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...

  9. wpf后置代码中的Grid布局以及图片路径的设置

    之前用Grid练习连连看布局时,遇到了几个困惑.此次就把当时的一些收获写出来,供以后翻看. 图片路径可能比较常用,所以就写在第一个了. 在xaml中,设置图片非常简单,只要把图片拷贝到资源目录(这里假 ...

随机推荐

  1. Bashu2445 -- 【网络流24题-10】餐巾问题

    2445 -- [网络流24题-10]餐巾问题 Description 一个餐厅在相继的n天里,每天需要用的餐巾数不尽相同.假设第i天需要ri块餐巾(i=1,2,…,n).餐厅可以购买新的餐巾,每块餐 ...

  2. 微信小程序 web-view 的 url 带参问题

    在微信小程序开发过程中,会需要跳转到外部链接,微信提供了 <web-view>组件供我们使用. 为减少重复代码,一般会将这个功能单独抽取为一个页面供大家使用: <template&g ...

  3. JS应用实例6：二级联动

    本案例很常用,应用场景:注册页面填写籍贯,省市二级联动 总体思想:创建一个二维数组存入省市,获取选中的省份并比较,创建标签遍历添加 代码: <!DOCTYPE html> <html ...

  4. WCF绑定netTcpBinding寄宿到控制台应用程序

    契约 新建一个WCF服务类库项目,在其中添加两个WCF服务:GameService,PlayerService 代码如下: [ServiceContract] public interface IGa ...

  5. git无法识别新增的文件

    问题是这样的我新增几个文件夹打算提交到git库,但输入指令:“git status” 发现新增的文件夹并没有出现在准备提交区里 不知道什么原因造成的后来我百度找到方法 使用指令:“git add -f ...

  6. iOS-SVProgressHUDMaskType

    SVProgressHUDMaskTypeNone:默认图层样式,当HUD显示的时候,允许用户交互.   SVProgressHUDMaskTypeClear:当HUD显示的时候,不允许用户交互.   ...

  7. Django项目中使用celery做异步任务

    异步任务介绍 在写项目过程中经常会遇到一些耗时的任务, 比如:发送邮件.发送短信等等~.这些操作如果都同步执行耗时长对用户体验不友好,在这种情况下就可以把任务放在后台异步执行 celery就是用于处理 ...

  8. Mac 常用软件下载及使用教程地址推荐

    知您网: http://www.zhinin.com Xclient:http://xclient.info/?t=40707b872b81127fdfd1dc4700d1a155c12f35bd 音 ...

  9. package.json文件中dependencies和devDependencies的区别

    在工作和学习中,我经常会用的npm 下载各种包,有时就会遇到各种npm 的形式,现在就捋一捋 首先要先了解   package.json文件中dependencies和devDependencies的 ...

  10. 如何更优雅的在kubernetes平台下记录日志

    背景 传统项目里面记录日志大多数都是将日志记录到日志文件,升级到分布式架构以后,日志开始由文件转移到elasticsearch(es)中来存储,达到集中管理.在kubernetes平台里面把日志记录到 ...