CSS3 grid网格布局

news2024/9/20 14:20:10

文章目录

  • CSS3 grid网格布局
    • 概述
    • grid属性说明
    • 使用
      • grid-template-rows & grid-template-columns 定义行高和列宽
      • grid-auto-flow 定义项目的排列顺序
      • grid-auto-rows & grid-auto-columns 定义多余网格的行高和列宽
      • row-gap & column-gap 设置行间距和列间距
      • gap 简写形式
      • grid-template-areas 定义区域
      • justify-items & align-items 设置项目的水平位置和垂直位置
      • place-items 简写形式
      • align-content & justify-content 设置整个内容的位置
      • place-content 简写形式
      • grid-row-start & grid-row-end & grid-column-start & grid-column-end 指定项目位置
      • grid-column & grid-row 简写形式
      • grid-area 简写形式
      • align-self & justify-self 设置项目的垂直位置和水平位置
      • place-self 简写形式
    • 案例
      • 圣杯布局

CSS3 grid网格布局

概述

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。

grid元素是块元素。

grid属性说明

在这里插入图片描述

容器属性

属性说明
grid-template-rows定义行高
grid-template-columns定义列宽
grid-auto-flow定义项目的排列顺序
grid-auto-rows定义多余网格的行高
grid-auto-columns定义多余网格的列宽
row-gap行间距
column-gap列间距
gaprow-gap和column-gap的简写
grid-template-areas定义区域
justify-items设置项目的水平位置
align-items设置项目的垂直位置
place-itemsalign-items和justify-items的简写
align-content设置整个内容区域的垂直位置
justify-content设置整个内容区域的水平位置
place-contentalign-content和justify-content的简写
grid-templategrid-template-columns、grid-template-rows 和 grid-template-areas的简写

项目属性

属性说明
grid-row-start & grid-row-end & grid-column-start & grid-column-end指定项目位置
grid-columngrid-column-start 和 grid-column-end 的合并简写形式
grid-rowgrid-row-start 和 grid-row-end 的合并简写形式
grid-areagrid-row-start、grid-column-start、grid-row-end、grid-column-end 的合并简写形式
align-self项目的垂直位置
justify-self项目的水平位置
place-selfalign-self 和 justify-self的简写形式

使用

grid-template-rows & grid-template-columns 定义行高和列宽

grid-template-rows和 grid-template-columns属性取值

属性值说明
px固定值
%百分比
fr片段，分配剩余空间
auto先于fr计算，获取必要的最小空间
repeat()简化重复值

