CSS Grid 布局

1. 什么是 Grid 布局

Grid(网格布局)定义了网格的行和列,我们可以将网格元素放置在与这些行和列相关的位置上,做出多种布局。

2. 为什么学习 CSS Grid 布局

Grid 能够定义行和列来进行二维布局,并且简便、灵活。

免去了 Bootstrap 等 CSS 框架的使用。

主流浏览器都比较支持。

3. 开始

3.1 第一个网格

定义六个 div 用于布局(相关颜色等 css 代码已省略),默认情况下每个 div 占满一行。

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

最开始,用 display: grid; 来创建一个网格容器 (Grid Container),其中的子网格称为 Grid items。下边创建一个三列两行的网格。

.container {
  display: grid;
  /* 3 列, 宽度分别为 100px, auto, 200px */
  grid-template-columns: 100px auto 200px;
  /* 2 行, 高度分别为 50px, 50px */
  grid-template-rows: 50px 50px;
  /* 行间距 列间距 */
  gap: 5px 20px;
}

具体效果:

3.2 fr and repeat

fr

使用 fr 能够将剩余的空间进行一定比例的分配。

用 fr 制作一个两行三列,并且三列的宽度相等的网格。

.container {
  display: grid;
  /* 三个等宽的列 */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50px 50px;
  gap: 5px 20px;
}

进行如下修改,将第一列的宽度固定为 100px,则其他两列会按照剩余空间进行 1:1分配。

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

试下 2fr,可以看到 2fr 列是 1fr 列的两倍。

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

repeat

可以用 repeat 重复创建相同的行或者列。

.container {
  display: grid;
  /* 三个等宽的列 */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50px 50px;
  gap: 5px 20px;
}

/* 用 repeat */
.container {
  display: grid;
  /* repeat(数量, 长度) */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 50px);
  gap: 5px 20px;
}

/* 简写 */
.container {
  display: grid;
  /* grid-template: 行 / 列; */
  /* grid-template: 50px 50px / 1fr 1fr 1fr; 与下边代码效果相同 */
  grid-template: repeat(2, 50px) / repeat(3, 1fr);
  gap: 5px 20px;
}

4. 定位与布局

4.1 Grid items 的定位

如下,我们创建的 container 里的 4 个 div 色块即为 Grid items(子网格),接下来要对他们进行定位。

<div class="container">
  <div class="header">HEADER</div>
  <div class="menu">MENU</div>
  <div class="content">CONTENT</div>
  <div class="footer">FOOTER</div>
</div>

先创建网格容器。

.container {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 40px 200px 40px;
}

给子网格 header 设置 grid-column: 1 / 3; ,表示 header 的列在网格线 1 和网格线 3 之间,即占了两列。

.header {
  grid-column: 1 / 3;
}

通过浏览器开发者工具 (F12/Ctrl+shift+I) 可以看到,网格线 2 处有一条间距 gap,但 gap 左右还是同一条网格线 2。

网格线从左到右是数字 1, 2, 3…;从右到左是 -1, -2, -3…,即倒数第 1 条网格线,倒数第 2 条,倒数第 3 条……两者可以混用。接下来使用他们进行布局。

.container {
  display: grid;
  gap: 3px;
  /* 三行、四等列 */
  grid-template-rows: 40px 200px 40px;
  grid-template-columns: repeat(4, 1fr);
}

/* 网格线 1 ~ 5 之间 */
.header {
  grid-column: 1 / 5;
}

.menu {}

/* 网格线 2 ~ 倒数第 2 条网格线之间 */
.content {
  grid-column: 2 / -2;
}

/* 网格线 1 ~ 倒数第 1 条网格线之间 */
.footer {
  grid-column: 1 / -1;
}

即图。

grid-rowgrid-column 的使用是类似的。

4.2 Template areas

先给自己的四个 div 色块各取个小名,header 取 h,menu 取 m,content 取 c,footer 取 f。然后给他们划分地盘。有点像排兵布阵……

