[CSS] 栅格化布局

栅格化布局帮助你更容易构建复杂的网页设计。它会将HTML元素转换为网格的容器(有行有列)。你可以在网格里面添加你想要的子元素。

grid 初始化元素为栅格化

将一个HTML元素转换为网格的容器,只需要对其设置display: grid即可。display: grid告诉我们,可以使用CSS Grid的相关属性了。

item1
item2
item3
item4
item5
item6
.container{
  display: grid;
}

⚠ 在CSS栅格布局中,父元素就是栅格容器(这里是class="container"的dl元素),其下的子元素为我们称为项目items

grid-template-columns 设置列数

上面我们已设定容器container为珊格化了,那么我们还得为这块圈起来的元素设置模版列数,表明列的区域。

.container{
  min-width: 200px;
  display: grid;
  grid-template-columns: 100px 100px auto;
}

grid-template-columns的属性值100px 100px auto的意思是将区域划分为三列,第一列和第二列的宽度都为100px,第三列的宽度为自适应。

grid-template-rows 设置行数

上面我们设置了列数,那么对应的,就有行数,我们来设置下模版行数。

.container{
  min-height: 200px;
  display: grid;
  grid-template-rows: 60px auto;
}

grid-template-rows的属性值60px auto的意思是将区域分为两行,第一行的高度固定为60px,而第二行的高度自适应。

单位的设置可以有px, auto, %, fr。这里的frfraction的缩写,表示某物的部分。比如下面的例子:

grid-template-rows: auto 10% 2fr 1fr,表示的意思是将栅格化的区域分为4行:第一行是根据内容自适应,第二行为区域的10%,最后剩余的区域分成三部分,2fr表示占其2/3,1fr表示占其1/3。

grid-column-grap 设置列间距

有必要对列与列之间设置间距,你可以理解为margin-leftmargin-right的应用:

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-column-gap: 10px;
}

grid-column-gap表示列之间相隔10px,对左边界区域左间隔不影响,对右边界区域右间隔不影响。

grid-row-gap 设置行间距

像上面设置列边距一样,有必要设置列与列的间距,对应的 - 你可以理解为margin-topmargin-bottom的应用:

.container{
  display: grid;
  grid-template-rows: 60px auto;
  grid-row-gap: 10px;
}

grid-row-gap表示行之间相隔10px,对上边界区域顶部间隔不影响,对下边界区域底部间隔不影响。

grid-gap 简写

margin一样,我们可以对margin-top, margin-right, margin-bottom, margin-left进行简写。grid-gap可以对grid-row-gap, grid-column-gap进行简写。

但是,grid-gap的值又不像margin一样可以写四个,它只有两个:

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 60px auto;
  grid-gap: 10px 20px;
}

grid-gap: 10px 20px表示行间隔为10px,列间隔为20px

到目前为止,我们讲的是栅格布局容器的拆分,下面我们来讲其子元素的布局。

子元素 grid-column

grid-column表示列跨度,比如:

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  .item5{
    grid-column: 1 / 3
  }
}

grid-column上面的列跨度,表示类名为item5元素横跨第一列到第三列。

子元素 grid-row

对应的,grid-row表示行跨度,比如:

.container{
  display: grid;
  grid-template-rows: 50px 50px auto;
  .item3{
    grid-row: 2 / 4
  }
}

grid-row上面的行跨度,表示类名为item3元素横跨第二行到第四行。

子元素 justify-self

justify-self更改元素宽度和排列的位置,有值如下:

  • stretch: 默认值,拉伸内容的宽度为预设的宽度

  • start: 宽度为内容宽度,内容在左侧展示

  • center: 宽度为内容宽度,内容在居中展示

  • end: 宽度为内容宽度,内容在右侧展示

子元素 align-self

align-self更改元素高度和排列的位置,有值如下:

  • stretch: 默认值,拉伸内容的高度为预设的高度

  • start: 宽度为内容高度,内容在上侧展示

  • center: 宽度为内容高度,内容在居中展示

  • end: 宽度为内容高度,内容在下侧展示

justify-items

我们想对所有子元素内容进行水平方向的排列,那么需要在设定的容器中使用justify-items属性,而不是一个个子元素进行设置justify-self属性。justify-items属性值同justify-self

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  justify-items: center;
}

align-items

同理的,我们想对所有子元素内容进行垂直方向的排列,那么需要在设定的容器中使用align-items属性,而不是一个个子元素进行设置align-self属性。align-items属性值同align-self

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  align-items: center;
}

grid-template-areas

通过grid-template-areas为每个栅格单元命名。

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 50px 50px auto;
  grid-template-areas: 
    "header header header"
    ". content content"
    "footer footer footer";
}

注意: ⚠ .表示表格中的空单元格

子元素 grid-area关联预设名称

grid-template-areas已经为元素划分好了单元格并命名了,接下来可以通过grid-area在其子元素中关联上。

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 50px 50px auto;
  grid-template-areas: 
    "header header header"
    ". content content"
    "footer footer footer";
  .item6{
    grid-area: footer;
  }
}

当然,我们可以仅仅使用grid-area实现上面需要grid-template-areagrid-area才能实现的效果。如下

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 50px 50px auto;
  .item6{
    grid-area: 3 / 1 / 4 / 4;
  }
}

grid-area简写的语法是:

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

使用函数repeat简化

使用grid-template-columnsgrid-template-rows定义栅格的行列结构。上面我们是一个个定义的。我们也可以使用repeat()函数简化操作。

比如分为四列,第一列和第二列是100px,第三列为1fr,最后一列是2fr

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

函数minmax限定最小最大值

在我们布局空间有限的情况下,我们需要对布局的元素设置其最小值和最大值,通过minmax()函数可以轻松做到。

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

上面的属性在实际的开发中已经够用。如果你还想了解其他的属性等,你可以点击下面的参考链接进行学习。grid的兼容性还是杠杆的,除了Opera MiniBaidu Browser不支持外,其他的都支持~

更多的内容可以前往JIMMY BLOG

参考

http://cssgridgarden.com/

https://www.freecodecamp.org/learn/responsive-web-design/css-grid/

你可能感兴趣的:([CSS] 栅格化布局)