<!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. eclipse如何设置高亮代码的背景色，比如选中某个单词，高亮所有的

    设置方法如下: 1.单击IDE顶部Window菜单下的Prefences,如图: 2.在打开对话框的左侧树上,找到Java节点下的Editor中的Mark Occurren,如图: 3.点击Mark ...

  2. hibernate整合进spring后的事务处理

    单独使用hibernate处理事务 本来只用hibernate开发,从而可以省了DAO层实现数据库访问和跨数据库,也可以对代码进行更好的封装,当我们web中单独使用hibernate时,我们需要单独的 ...

  3. Python __init__函数的使用

    class Cat: def __init__(self,_name): self.name = _name def eat(self): print("i am eating ." ...

  4. Chart控件使用初步

    学习了Chart控件的初步使用方法,生成柱形图和饼图.    <asp:Chart ID="Chart1" runat="server" Width=&q ...

  5. Semantic segmentation using adversarial networks

    FAIR Paris分部的论文,NIPS2016 Workshop. Motivation是让predict出来的结果和真实label在高层感觉上有一致性. 基本思想就是用GAN来区分segmenta ...

  6. c++ 的类 和 类继承, 什么是c++中的基类和派生类？

    闲云潭影日悠悠,物换星移几度秋 你既然已经做出了选择, 又何必去问为什么选择.鬼谷绝学的要义, 从来都不是回答, 而是抉与择 普通类 #ifndef TABTENN0_H_ #define TABTE ...

  7. python一天一题(2)

    python查询mysql数据库 import pymysql host = '192.168.74.5' user = 'root' passwd ='root' port = 3310 db = ...

  8. python 读写配置文件

    使用python读写配置文件,写个demo测试一下. #!/usr/bin/env python import os import ConfigParser # 如果文件不存在,就穿件文件. if o ...

  9. 关于阅读JDK源码的准备

    说明:本篇是给自己看的. 笑 最近突然有冲动 想研究下JDK的源码,搜索了一番,基本上推荐从集合开始,精华部分包括:集合.IO.多线程.网络编程. 虚拟机部分先放一放吧,感觉现在不适合我这种半路出家的 ...

  10. 第三百三十二节，web爬虫讲解2—Scrapy框架爬虫—Scrapy使用

    第三百三十二节,web爬虫讲解2—Scrapy框架爬虫—Scrapy使用 xpath表达式 //x 表示向下查找n层指定标签,如://div 表示查找所有div标签 /x 表示向下查找一层指定的标签 ...