A-freecodecamp-响应式网页设计

基础CSS

绝对单位与相对单位

单位长度的类型可以分成 2 种：相对和绝对。

绝对单位与长度的物理单位相关。 例如，in 和 mm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。

相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。 比如 em 的大小基于元素字体的字体大小。 如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。

Note: 有些单位长度选项是相对视窗大小来改变值的， 这种设定符合响应式网页设计的原则。

样式中的优先级

Important的优先级最高(！important)，内联样式>ID选择器>Class选择器的优先级>继承样式。这个还挺重要的，有的时候样式会因为优先级被覆盖。

自定义的 CSS 变量

为创建一个 CSS 变量，你只需要在变量名前添加两个连字符号，并为其赋值即可，例子如下：

<style>
.类名{
  --penguin-skin: gray;//自定义变量
}
</style>

创建变量后，CSS 属性可以通过调用变量名来使用它对应的值。

background: var(--penguin-skin);

注意： 备用值不是用于增强浏览器的兼容性，它也不适用于 IE 浏览器。 相反，它是用来让浏览器在找不到你的变量时可以显示一种颜色。

background: var(--penguin-skin, black);

锚链接

一个写在href里，一个写在id里

<a href="#contacts-header">Contacts</a> 
... 
<h2 id="contacts-header">Contacts</h2>

关于表单

我们可以只通过 HTML 来实现发送数据给服务器的表单， 只需要给 form 元素添加 action 属性即可。method可以控制是get还是post。

<form action="https://www.freecatphotoapp.com/submit-cat-photo">
  <input type="text" placeholder="cat photo URL">
  <button type="submit">Submit</button>
  </form>

<fieldset> 标签用于在表单中分组相关元素。<fieldset> 标签会在相关元素周围绘制一个框。

pattern是正则表达式

提交带有选择菜单的select, 每一个 option 需要指定一个 value 属性。 如果没有指定，向服务器默认提交的是 option 内的文本。

img有个属性object-fit,属性值：object-fit: fill / contain / cover / none / scale-down;

fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。

contain: 保持原有尺寸比例。长度和高度中长的那条边跟容器大小一致，短的那条等比缩放，可能会有留白。

cover: 保持原有尺寸比例。宽度和高度中短的那条边跟容器大小一致，长的那条等比缩放。可能会有部分区域不可见。

none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样。

textarea 可以 添加 rows 和 cols 属性，来指定它的初始大小。

<form action="/demo/action_page.php">
  <fieldset>
    <legend>个人信息：</legend>
    <label for="fname">名字：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
 <label for="new-password">Create a New Password: <input type="password" minlength="8" name="" id="new-password" pattern="[a-z0-5]{8,}"></label> 
    </fieldset>
</form>

gap 属性以及 row-gap 和 column-gap 子属性用来设置 flex、grid 和多列布局的间隙。 可以将此属性应用到容器元素。

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

:first-of-type 表示一组兄弟元素中其类型的第一个元素

关于单选和多选

要在label里面写单选（radio）和多选(checkbox)，id必须和自身的label的for相对应，同一组的多选和同一组单选name值必须相同，要想设为默认，则添加checked

<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>

媒体查询

/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {
    .example {background: red;}
}

/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) {
    .example {background: green;}
}

/* 中型设备（平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {
    .example {background: blue;}
} 

/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media only screen and (min-width: 992px) {
    .example {background: orange;}
} 

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) {
    .example {background: pink;}
}

应用视觉设计

使用 text-align 属性创建视觉平衡

text-align: justify; 可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。

使用 hr 标签创建水平线

可以用 hr 标签来创建一条宽度撑满父元素的水平线。 这种水平分割线一般用来表示内容主题的改变，或在视觉上将文档分隔成几个部分。

给卡片元素添加 box-shadow

box-shadow 属性的阴影依次由下面这些值描述：

• offset-x 阴影的水平偏移量；
• offset-y 阴影的垂直偏移量；
• blur-radius 模糊半径；
• spread-radius 阴影扩展半径；
• color

其中 blur-radius 和 spread-radius 是可选的。

可以通过逗号分隔每个 box-shadow 元素的属性来添加多个 box-shadow。

它使用了透明度较高的黑色作为阴影：（这是个好看的阴影样式）

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

元素的透明度

CSS 里的 opacity 属性用来设置元素的透明度。

属性值为 1 代表完全不透明。
属性值为 0.5 代表半透明。
属性值为 0 代表完全透明。

透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。

使用 text-transform 属性给文本添加大写效果

CSS 里的 text-transform 属性可以改变英文字母的大小写。这个用的很少，但也算一个很好用的属性，记下来也无妨。

值	结果
lowercase	"transform me"
uppercase	"TRANSFORM ME"
capitalize	"Transform Me"

元素的相对位置以及行内元素和块级元素

块级元素：<h1>~<h6> ,<p>,<div>,<ul>,<ol>,<li>等

行内元素：<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等

当元素的定位设置为 relative 时，它允许你通过 CSS 指定该元素在当前文档流页面下的相对偏移量。

把元素的位置设置成相对，并不会改变该元素在布局中所占的位置，也不会对其它元素的位置产生影响。

绝对定位的参照物是元素的父元素

绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它。 绝对定位比较特殊的一点是元素的定位参照于最近的 positioned 祖先元素。 如果它的父元素没有添加定位规则（默认是 position: relative;），浏览器会继续寻找直到默认的 body 标签。

固定定位的参照物是浏览器的窗口

fixed 定位，它是一种特殊的绝对（absolute）定位，将元素相对于浏览器窗口定位。 它也会将元素从当前的文档流里面移除。 其它元素会忽略它的存在，这样也许需要调整其他位置的布局。

但 fixed 和 absolute 的最明显的区别在于，前者定位的元素不会随着屏幕滚动而移动。

创建一个 CSS 线性渐变

background 里的 linear-gradient() 实现线性渐变， 以下是它的语法：

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);

第一个参数指定了颜色过渡的方向——它的值是角度，90deg 表示垂直渐变（从左到右），45deg 表示沿对角线渐变（从左下方到右上方）。 其他参数指定了渐变颜色的顺序：（这个实例还行，挺好看的渐变背景色）

还可以把角度换成to right/left/top/bottom

background: linear-gradient(35deg, red, yellow, rgb(204, 204, 255));

CSS Transform

CSS 属性 transform 里面的 scale() 函数可以用来改变元素的显示比例。 下面的例子把页面的段落元素放大到了原来的 2 倍：

p {
  transform: scale(2);
}

下面的代码沿着 X 轴倾斜段落元素 -32 度。

p {
  transform: skewX(-32deg);
}

伪元素 ::before 和 ::after（清理浮动还有实现分割线效果还有显示网址效果）

伪元素 ::before 和 ::after。 伪元素可以在所选元素之前或之后添加一些内容。::before 和 ::after 必须配合 content 来使用。 这个属性通常用来给元素添加内容诸如图片或者文字。content 值可以是空字符串。伪元素的display默认为inline，可以自己改 。我感觉这个有的时候还挺好用的，现在用的不多，可以写一些练练手。

分割线的实现代码如下：

<style>
    * {
      padding: 0;
      margin: 0;
    }
    .spliter::before, .spliter::after {
      content: '';
      display: inline-block;
      border-top: 1px solid black;
      width: 200px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <p class="spliter">分割线</p>
</body>

清理浮动

通过attr()属性调用当元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。

a::after{
			content:"(" attr(href) ")";
		}
p:after{
			content:attr(class);
		}
<p><a href="https://wx.qq.com/">微信</a></p>
<p class="hello"></p>

CSS 的关键帧和动画

animation 属性控制动画的外观，@keyframes 规则控制动画中各阶段的变化。

animation-name 用来设置动画的名称，也就是我们稍后要在 @keyframes 里用到的名称。

animation-duration 设置动画所花费的时间。

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue; //去
  }
  50% {
    background-color: red; //中间（达到能去的最远点）
  }
  100% {
    background-color: yellow;//回
  }
}

注意我们不只可以设置开始和结束，而是从 0% 到 100% 间的任意位置都可以设置。

animation-fill-mode 指定了在动画结束时元素的样式： 你可以这样设置：这样使得它会一直保持最后的状态

animation-fill-mode: forwards;

animation-iteration-count如果想让动画一直运行，可以把值设置成 infinite。

在 如果要描述的动画是一辆车在指定时间内（animation-duration）从 A 运动到 B，那么 animation-timing-function 表述的就是车在运动中的加速和减速等过程。默认值是 ease，动画以低速开始，然后加快，在结束前变慢。 其它常用的值包括 ease-out：动画以高速开始，以低速结束；ease-in，动画以低速开始，以高速结束；linear：动画从头到尾的速度是相同的。

应用无障碍

视觉障碍用户-alt

为视觉障碍用户添加替代图像的文本-img 标签的 alt 属性。搜索引擎也通过它来理解图片内容，并将其加入到搜索结果中。

使用 figure 元素提高图表的可访问性，figcaption 包含在 figure 标签中，figcaption里面是解释图片的，在figure里面的会离边框差不多20px,不会顶格。

<figure>
        <img src="roundhouseDestruction.jpeg" alt="Photo">
        <br>
        <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>

</figure>

tabindex 将键盘焦点添加到元素中

tabindex 属性值为负整数（通常为 -1）的标签也是可以获得焦点的，只是不可以通过键盘操作（如 tab 键）来获得焦点，为0的时候可以通过键盘，给div p之类的加上点击的话会高亮，还可以指定元素的 tab 键焦点顺序， 将它的值设置为大于等于 1 的整数，就可以实现这个功能。

<div tabindex="0">I need keyboard focus!</div>

使用 audio 元素提高音频内容的可访问性

audio 标签支持 controls 属性， 用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。 这是一个布尔值属性，意味着它不需要一个值，它在标签上存在即开启设置。loop="loops"表示可以无限次循环播放

<audio id="meowClip" controls>
  <source src="巴拉巴拉.mp3" type="audio/mpeg">

添加可访问的日期选择器

<input type="date" id="input1" name="input1">

使用自定义 CSS 让元素仅对屏幕阅读器可见

我们想在页面中添加一些只对屏幕阅读器可见的内容，可以用 CSS 来实现。 当信息为视觉格式（例如图表）时，但屏幕阅读器用户需要备用文稿（例如表格）来访问数据，在这种情况下， 使用 CSS 将屏幕的只读元素放到浏览器窗口可视区域之外。

举个例子：

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}

通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航

HTML 提供 accesskey 属性，用于指定激活元素或者使元素获得焦点的快捷键。 添加 accesskey 属性可以让使用键盘的用户更高效率地导航。

HTML5 允许在任何标签上使用这个属性。 该属性尤其适用于链接、按钮、表单组件等元素。

<button accesskey="b">Important Button</button>

响应式网页设计原则

媒体查询

上面说过。

使图片自适应设备尺寸

用 CSS 来让图片自适应其实很简单。 你只需要给图片添加这些属性:

img {
  max-width: 100%;
  height: auto;
}

设置 max-width 值为 100% 可确保图片不超出父容器的范围；设置 height 属性为 auto 可以保持图片的原始宽高比。

针对高分辨率屏幕应使用视网膜图片

让图像正确出现在高分辨率显示器（例如 MacBook Pros “Revistina display”）上的最简单方式， 是定义它们的 width 和 height 值为原始值的一半。

使排版根据设备尺寸自如响应

除了使用 em 或 px 设置文本大小，你还可以用视窗单位来做响应式排版。

四个不同的视窗单位分别是：

• vw：如 10vw 的意思是视窗宽度的 10%。
• vh： 如 3vh 的意思是视窗高度的 3%。
• vmin： 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
• vmax： 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。

CSS弹性盒子（flex）

使用 flex-direction 属性创建一个行

给元素添加 display: flex 属性可以让它变成 flex 容器， 然后可以让元素的项目排列成行或列。

只要给父元素添加 flex-direction 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。flex-direction 的其他可选值还有 row-reverse 和 column-reverse。

使用 justify-content 属性对齐元素

justify-content: center;：即 flex 子元素在 flex 容器中居中排列。 其他选择包括：

• flex-start：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置 justify-content 的值，那么这就是默认值。
• flex-end：从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。
• space-between：项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
• space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
• space-evenly：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。

使用 align-items 属性对齐元素

align-items 属性与 justify-content 类似。 justify-content` 属性使 flex 子元素沿主轴排列。 行的主轴是水平线，列的主轴是垂直线。

Flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。 行的交叉轴是垂直的，列的交叉轴是水平的。

CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说，定义的是元素的上下对齐方式； 对列来说，是定义元素的左右对齐方式。

align-items 的可选值包括：

• flex-start：从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。
• flex-end：从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边。
• center：把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。
• stretch：拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。 如未设置align-items的值，那么这就是默认值。
• baseline：沿基线对齐。 基线是文本相关的概念，可以认为它是字母排列的下端基准线。

使用 flex-wrap 属性包裹一行或一列

使用 flex-wrap 属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。

• nowrap：默认值，不换行。
• wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。
• wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。

使用 flex-shrink 属性定义 flex 子元素的收缩规则

flex-shrink 属性。 使用之后，如果 flex 容器太小，则子元素会自动缩小。 当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。

子元素的 flex-shrink 接受数值作为属性值。 数值越大，则该元素与其他元素相比会被压缩得更厉害。 比如，一个项目的 flex-shrink 属性值为 1，另一个项目的 flex-shrink 属性值为 3，那么后者相比前者会受到 3 倍压缩。

使用 flex-grow 属性定义 flex 子元素的增长系数

如果一个项目的 flex-grow 属性值为 1，另一个项目的 flex-grow 属性值为 3，那么值为 3 的一个会较另一个扩大 3 倍。

使用 flex-basis 属性设置元素的初始大小

flex-basis 属性定义了在使用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前，元素的初始大小。

flex-basis 属性的单位与其他表示尺寸的属性的单位一致（px、em、% 等）。 如果值为 auto，则项目的尺寸随内容调整。

使用 flex 短方法属性

flex-grow、flex-shrink 和 flex-basis 属性可以在 flex 中一并设置。

例如，flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。属性的默认设置是 flex: 0 1 auto;。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    display:flex;
    background-color: dodgerblue;
  flex:2 2 150px;
    height: 200px;
  }

  #box-2 {
    display:flex;
    background-color: orangered;
  flex:1 1 150px;
    height: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

在容器大于 300px 时，#box-1 扩大的空间会是 #box-2 扩大空间的两倍；在容器小于 300px 时，前者缩小的空间会是 #box-2 缩小空间的两倍。 300px 是两个盒子的 flex-basis 属性值之和。

用 order 属性重新排列子元素

这个属性接受数字作为参数，可以使用负数。

使用 align-self 属性

这个属性允许你调整单个子元素自己的对齐方式，而不会影响到全部子元素。

align-self 可设置的值与 align-items 的一样，并且它会覆盖 align-items 所设置的值。

CSS网格(grid布局)

创建第一个 CSS 网格

通过将属性 display 的值设为 grid，HTML 元素就可以变为网格容器。

注意： 在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。

使用 grid-template-columns 添加多列

在一个网格容器中使用 grid-template-columns 属性可以添加一些列

.container {
  display: grid;
  grid-template-columns: 50px 50px;
}

上面的代码会在网格容器中添加两列，宽度均为 50px。 grid-template-columns 属性值的个数表示网格的列数，每个值表示相应的列宽度。

使用 grid-template-rows 添加多行

使用 CSS 网格单位来更改列和行的大小

在 CSS 网格中，可以使用绝对单位（如 px）或相对单位（如 em）来定义行或列的大小。 下面的单位也可以使用：

fr：设置列或行占剩余空间的比例，

auto：设置列宽或行高自动等于它的内容的宽度或高度，

%：将列或行调整为它的容器宽度或高度的百分比，：

grid-template-columns: auto 50px 10% 2fr 1fr;

这段代码添加了五个列。 第一列的宽与它的内容宽度相等；第二列宽 50px；第三列宽是它容器的 10%；最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份。

使用 grid-column-gap 创建多列之间的间距

grid-column-gap: 10px;

这会为我们创建的所有列之间都添加 10px 的空白间距。

使用 grid-row-gap 创建多行之间的间距

使用 grid-gap 为网格添加间距

grid-gap 只有一个值，那么这个值表示行与行之间、列与列之间的间距均为这个值。 如果有两个值，那么第一个值表示行间距，第二个值表示列间距。

使用 grid-column 来控制空间大小

网格中，假想的水平线和垂直线被称为线（lines）。 这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。

可以使用 grid-column 属性加上网格线条的编号来定义网格项开始和结束的位置.

grid-column: 1 / 3;

这会让网格项从左侧第一条线开始到第三条线结束，占用两列。

使用 grid-row 来控制空间大小

和设置一个网格项占用多列类似，你也可以设置它占用多行。 你可以使用 grid-row 属性来定义一个网格项开始和结束的水平线。

使用 justify-self 水平对齐项目

你可以使用网格项的 justify-self 属性，设置其内容的位置在单元格内沿水平轴的对齐方式。 默认情况下，这个属性的值是 stretch，这将使内容占满整个单元格的宽度。 该 CSS 网格属性也可以使用其他的值：

start：使内容在单元格左侧对齐，

center：使内容在单元格居中对齐，

end：使内容在单元格右侧对齐，

使用 align-self 垂直项目

我们可以对网格项使用 align-self 属性来实现

用 justify-items 水平对齐所有项目

可以对网格容器使用 justify-items 使它们一次性沿水平轴对齐。 这个属性能接受我们在之前学到的所有值作为属性值，但与之前不同的是，它会将网格中 所有 的网格项按所设置的方式对齐。

使用 align-items 垂直对齐所有项目

对网格容器使用 align-items 属性可以让网格中所有的网格项沿竖直方向对齐。

将网格划分为区域模板

你可以将网格中的一些单元格组合成一个区域（area），并为该区域指定一个自定义名称。 可以通过给容器加上 grid-template-areas 来实现：(这个是加在父类身上的)

grid-template-areas:
  "header header header"
  "advert content content"
  "advert footer footer";

上面的代码将网格单元格分成四个区域：header、advert、content 和 footer。 每个单词代表一个单元格，每对引号代表一行。

使用 grid-area 属性将项目放置在网格区域中

在为网格添加区域模板后，可以通过引用你所定义的区域的名称，将元素放入相应的区域。 为此，你需要对网格项使用 grid-area：

.item1 {
  grid-area: header;
}

这样，class 为 item1 的网格项就被放到了 header 区域里。 在这个示例中，网格项将占用第一行整行，因为这一整行都被命名为标题区域。

使用 grid-area 创建区域模板

item1 { grid-area: 1/1/2/4; }交叉着看

示例中的网格项将占用第 1 条水平网格线（起始）和第 2 条水平网格线（终止）之间的行，及第 1 条垂直网格线（起始）和第 4 条垂直网格线（终止）之间的列。

使用 repeat 函数减少重复

使用 repeat 方法指定行或列的重复次数，后面加上逗号以及需要重复的值。

以下为添加 100 行网格的例子，每行高度均为 50px：

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

你还可以用 repeat 方法重复多个值，并在定义网格结构时与其他值一起使用。 比如：

grid-template-columns: repeat(2, 1fr 50px) 20px;

效果相当于：

grid-template-columns: 1fr 50px 1fr 50px 20px;

注意： 1fr 50px 重复了两次，后面跟着 20px。

使用 minmax 函数限制项目大小

内置函数 minmax 也可用于设置 grid-template-columns 和 grid-template-rows 的值。 它的作用是在网格容器改变大小时限制网格项的大小。 为此，你需要指定网格项允许的尺寸范围。 例如：

grid-template-columns: 100px minmax(50px, 200px);

在上面的代码中，我们通过 grid-template-columns 添加了两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。

使用 auto-fill 创建弹性布局

repeat 方法带有一个名为自动填充（auto-fill）的功能。 它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。 你可以通过结合 auto-fill 和 minmax 来更灵活地布局。

repeat(auto-fill, minmax(60px, 1fr));

上面的代码效果是这样：首先，列的宽度会随容器大小改变。其次，只要容器宽度不足以插入一个宽为 60px 的列，当前行的所有列就都会一直拉伸。 注意： 如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行

使用 auto-fit 建弹性布局（比auto-fill常用）

auto-fit 效果几乎和 auto-fill 一样。 不同点仅在于，当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。

注意： 如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。

使用媒体查询+grid

将 CSS 网格与使用媒体查询结合使用，如使用媒体查询重新排列网格区域、更改网格尺寸以及重新排列网格项位置，我们可以让制作出的网站更具响应性。

下面的代码表示当网页可视区域的宽不小于 300px 时，列数从 1 变为 2。 并且，广告（advertisement）区域会完全占据左列。

<style>
  .item1 {
    background: LightSkyBlue;
    grid-area: header;
  }

  .item2 {
    background: LightSalmon;
    grid-area: advert;
  }

  .item3 {
    background: PaleTurquoise;
    grid-area: content;
  }

  .item4 {
    background: lightpink;
    grid-area: footer;
  }

  .container {
    font-size: 1.5em;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
      "header"
      "advert"
      "content"
      "footer";
  }

  @media (min-width: 300px){
    .container{
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "advert header"
        "advert content"
        "advert footer";
    }
  }

 
</style>

<div class="container">
  <div class="item1">header</div>
  <div class="item2">advert</div>
  <div class="item3">content</div>
  <div class="item4">footer</div>
</div>

完结撒花