网页编排Grid-30天学会HTML＋CSS，制作精美网站

Grid是什麽

Grid是砖墙式版面，使用二维的排版方式，与flexbox不同的地方是Grid一次可以控制水平及垂直方向。Grid像是美工软件，有许多参考线帮助你定位，要将元素设定相同大小、间距的排列都可以使用Grid制作。
Grid是由父元素(Grid Container)和子元素(Grid items)组成。子元素之间的空隙，为格线间距（Grid gap)。
目前浏览器支援较新版本的浏览器，想看浏览器支援可以到 can i use 网站

区块宣告

display: grid/inline-grid

• grid：类似display:block
• inline-grid：类似display:inline-block

grid-template-columns ＆ grid-template-rows

grid-template-columns：定义容器有多少栏；grid-template-rows：定义容器有多少列
要制作一个 4x3 的容器可以这样写，每个区块的宽度为auto(适萤幕宽度大小来决定)，高度为100px

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: #d7ebfd;
  text-align: center;
  padding: 20px 0;
}

使用单位

fr

fr为fraction比例的缩写，会依照画面宽度比例伸缩。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 1fr;
}

max-content / min-content

• max-content：取得项目最大的尺寸当作填充条件
• min-content：取得项目最小的尺寸当作填充条件

minmax()

一个长度范围。minmax(最小值, 最大值)
范例中，minmax(100px, 1fr)表示宽度不小於100px，不大於1fr。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr minmax(100px, 1fr) 1fr;
}

auto

自动设定项目尺寸

长度单位

像是px, %...

repeat

可以不用重复写一样的设定

.grid-container {
  display: grid;
  grid-template-columns: repeat(5,1fr);
}

auto-fill / auto-fit

• auto-fill：自动填满重复的单元格数量
• auto-fit：与auto-fill相同。如果没有弹性项目，那个网格单元格就会被折叠起来
  这两者差别在当网页宽度特别宽，且没有填满时，auto-fill会有匿名的格子
  

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

auto-fit会将後面表格合并成一个

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

grid-template-areas ＆ grid-area

grid-template-areas用来定义每个单元格的名称，可以使用grid-area指定名称跟放置位置

<div class="grid-container">
  <div class="item1">header</div>
  <div class="item2">sider</div>
  <div class="item3">main</div>  
  <div class="item4">footer</div>
</div>

指定区域名称，当不使用该区域时，可以使用点 . (点)来略过。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 80px 300px 50px;
  grid-template-areas: "header header header"
  "sider main main"
  "sider footer ."
}
.item1{
  background-color: #00bcd4;
  grid-area: header;
}
.item2{
  background-color: #ffc107;
  grid-area: sider;
}
.item3{
  background-color: #cddc39;
  grid-area: main;
}
.item4{
  background-color: #607d8b;
  grid-area: footer;
}

grid-auto-flow

row：预设值，由左至右，由上到下

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: row;
}

column 由上到下，由左到右

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
}

dense 填补空缺

row dense

第三区块比较大，如果止血grid-auto-flow:row，就会有空缺

将grid-auto-flow改为row dense，第四区块就会去填补空缺

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 10px;
  grid-auto-flow:row dense;
}
.item3 { 
  grid-column: auto / span 2; 
}

column dense

第二区块起始位置从第三区块开始，他前面就有一个空缺

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 10px;
  grid-auto-flow:column;
}
.item2{ 
  grid-row-start:3; 
}

所以，在grid-auto-flow改为column dense;第三区块就去补空缺位置

gap 子元素空隙宽度

grid-column-gap：水平栏位的间隔

grid-row-gap：垂直栏位的间隔

.grid-container {
  grid-row-gap:20px;
}

gap 结合上述两种缩写的方式

gap: row-gap column-gap

垂直间距：20px 水平间距：10px

.grid-container {
  gap: 20px 10px; 
}

垂直水平间距相同gap:10px;

.grid-container {
  gap: 10px; 
}

内部容器

Grid line

grid-column

• grid-column-start：水平方向开始起始格线位置
• grid-column-end：水平方向结束的格线位置
• auto：默认值
• span n：物件所占的空间数

grid-row

• grid-row-start：垂直方向开始的格线位置
• grid-row-end：垂直方向结束的格线位置

.item2{ 
  grid-column-start: 3; /* 起始位置从3开始 */
  grid-column-end: span 3; /* 跨三区块 */
}

grid-column及grid-row，可以使用斜线 (/) 将起始位置/结束位置隔开，上面的code可以简写成：

.item2{ 
  grid-column: 3 / span 3;
}

对齐

方式与flexbox相同

justify-content

• start：靠左对齐
• end：靠右对齐
• center：靠中间对齐
• stretch：依照比例拉宽到满版
• space-around：内容间距都会平均分配

align-content

• start：靠左对齐
• end：靠右对齐
• center：靠中间对齐
• stretch：依照比例拉高到满版
• space-around：内容间距都会平均分配
• space-between：平均分配内容，会对齐行头及行尾
• space-evenly：效果同 space-around 空白比space-around多

结论

介绍完grid的每个样式功能，让我们用一个完整个切版来做整理

步骤一：建立一个并将图片插入html里

<div class="box">
  <div class="item">
    <img src="img/img2.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img3.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img4.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img5.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img6.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img7.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img2.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img3.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img4.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img5.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img6.jpg" alt="">
  </div>
 </div>

.box{
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

gap设定留白距离
grid-template-columns设定repeat(重复次数)，因为图片宽度都一样
auto-fit:让元素依画面宽度自动换行
mixmax(300px, 1fr)，表示元素的宽度不会小於300px，并会符合画面缩放

步骤二：图片尺寸不同，用object-fit属性裁切图片

.box img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

步骤三：将第一张图item设定big-box

设定grid-column水平范围的宽度（黄色数字）及grid-row垂直范围的高度（紫色数字），1/3 为开始线/终止线

<div class="box">
  <div class="item big-box">
    <img src="img/img2.jpg" alt="">
  </div>
	...
</div>

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

步骤四：随萤幕装置缩放将big-box grid-column属性及row-column属性设定auto

@media(max-width:414px){
  .big-box{
    grid-column: auto;
    grid-row: auto;
  }
}

这样就完成啦～

完整的css样式整理

.box{
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.big-box{
  grid-column: 1/3;
  grid-row: 1/3;
}
.box img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}
@media(max-width:414px){
  .big-box{
    grid-column: auto;
    grid-row: auto;
  }
}

资料来源：
https://medium.com/enjoy-life-enjoy-coding/css-所以我说那个版能不能好切一点-grid-基本用法-cd763091cf70
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout