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. python基础之内建函数（二）

    (7)max() 函数:返回列表.元祖或字符串中最大的元素,注意:字母“大于”数字.小写字母“大于”大写字母(字母排序是根据ASCII码表排的) 例如: >>>num = list ...

  2. 命令行里打 cd 简直是浪费生命

    简评:作为工程师,你在命令行下最常打的命令无非就是 cd 与 ls.这些年你浪费了多少时间? 作为一个程序员或者在 shell 中花费大量时间的人,你可能会经常以一种低效率的方式在目录中来回移动,特别 ...

  3. location的属性

    http://localhost:8080/?a=b#/login location.host "localhost:8080" location.port 8080 locati ...

  4. Python3之时间模块time & datetime & calendar

    一. 简介 python 提供很多方式处理日期与时间,转换日期格式是一个常见的功能. 时间元组:很多python函数用一个元组装起来的9组数字处理时间. python中时间日期格式化符号: %y 两位 ...

  5. iOS苹果和微信中音频和视频实现自动播放的方法

    通过下面的方式可以解决,在iPhone手机微信中正常自动播放. 必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效,猜测微信接口做了处理~ <audio prel ...

  6. Mac的Parallels在启动Win的时候让它独立全屏窗口

    这里备忘一下,由于经常需要***,Win方法比较多少,所以使用Parallels在Win下***还是很有必要的,为了使用使用方便,一般让Parallels启动系统之后自动生成一个独立的全窗口,方便来回 ...

  7. Sql server if-else以及switch

    --相当于C#中的if-else 根据levle列的值来判断自定义列显示的内容--要求then后面的数据类型必须一致 select * ,头衔=case when [levle]=1 then '菜鸟 ...

  8. PHP生成pdf文档

    首先需要去github下载tcpdf类库 require_once('./tcpdf/tcpdf.php');         date_default_timezone_get('Asia/Shan ...

  9. springcloud微服务 总结一

    一 什么是微服务 译文: 微服务架构是一种架构模式,它提倡将单一应用程序划分成一组小的服务,服务之间互相协调.互相配合,为用户提供最终价值.每个服务运行在其独立的进程中,服务与服务间采用轻量级的通信机 ...

  10. 【算法笔记】B1012 数字分类

    1012 数字分类 (20 分) 给定一系列正整数,请按要求对数字进行分类,并输出以下 5 个数字: A​1​​ = 能被 5 整除的数字中所有偶数的和: A​2​​ = 将被 5 除后余 1 的数字 ...