先来一段基本布局

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

    <style>

        .container {

            display: grid;

            grid-template-columns: 100px 100px 100px;// 三个100px分别是第一列、第二列、第三列div的宽度

            grid-template-rows: 50px 50px;// 第一个50px是第一行的高度，第二个50px是第二行的高度

        }

        .container>div:nth-of-type(1){background-color: greenyellow;}

        .container>div:nth-of-type(2){background-color: deeppink;}

        .container>div:nth-of-type(3){background-color: deepskyblue;}

        .container>div:nth-of-type(4){background-color: salmon;}

        .container>div:nth-of-type(5){background-color: purple;}

        .container>div:nth-of-type(6){background-color: yellowgreen;}

    </style>

</head>

<body>

    <div class="container">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

        <div>5</div>

        <div>6</div>

    </div>

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<script>

</script>

</body>

</html>

效果是这样的：

现在开始修改css语句：

grid-template-columns: 1fr 1fr 1fr;

只改了这一行，效果如下，直接就是响应式了：

再稍作修改：

grid-template-columns: 1fr 2fr 1fr;

也就是说，fr控制宽度的比例。

repeat()函数

grid-template-columns: repeat(3,100px);

grid-template-rows: repeat(2,50px);

效果如下：

和grid-template-columns: 100px 100px 100px;grid-template-rows: 50px 50px;效果一样。

auto-fit

grid-template-columns: repeat(auto-fit,100px);

grid-template-rows: repeat(3,50px);

效果如下：

现在布局成了自适应数量，这里将宽度设置成了100px，则很大概率右边会有留白。

minmax()

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

它会在100px的基础上，稍作添加，不留白。

minmax()定义的范围大于等于min，小于等于max，因此，现在每列的宽最少为100px，如果有多余的空间，会均匀的分配给每列。

在div里放入图片：

        <div><img src="./syz.jpg" /></div>

        <div><img src="./syz.jpg" /></div>

        <div><img src="./syz.jpg" /></div>

        <div><img src="./syz.jpg" /></div>

        <div><img src="./syz.jpg" /></div>

        <div><img src="./syz.jpg" /></div>

设置图片样式：

        .container>div>img{

            width: 100%;

            height: 100%;

            object-fit: cover;

        }

效果：

css网格布局的更多相关文章

  1. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  2. 【图片版】学习CSS网格布局

    简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...

  3. CSS 网格布局学习

    转自:https://blog.jirengu.com/?p=990 CSS网格布局(又名“网格”)是一个二维的基于网格的布局系统,其目的只在于完全改变我们设计基于网格的用户界面的方式. CSS一直用 ...

  4. css 网格布局

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  5. css 网格布局简单应用

    将属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器,所有容器直接子结点自动成为网格项目. grid :网格项目按行排列,网格项目占用整个容器的宽度. inlin ...

  6. CSS Grid 网格布局全解析

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

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

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

  8. CSS Grid布局入门

    相信大家都比较熟悉flex布局了,最近有空研究了波grid布局,感觉虽然兼容性还不是太高,应用不是太普遍,但是功能非常强大.未来应该是grid+flex为主流,grid是二维布局,很灵活,适合整体构架 ...

  9. Grid 网格布局

    CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...

随机推荐

  1. 剑指offer：滑动窗口的最大值（栈和队列）

    1. 题目描述 /* 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值. 例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值分别 ...

  2. VBA基础 - 数据类型

    概要 学习一种新语言, 数据类型和关键字是第一步. 数据类型 常用的数据类型如下: 类型 存储空间 范围 Boolean 2 bytes True 或者 False Byte 1 byte 0 ~ 2 ...

  3. 记一次SQL调优

    insert优化 如果你在某一时刻有大量的insert操作,一条一条插入是非常耗时的.insert语句本身支持一次插入很多条记录,插入记录数上限受sql语句长度限制,一般一次插个几千条是没问题的.在我 ...

  4. c#菜单动态合并 z

    说明 在程序中经常使用弹出菜单,并且一个窗体中可以存在多个弹出菜单.开发过MDI窗体的读者可能都知道,当MDI子窗体最大化时,子窗体和主窗体的菜单能够自动的合并.这是如何实现的呢?本例实现了将两个弹出 ...

  5. 【Linux命令】at、crontab定时任务

    crontab定时任务(周期性) 一.简介 通过crontab命令可以在固定的间隔执行系统指令或shell脚本 二.crontab配置文件: Linux下的任务调度分为两类:系统任务调度和用户任务调度 ...

  6. laravel 广播细节讲解

    1.应用场景 1.通知(Notification) 或 信号(Signal) 2.通知是最简单的示例,也最经常用到.信号也可看作是通知的一种展现形式,只不过信号没有UI而已. 3.Activity S ...

  7. 深入浅出JVM的锁优化案例

    锁优化 适应性自旋(Adaptive Spinning) 线程阻塞的时候,让等待的线程不放弃cpu执行时间,而是执行一个自旋(一般是空循环),这叫做自旋锁. 自旋等待本身虽然避免了线程切换的开销,但它 ...

  8. 使用Javamail实现邮件发送功能

    目录 相关的包 编写工具类 环境说明 @(使用Javamail实现邮件发送功能) 相关的包 activation.jar javax.mail.jar mail包建议使用高版本写的包,否则可能会发空白 ...

  9. PHP 简单面向对象 验证码类（静态实例对象调用）

    没事写了一个简单的面向对象验证码类,可以直接使用(替换一下字体路径) <?php class authCode { private static $instance = null; #实例对象 ...

  10. PowerShell美化

    转载自Powershell 美化 --oh-my-posh,作者Zvonimir. PowerShell默认的主题太丑了,用过OhMyZsh之后是无法忍受这种丑陋的,幸好PowerShell有对应的O ...