grid网格布局

  • 一、创建 CSS 网格
    • 1.说明
    • 2.创建 CSS 网格
  • 二、添加网格结构(行和列)
    • 1. 在父容器中设置列
    • 2. 在父容器中设置行
    • 3. 使用 CSS 网格单位设置列和行的大小
  • 三、网格间距
    • 1. 列间距 grid-column-gap
    • 2. 行间距 grid-row-gap

闯关学习:grid网格布局

一、创建 CSS 网格

1.说明

Grid 布局​ 与 ​Flex 布局​有一定的相似性,都可以指定容器内部多个项目的位置。

  • Flex 布局是轴线布局(,只能指定"项目"针对轴线的位置),可以看作是​一维布局​。
  • Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。
    Grid 布局远比 Flex 布局强大。

2.创建 CSS 网格

  • 为父容器添加 display: grid;
  • 在 CSS 网格中,父元素称为​容器(container)​,它的子元素称为​项(items)​。
<style>.container {display: grid;}
</style>

二、添加网格结构(行和列)

1. 在父容器中设置列

每个数值代表列的宽度, 数值的个数就是列数

<style>.container {display: grid;/* 添加的代码 */grid-template-columns: 100px 100px 100px;/* 添加的代码 */}
</style>

2. 在父容器中设置行

每个数值代表行高, 数值的个数就是行数

<style>.container {display: grid;grid-template-columns: 100px 100px 100px;/* 添加的代码 */grid-template-rows: 50px 50px;/* 添加的代码 */}
</style>

3. 使用 CSS 网格单位设置列和行的大小

类似于ps绝对定位单位, em相对(父元素)定位单位,rem相对(根元素)定位单位
CSS 网格单位的相对定位单位是

fr (fraction 片段) 按比例占领剩余尺寸

auto 根据内容占据尺寸
% 按百分比占领剩余尺寸

<style>
.container {display: grid;grid-template-columns: 150px 1fr 2fr;/* 第一列的宽度为150像素,第二列的宽度是第三列的一半。*/
}
</style>

三、网格间距

1. 列间距 grid-column-gap

<style>.container {display: grid;grid-template-columns: auto auto auto auto;/* 四列 */grid-column-gap: 50px; /* 列间距 50px + 50px */}
</style>

2. 行间距 grid-row-gap

<style>.container {display: grid;grid-template-rows: auto auto auto auto;/* 四列 */grid-row-gap: 5px; /* 行间距 5px + 5px */}
</style>

前端之css grid网格布局相关推荐

  1. CSS Grid网格布局全攻略

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

  2. CSS Grid 网格布局完整教程

    前言 一.概述 二.基本概念 2.1 容器和项目 2.2 行和列 2.3 单元格 2.4 网格线 三.容器属性 3.1 display 属性 3.2 行与列属性定义 明文定义 百分比定义 repeat ...

  3. CSS Grid 网格布局全解析

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

  4. 轻松上手CSS Grid网格布局

    今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...

  5. CSS—— grid 网格布局

    文章目录 1. grid 网格布局 1. grid 网格布局 display:grid grid 属性是以下属性的简写属性,默认: grid-gap , none,[200px]网格之间的距离 gri ...

  6. CSS Grid网格布局详解

    Grid 布局又称网格布局,是W3C提出的一个二维布局系统,它与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别.Flex 布局是轴线布局,只能指定" ...

  7. html实现网格布局排版整齐的表格,CSS Grid 网格布局全攻略

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

  8. CSS Grid 网格布局教程

    作者: 阮一峰 日期: 2019年3月25日 一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 ...

  9. CSS Grid 网格布局详解

    目录 一:Grid简介 二:基本概念 2.1 容器和项目 2.2 行和列 2.3 单元格 2.4 网格线 三:容器属性 3.1 display 属性 3.2.grid-template-columns ...

最新文章

  1. 基于GAN的图像水印去除器,效果堪比PS高手
  2. nodejs 截断字符串_node.js – nodejs:字符串操作
  3. 零基础学python爬虫-零基础学习python_爬虫(53课)
  4. Python Dict用法
  5. c语言编译不了什么情况,c语言编译没错但是无法运行
  6. 阿里云消息队列Kafka商业化:支持消息无缝迁移到云上
  7. 英特尔发布其首个适配Win11的显卡驱动
  8. 网站的服务器怎么维护,网站服务器怎么维护
  9. redis linux 删除数据结构,Redis集合数据结构和常用命令
  10. js手机键盘遮挡_移动端页面input输入框被键盘遮挡问题
  11. Image Segmentation
  12. easypanel b.php,KangleWebServer Easypanel API接口详解
  13. Java开发人员必备工具之 10 个大数据工具和框架
  14. 计算机维修情况说明书,电脑坏了(电脑坏了情况说明)
  15. matlab的空间坐标轴,空间三维坐标轴旋转
  16. 好看的桑基图是如何炼成的!
  17. 实现NRF52832蓝牙DFU无线升级
  18. 计算机网络的 89 个核心概念
  19. 计算机网络信息安全特征,计算机基础知识:网络信息安全的概述及特征
  20. STM32做SPI主机用得多,SPI从机玩过吗?

热门文章

  1. 根据内容优质网站的3点提示开启AdSense创收
  2. Unity VR游戏开发干货教程:VR中的交互方式
  3. 用Python做个小仙女代码蹦迪视频
  4. Java IO流的种类
  5. VTK控制相机实现水平翻转与垂直翻转
  6. mysql创建数据库命令语句
  7. 基于逻辑回归的天猫优惠券使用情况预测
  8. DVWA系列(一)----DVWA简介
  9. [渝粤教育] 广东-国家-开放大学 21秋期末考试互联网金融(本)10575k1
  10. 中琅条码软件如何批量制作防伪条形码