固定值使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: grid;
        grid-template-rows: 50px 50px 50px;
        grid-template-columns: 50px 50px 50px;
      }

      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 12px;
      }

      .item-1 {
        background-color: lightseagreen;
      }
      .item-2 {
        background-color: lightsteelblue;
      }
      .item-3 {
        background-color: lightgreen;
      }
      .item-4 {
        background-color: #ffd200;
      }
      .item-5 {
        background-color: lightskyblue;
      }
      .item-6 {
        background-color: pink;
      }
      .item-7 {
        background-color: gray;
      }
      .item-8 {
        background-color: orange;
      }
      .item-9 {
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
  </body>
</html>

在这里插入图片描述

百分比使用

.container {
    display: grid;
    width: 150px;
    height: 150px;
    grid-template-rows: 33.33% 33.33% 33.33%;
    grid-template-columns: 33.33% 33.33% 33.33%;
}

在这里插入图片描述

fr使用

.container {
    display: grid;
    width: 150px;
    height: 150px;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

在这里插入图片描述

.container {
    display: grid;
    width: 150px;
    height: 150px;
    grid-template-rows: 20px 1fr 20px;
    grid-template-columns: 20px 1fr 20px;
}

在这里插入图片描述

auto使用

.container {
    display: grid;
    width: 150px;
    height: 150px;
    grid-template-rows: 20px auto 20px;
    grid-template-columns: 20px auto 20px;
}

在这里插入图片描述

.container {
    display: grid;
    width: 150px;
    height: 150px;
    grid-template-rows: auto 1fr 50px;
    grid-template-columns: auto auto auto;
}

在这里插入图片描述

repeat()使用

.container {
    display: grid;
    width: 150px;
    height: 150px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
}

在这里插入图片描述

grid-auto-flow 定义项目的排列顺序

grid-auto-flow属性取值

属性说明
row先填入第一行
column先填入第一列
row dense按行填充空白
column dense按列填充空白

使用

.container {
display: grid;
width: 150px;
height: 150px;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
grid-auto-flow: row;
}

在这里插入图片描述

.container {
    display: grid;
    width: 150px;
    height: 150px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    grid-auto-flow: column;
}

在这里插入图片描述

.container {
    display: grid;
    width: 150px;
    height: 150px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    grid-auto-flow: row dense;
}

.item-1 {
    grid-column-start: 1;
    grid-column-end: 3;
}

在这里插入图片描述

.container {
    display: grid;
    width: 150px;
    height: 150px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    grid-auto-flow: column dense;
}

.item-1 {
    grid-column-start: 1;
    grid-column-end: 3;
}

在这里插入图片描述

grid-auto-rows & grid-auto-columns 定义多余网格的行高和列宽

使用

.container {
    display: grid;
    width: 150px;
    height: 150px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    grid-auto-rows: 100px;
    grid-auto-columns: 100px;
}

在这里插入图片描述

row-gap & column-gap 设置行间距和列间距

.container {
    display: grid;
    width: 150px;
    height: 150px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    row-gap: 10px;
    column-gap: 40px;
}

在这里插入图片描述

gap 简写形式

.container {
    display: grid;
    width: 150px;
    height: 150px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    gap: 10px 40px;
}

在这里插入图片描述

grid-template-areas 定义区域

.container {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    grid-template-areas:
        "a b c"
        "e f g"
        "h i j";
}

.item-1 {
    grid-area: c;
}

.item-3 {
    grid-area: a;
}

在这里插入图片描述

justify-items & align-items 设置项目的水平位置和垂直位置

justify-items & align-items属性取值

属性值说明
stretch默认值，拉伸
start开始位置
center居中位置
end结束位置

使用

.container {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    justify-items: center;
    align-items: center;
}

在这里插入图片描述

place-items 简写形式

.container {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    place-items: center center;
}

在这里插入图片描述

align-content & justify-content 设置整个内容的位置

align-content & justify-content属性取值

属性说明
stretch默认值，没有指定大小时，拉伸
start开始位置
center居中位置
end结束位置
space-around每个项目的间隔相等
space-between每个项目的间隔相等，项目与边框之间没有间隔
space-evenly每个项目的间隔相等，项目与边框之间也是一样的间隔

使用

.container {
    display: grid;
    height: 500px;
    border: 1px dashed green;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    align-content: center;
    justify-content: center;
}

在这里插入图片描述

place-content 简写形式

.container {
    display: grid;
    height: 500px;
    border: 1px dashed green;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    place-content: center;
}

在这里插入图片描述

grid-row-start & grid-row-end & grid-column-start & grid-column-end 指定项目位置

属性取值

属性值说明
number从第几个网格线开始，到第几个网格线结束
name需要先定义网格线
span number表示跨域几个网格

使用

.container {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
}

.item-1 {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
}

在这里插入图片描述

.container {
    display: grid;
    grid-template-rows: [c1] 50px [c2] 50px [c3] 50px [c4];
    grid-template-columns: [r1] 50px [r2] 50px [r3] 50px [r4];
}

.item-1 {
    grid-row-start: c1;
    grid-row-end: c3;
    grid-column-start: r1;
    grid-column-end: r3;
}

在这里插入图片描述

.container {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
}

.item-1 {
    grid-row-start: span 2;
    grid-column-start: span 2;
}

在这里插入图片描述

grid-column & grid-row 简写形式

grid-column 是 grid-column-start 和 grid-column-end 的合并简写形式

grid-row 是 grid-row-start 和 grid-row-end 的合并简写形式

.container {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
}

.item-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

在这里插入图片描述

grid-area 简写形式

.container {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
}

.item-1 {
    grid-area: 1/1/3/3;
}

在这里插入图片描述

align-self & justify-self 设置项目的垂直位置和水平位置

属性取值

属性值说明
stretch默认值，拉伸
start开始位置
center居中位置
end结束位置

使用

.container {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
}

.item-1 {
    align-self: end;
    justify-self: end;
}

在这里插入图片描述

place-self 简写形式

.container {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
}

.item-1 {
    place-self: end;
}

在这里插入图片描述

案例

圣杯布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>圣杯布局（grid）</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      html {
        width: 100%;
        height: 100%;
      }
      body {
        display: grid;
        grid-template-rows: 80px 1fr 80px;
        grid-template-columns: 200px auto 200px;
        grid-template-areas:
          "header header header"
          "left main right"
          "footer footer footer";
        height: 100%;
      }
      .header {
        grid-area: header;
        background-color: red;
      }
      .left {
        grid-area: left;
        background-color: yellow;
      }
      .main {
        grid-area: main;
        background-color: aqua;
      }
      .right {
        grid-area: right;
        background-color: bisque;
      }
      .footer {
        grid-area: footer;
        background-color: gray;
      }
      .grid-center {
        display: grid;
        justify-items: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <header class="header grid-center">header</header>
    <div class="left grid-center">left</div>
    <div class="main grid-center">main</div>
    <div class="right grid-center">right</div>
    <footer class="footer grid-center">footer</footer>
  </body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/462907.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java版spring cloud 本工程项目管理系统源码-全面的工程项目管理

Java版spring cloud 本工程项目管理系统源码-全面的工程项目管理

​ ​工程项目管理系统是指从事工程项目管理的企业&#xff08;以下简称工程项目管理企业&#xff09;受业主委托&#xff0c;按照合同约定&#xff0c;代表业主对工程项目的组织实施进行全过程或若干阶段的管理和服务。 如今建筑行业竞争激烈&#xff0c;内卷严重&#xff0c…
阅读更多...
Leetcode605. 种花问题

Leetcode605. 种花问题

Every day a leetcode 题目来源&#xff1a;605. 种花问题 解法1&#xff1a;贪心 贪心思想&#xff1a;在不打破种植规则的情况下种入尽可能多的花&#xff0c;然后用“最大种植数量”和“所需要种植数量”进行大小比较即可。 设地块长度为n&#xff0c;种花的情况可分为4…
阅读更多...
分享一个菜单标签页动画，切换丝滑无比

分享一个菜单标签页动画，切换丝滑无比

先上效果图： 代码如下，复制粘贴大法拿走即可使用： <!DOCTYPE html> <html lang="en"> <head>
阅读更多...
win系统使用frp端口映射实现内网穿透，配置“任务计划程序”提高稳定性

win系统使用frp端口映射实现内网穿透，配置“任务计划程序”提高稳定性

Github下载最新版frp: https://github.com/fatedier/frp/releases/download/v0.48.0/frp_0.48.0_windows_amd64.zip 解压把frpc.exe和frpc.ini放到D:\program\frp目录下&#xff0c;修改frpc.ini内容如下&#xff1a; [common] server_addr 服务器域名或IP&#xff0c;假设…
阅读更多...
Dockerfile镜像LNMP的实战

Dockerfile镜像LNMP的实战

Dockerfile镜像LNMP的实战 环境准备关闭防火墙拉取centos:7镜像自定义网络 部署nginx&#xff08;容器IP 为 172.18.0.10&#xff09;部署mysql&#xff08;容器IP 为 172.18.0.20&#xff09;部署php&#xff08;容器IP 为 172.18.0.30&#xff09; 环境准备 关闭防火墙 [ro…
阅读更多...
taro之项目初始化模板

taro之项目初始化模板

项目初始化模板 一直以来&#xff0c;在使用 Taro CLI 的 taro init 命令创建项目时&#xff0c;CLI 会提供若干内置模板给开发者选择。但是很多团队都有自己独特的业务场景&#xff0c;需要使用和维护的模板也不尽一致&#xff0c;因此 Taro 支持把项目模板打包成一个能力赋予…
阅读更多...
JavaScript奇技淫巧：debugger拦截

JavaScript奇技淫巧：debugger拦截

debugger指令&#xff0c;一般用于调试&#xff0c;在如浏览器调试执行环境中&#xff0c;可以在JavaScript代码中产生中断。 如果想要拦截debugger&#xff0c;是不容易的&#xff0c;常用的函数替代、proxy方法均对它无效&#xff0c;如&#xff1a; window.debugger (fun…
阅读更多...
电脑音乐相册软件推荐 电脑音乐相册制作方法

电脑音乐相册软件推荐 电脑音乐相册制作方法

音乐相册就是把照片剪辑成视频&#xff0c;并配上动听的音乐。音乐相册很适合保存照片&#xff0c;记录生活&#xff0c;传达出拍摄者当时的心情。下面为大家带来电脑音乐相册软件推荐&#xff0c;电脑音乐相册制作方法。 一、电脑音乐相册软件推荐 很多小伙伴在制作音乐相册…
阅读更多...
大数据Doris（三）：Apache Doris分布式部署准备工作

大数据Doris（三）：Apache Doris分布式部署准备工作

文章目录 Apache Doris分布式部署准备工作 一、Apache Doris下载 二、节点划分 三、节点配置 1、设置文件句柄数 2、时间同步 3、关闭 Swap 分区 4、调大单个进程的虚拟内存区域数量 Apache Doris分布式部署准备工作 部署Apache Doris时需要分别部署FE、BE、Broker。然…
阅读更多...
iOS - RunLoop 基本原理介绍

iOS - RunLoop 基本原理介绍

一、Runloop 简介 Runloop 是通过内部维护事件循环来对事件/消息进行管理的一个对象。 事件循环&#xff08;状态切换&#xff09; 没有消息需要处理时&#xff0c;休眠以避免资源占用&#xff08;用户态 -> 内核态&#xff09;有消息需要处理时&#xff0c;立刻被唤醒&a…
阅读更多...
电视盒子什么牌子好？数码博主盘点2022电视盒子排行榜

电视盒子什么牌子好？数码博主盘点2022电视盒子排行榜

网络电视盒子是电视机的标配&#xff0c;开放性的安卓系统能观看海量视频资源&#xff0c;我每年也会进行电视盒子的测评&#xff0c;今天要来分享五款最热门的网络电视盒子推荐&#xff0c;跟着我一起看看网络电视盒子哪个好。 一&#xff1a;泰捷WEBOX60Pro电视盒子 年度…
阅读更多...
【华为HCIP | 高级网络工程师】刷题日记（1）

【华为HCIP | 高级网络工程师】刷题日记（1）

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大二在校生&#xff0c;讨厌编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;落. &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️ 零基础…
阅读更多...
03-stable diffusion国风小姐姐

03-stable diffusion国风小姐姐

stable diffusion 文生图 – 生成国风小姐姐 一、模型在哪里下载 下载网站civitai&#xff1a; Civitai | Stable Diffusion models, embeddings, LoRAs and more国风主模型&#xff1a;https://civitai.com/models/14171/cutegirlmix4主模型放到sd-webui-aki-v4\models\Stab…
阅读更多...
【AUTOSAR】【信息安全】CSM

【AUTOSAR】【信息安全】CSM

目录 一、概述 二、依赖模块 三、功能描述 3.1 基本体系结构 3.2 通用行为 3.2.1 正常操作 3.2.2 设计说明 3.3 错误分类 3.3.1 开发错误 3.3.2 运行时错误 四、API接口 4.1 通用接口 4.2 加密接口 4.3 秘钥接口 4.4 Job接口 4.5 回调接口 4.6 调度接口 一、概…
阅读更多...
配置中心基本原理

配置中心基本原理

配置中心是如何实现推送的&#xff1f; 背景 传统的静态配置方式想要修改某个配置时&#xff0c;必须重新启动一次应用&#xff0c;如果是数据库连接串的变更&#xff0c;那可能还容易接受一些&#xff0c;但如果变更的是一些运行时实时感知的配置&#xff0c;如某个功能项的…
阅读更多...
ROS学习第四十一节——SLAM建图

ROS学习第四十一节——SLAM建图

https://download.csdn.net/download/qq_45685327/87721374 准备工作 请先安装相关的ROS功能包: 安装 gmapping 包(用于构建地图):sudo apt install ros-melodic-gmapping 安装地图服务包(用于保存与读取地图):sudo apt install ros-melodic-map-server 安装 navigation 包…
阅读更多...
Java -- 多线程

Java -- 多线程

多线程 并发 在同一时刻&#xff0c;有多个指令在单个CPU上交替执行 CPU在多个线程之间交替执行 并行 在同一时刻&#xff0c;有多个指令在多个CPU上同时执行 多线程的实现方式 继承Thread类的方法进行实现实现Runnable接口的方式进行实现利用Callable接口和Future接口方…
阅读更多...
数据库基础篇 《17.触发器》

数据库基础篇 《17.触发器》

数据库基础篇 《17.触发器》 在实际开发中&#xff0c;我们经常会遇到这样的情况&#xff1a;有 2 个或者多个相互关联的表&#xff0c;如商品信息和库存信息分别存放在 2 个不同的数据表中&#xff0c;我们在添加一条新商品记录的时候&#xff0c;为了保证数据的完整性&#…
阅读更多...
【刷题之路】LeetCode 203. 移除链表元素

【刷题之路】LeetCode 203. 移除链表元素

【刷题之路】LeetCode 203. 移除链表元素 一、题目描述二、解题1、方法1——在原链表上动刀子1.1、思路分析1.2、代码实现 2、方法2——使用额外的链表2.1、思路分析2.2、代码实现 一、题目描述 原题连接&#xff1a; 203. 移除链表元素 题目描述&#xff1a; 给你一个链表的…
阅读更多...
跨数据中心下的 Kafka 高可用架构分析

跨数据中心下的 Kafka 高可用架构分析

导语 本文介绍了 Kafka 跨数据中心的两种部署方式&#xff0c;简要分析两种方式下的不同架构以及优缺点&#xff0c;对这些架构可能碰到的问题也提供了一些解决思路&#xff1b;同时也说明了 Kafka 跨数据中心部署的社区解决方案和商业化解决方案。 背景 Kafka 作为世界上最…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023