这里我们要用到 grid-template-areasgrid-area

.container {
  height: 100%;
  display: grid;
  gap: 3px;
  /* 设置列宽和行高 */
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px auto 40px;
  /* h 在第一行占 12 列, m 在第二行占第 1 列,c在第二行占第 2 列到最后一列,f 占最后一行*/
  grid-template-areas:
      "h h h h h h h h h h h h"
      "m c c c c c c c c c c c"
      "f f f f f f f f f f f f";
}

.header {
  /* 所在网格位置 */
  grid-area: h;
}

.menu {
  grid-area: m;
}

.content {
  grid-area: c;
}

.footer {
  grid-area: f;
}

. 可以让地盘空着。

.container {
  height: 100%;
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px auto 40px;
  grid-template-areas:
      ". h h h h h h h h h h ."
      "m c c c c c c c c c c c"
      ". f f f f f f f f f f .";
}

5. 自动排列

5.1 minmax and auto-fit

minmax(最小长度, 最大长度),即长度的范围,auto-fit 能够根据所给的列宽进行自动换行。

先定义 12 个 div,接下来进行布局。

.container {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: repeat(2, 100px);
}

效果如下:

5.2 grid-auto-rows

上面动图里的行高不均匀。这是因为我们只设置了前两行的高度,而其余行的高度都是根据块内的内容自动定的。

我们可以使用 grid-auto-rows: 100px; 来替代 grid-template-rows: repeat(2, 100px); ,这时候,所有行高都是 100px。

5.3 auto-fit vs auto-fill

.container {
  border: 1px solid black;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: 100px 100px;
}

.container2 {
  border: 1px solid black;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-template-rows: 100px 100px;
}

宽度过大时,auto-fit 会自动拉伸以便占满一整行,auto-fill 则不会。

待续……

(0)

相关推荐

  • dispaly的Grid布局与Flex布局

    Gird 布局与 Flex 布局有一定的相似性,都是对容器的内部项目进行划分. Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作成一维布局 Grid 布局则是将容器划分成行和列,产生单元 ...

  • python grid布局

    上篇介绍了tkinter窗口的创建,以及pack布局,本篇介绍grid几何布局方式. 1.grid几何布局 grid布局采用表格结构组织组件. 子组件的位置由行/列确定的单元格来决定. 此种布局方式适 ...

  • python测试开发django-134.CSS页面布局:左侧固定,右侧自适应布局

    前言 常见的后台管理页面,左侧固定宽度展示操作菜单栏,右侧显示左侧展示管理内容. 这是一种最常见的左侧固定,右侧自适应布局方式. 左侧固定,右侧自适应布局 在container1里面写2个div &l ...

  • Tkinter 之Grid布局

    import tkinter as tk window = tk.Tk() # 设置窗口大小 winWidth = 600 winHeight = 400 # 获取屏幕分辨率 screenWidth ...

  • Python Tkinter Grid布局管理器详解

    Grid(网格)布局管理器会将控件放置到一个二维的表格里.主控件被分割成一系列的行和列,表格中的每个单元(cell)都可以放置一个控件. 注意:不要试图在一个主窗口中混合使用pack和grid (1) ...

  • Chrome 开发者工具里的 CSS grid editor

    Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别. Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一 ...

  • Html/css 水平布局居中

    如何设置水平居中显示? 一般的方法是设置宽高,然后以margin去控制,比如:DIV居中的经典方法 本章介绍需要宽度自适应时如何水平居中,以及居中失效的几个点 水平自适应居中 比如设置一个列表水平居中 ...

  • 解析CSS的box model盒模型及其内的子元素布局控制

    盒模型是CSS控制布局的主要方式之一,尤其是内部的元素排列控制,这里我们将来解析CSS的box model盒模型及其内的子元素布局控制,需要的朋友可以参考下 css的两种盒模型介绍   CSS中Box ...

  • [css] 第111天 你有用过table布局吗?说说你的感受

    今日试题: 你有用过table布局吗?说说你的感受 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前端 ...