<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  .box {

    background: orange;

    height: 100px;

    line-height: 100px;

    text-align: center;

    color: #fff;

    font-size: 3em;

    margin-right:15px;

  }

  .box:nth-child(even) {

    background: green;

  }

  .wrapper {

    width: 560px;

    border: 1px solid orange;

    padding: 15px;

    display: grid;

    grid-template-columns: repeat(5, 115px);

    grid-template-rows: auto;

  }

  </style>

</head>

<body>

  <div class="wrapper">

    <div class="box a">A</div>

    <div class="box b">B</div>

    <div class="box c">C</div>

    <div class="box d">D</div>

    <div class="box e">E</div>

    <div class="box f">F</div>

    <div class="box g">G</div>

    <div class="box h">H</div>

    <div class="box i">I</div>

    <div class="box j">J</div>

  </div>

</body>

</html>

grid网格的流动一的更多相关文章

  1. grid网格的流动定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. grid网格的流动grid-auto-flow属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 从 NavMesh 网格寻路回归到 Grid 网格寻路。

    上一个项目的寻路方案是客户端和服务器都采用了 NavMesh 作为解决方案,当时的那几篇文章(一,二,三)是很多网友留言和后台发消息询问最多的,看来这个方案有着广泛的需求.但因为是商业项目,我无法贴出 ...

  4. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  5. python之tkinter使用-Grid(网格)布局管理器

    # 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...

  6. Android BottomSheet：List列表或Grid网格展示（3）

     Android BottomSheet:List列表或Grid网格展示(3) BottomSheet可以显示多种样式的底部弹出面板风格,比如常见的List列表样式或者Grid网格样式,以一个例子 ...

  7. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  8. 【CSS】343- CSS Grid 网格布局入门

    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...

  9. grid网格布局使用

    定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...

随机推荐

  1. spring boot @ConditionalOnxxx相关注解总结

    Spring boot @ConditionalOnxxx相关注解总结 下面来介绍如何使用@Condition public class TestCondition implements Condit ...

  2. 半个月使用rust语言的体验

    从第一次下载rust语言的编译器到今天刚好第14天. 简单说一下对这个语言的感觉吧. 一.性能 把以前用java写的一个中文地址切分的算法,用rust重新实现了一下(https://github.co ...

  3. Redis 2.8.18 安装报错 error: jemalloc/jemalloc.h: No such file or directory解决方法

    http://www.phperz.com/article/14/1219/42002.html ——————————————————————————————————————————————————

  4. 阐述：SIP协议是什么

    sip协议是什么?可能刚刚接触这个协议的朋友会掌握不好它的定义.那么首先我们要了解一下,目前企业中大多数VoIP应用都使用H.323协议,但是,随着越来越多的企业研究SIP协议,不久的将来基于SIP协 ...

  5. VMWare链接克隆 和 完整克隆

    VMware Workstation 是使用最为广泛的虚拟机软件,用软件的方式模拟硬件环境.用户可以借助VMware Workstation的模拟出来的硬件,在当前的操作系统上安装N多个虚拟的操作系统 ...

  6. ImageMagick安装

    图片处理是大多数电子商务系统必须用到的组件,下面介绍ImageMagick的安装! 一.软件列表ImageMagick-6.7.1-0.tar.gzJMagick-6.4.0-0.tar.gzjpeg ...

  7. 根据URL获取参数值得出json结果集，对外给一个接口让别人调用

    背景:测试接口的时候,经常都是后端get\post请求直接返回json结果集,很想知道实现方式,虽然心中也大概了解如何实现,但还不如自己来一遍踏实! 先来看一下结果吧: 以下对一个web的get接口进 ...

  8. SpringMVC系列（十二）自定义拦截器

    Spring MVC也可以使用拦截器对请求进行拦截处理,用户可以自定义拦截器来实现特定的功能,自定义的拦截器必须实现HandlerInterceptor接口– preHandle():这个方法在业务处 ...

  9. linux自动启动的示例

    linux作为服务器,经常希望一启动即可提供服务,以下命令为程序启动时,启动lhx用户下的程序: echo "su – lhx -c \"这里写入你的启动命令,Python建议使用 ...

  10. Python之Python 安装环境搭建

    方法和步骤: python安装包的下载:http://111.13.109.34:83/1Q2W3E4R5T6Y7U8I9O0P1Z2X3C4V5B/www.python.org/ftp/python ...