html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="布局grid.css">
<title>grid布局</title>
</head>
<body>
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
</body>
</html>

css部分

1.Gutters

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  row-gap: 1em;
}

 

2.Positioning items against lines

<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
} .box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
} .box2 {
grid-column-start: 1;
grid-row-start: 3;
grid-row-end: 5;
}
 


本次我也只是拿了老师上课讲的里面中的2个,只进行了简单的grid的布局其中的一个小的布局方式,grid的布局远不止这些,在现在的主流布局方式有grid外还有felxbox等。

在日常网页布局中这2者不是相互排斥的,我们在日常的学习中要学会用好这2个布局,

  • grids 适用于大画面的布局。
  • Flexbox 来定位设计上一些较小的细节。
  • Flexbox 适用于单一维度的布局,轴。

下次课程老师将教我们felxbox布局。对grid布局感兴趣的同学,这有个传送门:http://devdocs.io/css/css_grid_layout/basic_concepts_of_grid_layout

也希望大家可以给我指点指点,谢谢大家。

新手的grid布局的更多相关文章

  1. WPF中Grid布局

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

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

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

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

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

  4. css grid布局的首次使用

    首先来看一下效果图 接下来废话不多说,先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. 学习ExtJS的grid布局

    这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. ...

  6. CSS字体渐变 & 隐藏浏览器滚动条 & grid布局(转载)

    字体渐变  https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条  https://blog.csdn. ...

  7. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  8. 快速使用CSS Grid布局,实现响应式设计

    常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...

  9. 补发————grid布局

    CSS Grid布局是CSS中最强大的布局系统.与flexbox的一位布局不同的是CSS Grid布局是一个二维布局系统,即它可以同时处理列和行.通过将CSS规则应用于父元素和其子元素,就可以轻松使用 ...

随机推荐

  1. 【Jquery】jquery刷新页面(局部及全页面刷新)

    下面介绍全页面刷新方法:有时候可能会用到window.location.reload()刷新当前页面.parent.location.reload()刷新父亲对象(用于框架)opener.locati ...

  2. tar命令加密压缩/解密解压

    在tar解压文件时发生下面错误信息 gzip: stdin: not in gzip format tar: Child returned status 1 tar: Error is not rec ...

  3. 网络瓶颈、线程死锁、内存泄露溢出、栈堆、ajax

    网络瓶颈:网络传输性能及稳定性的一些相关元素 线程死锁:多个线程因竞争资源造成的一种僵局 下面我们通过一些实例来说明死锁现象. 先看生活中的一个实例,2个人一起吃饭但是只有一双筷子,2人轮流吃(同时拥 ...

  4. mysql id_logfile 日志

    ib_logfile 文件原理 ib_logfile0 是innodb中事务日志,记录系统的回滚,重做日志,记录的是文件的物理更改,存放位置my.ini 中的 datadir="D:\php ...

  5. java程序员的从0到1:统计某字符串在某文件中出现的次数(面试题)

    目录: 1. 编程题目 2. 方法一 3. 方法二 4. 方法三 5. 方法四 6. 总结 正文: 1. 编程题目 写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数. 2. ...

  6. C++_类继承1-从一个简单的类开始

    面向对象编程的主要目的之一是:提供可重用的代码.尤其是项目很庞大的时候,重用测试过的代码比重新编码代码要好得多. C++提供了更高层次的重用性.其中之一就是继承这个概念. 一些厂商提供了类库.类库由类 ...

  7. POJ_3090 Visible Lattice Points 【欧拉函数 + 递推】

    一.题目 A lattice point (x, y) in the first quadrant (x and y are integers greater than or equal to 0), ...

  8. 洛谷 P4269 / loj 2041 [SHOI2015] 聚变反应炉 题解【贪心】【DP】

    树上游戏..二合一? 题目描述 曾经发明了零件组装机的发明家 SHTSC 又公开了他的新发明:聚变反应炉--一种可以产生大量清洁能量的神秘装置. 众所周知,利用核聚变产生的能量有两个难点:一是控制核聚 ...

  9. git 项目常用命令

    git remote -v 查看对应的远程仓库 git fetch origin master 将某个远程主机的更新,全部取回本地 git merge origin master 合并分支 git a ...

  10. [转] SpringBoot RESTful 应用中的异常处理小结

    [From] https://segmentfault.com/a/1190000006749441 SpringBoot RESTful 应用中的异常处理小结 永顺 2016年08月29日发布 赞  ...