<!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. SpringBoot 集成 Mybatis 使用 Druid数据源 MySQL数据库

    思路: 1.创建项目 项目结构如下: 2.导入相应包 POM.xml文件如下: <?xml version="1.0" encoding="UTF-8"? ...

  2. idea+maven无法自动加载jar包

    没有配置maven的环境变量所致 执行mvn -version进行检测

  3. 深度学习笔记：优化方法总结(BGD,SGD,Momentum,AdaGrad,RMSProp,Adam)

    深度学习笔记:优化方法总结(BGD,SGD,Momentum,AdaGrad,RMSProp,Adam) 深度学习笔记(一):logistic分类 深度学习笔记(二):简单神经网络,后向传播算法及实现 ...

  4. 用python做数字油画或者从一幅画学习风格，去画另一幅画

    1. 用python做数字油画 模块: pillow 2. 从一幅画学习风格,去画另一幅画 http://pytorch.org/tutorials/advanced/neural_style_tut ...

  5. e775. 设置JList组件项的维数

    By default, the width of the list is determined by the longest item and the height is determined by ...

  6. Linq to Entity 动态拼接查询条件(重点是OR)

    public static class PredicateExtensions { /// <summary> /// 机关函数应用True时:单个AND有效,多个AND有效:单个OR无效 ...

  7. 目标跟踪之meanshift---meanshift2

    均值漂移,可以对非刚性物理进行跟踪,是分参数估计,过程是迭代的过程,对光和形态不敏感,缺点是检测目标是固定的,特征不较少,模板背景没有实时更新,没有目标的位置精度预测只是梯度浓聚, 原理: 用文字标书 ...

  8. Linux定时任务工具crontab详解及系统时间同步

    Linux配置自动时间同步 linux下时间同步的两种方法分享 tail -f /var/log/cron linux下定时执行任务的方法  在LINUX中你应该先输入crontab -e,然后就会有 ...

  9. 在Ubuntu14.04上编译Android4.0.1出现的几个问题

    一. 工具 sudo apt-get install git-core gnupg flex bison gperf build-essential \       zip curl libc6-de ...

  10. Hadoop分布式集群部署(单namenode节点)

    Hadoop分布式集群部署 系统系统环境: OS: CentOS 6.8 内存:2G CPU:1核 Software:jdk-8u151-linux-x64.rpm hadoop-2.7.4.tar. ...