CSS布局之Grid

·  阅读 23

Grid概述

  • 网格布局(Grid)是最强大的css布局方案

  • 他将网页划分为一个个网格,可以组合成不同的网格,做出各种各样的布局,以前,只能通过复杂的css达到效果,现在浏览器内置了Grid布局。 image.png

  • 上图代码

<template>
  <ul class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </ul>
</template>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(1, 400px calc(100% - 800px) 400px);
  grid-template-rows: repeat(2, 30% 20% );

  div {
    display: inline-block;
    text-align: center;
  }
  div:nth-child(even){
    background: red;
  }
  div:nth-child(odd){
    background: yellow;
  }
}
复制代码

基本概念

容器和网格

  • 采用网格布局的区域称为容器(container),容器内部采用网格定位的子元素,成为项目。

行和列

  • 容器里面分为行和列,容器里水平区域称为行,垂直区域称为列。

单元格

  • 行与列交叉的区域就叫做单元格,正常情况下,n行和m列会产生n * m个单元格,上图带颜色的就是单元格

网格线

  • 划分网格的线,称为网格线。水平网格线划分出行,垂直网格线划分出列,正常情况下,n行就有n+1条水平网格线,m列就有m条垂直网格线。

容器属性

  • Grid布局属性,一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性

display属性

  • 指定容器采用网格布局
div{
    dispaly: grid
}
复制代码
  • 默认情况下,设置为grid布局的元素都会变成块级元素,但是也可以设置为行内块元素
div{
    display:inline-grid
}
复制代码

image.png

  • 注意,设为网格布局以后,容器子元素(项目)的floatdisplay: inline-blockdisplay: table-cellvertical-aligncolumn-*等设置都将失效。

grid-template-columns 属性, grid-template-rows 属性

  • grid-template-columns属性定义了每一列的列宽,grid-template-rows属性定义了每一行的行高。
div:{
  //第一种写法
  display: grid;
  grid-template-columns:100px 100px 100px 100px;
  grid-template-rows:100px 100px 100px;
  
  //也支持百分比  第二种写法
  grid-template-columns:30% 70%;
  grid-template-rows:70% 30%;
  
  //也支持calc函数 第三种写法
  grid-template-columns:100px calc(100% - 100px);
  grid-template-rows:70% 30%;
}
复制代码

image.png

image.png

image.png

repeat()

  • 有时候,重复的写同样的值非常的麻烦,尤其是网格很多时,这时可以用repeat()函数,简化重复的值。上面第一种写法可以写成
div:{
    grid-template-columns:repeat(4,100px)//分为四列,每列宽度为100px
    
    grid-template-coluns: repeat(3,33.3%)//支持百分比
    
    grid-template-coluns: repeat(3,100px 200px) //分为四列,两列为一组,列宽100px 200px 100px 200px
复制代码

auto-fill关键字

  • 有时,单元格的大小是固定的,但是容器的大小不固定,如果希望每一行或者每一列容纳尽可能多的单元格,这时可以使用auto-fill关键字自动填充。
div{
    grid-template-coluns: repeat(auto-fill,100px)//每列宽100px 自动将容器填充,知道容器不能放置更过的列。
    grid-template-coluns: repeat(auto-fill,25%)//支持百分比
}
复制代码

image.png

fr关键字

  • 为了方便表示比例关系,网格布局提供了fr关键字,(fraction的缩写,译为片段的意思)。如果两列的宽度分别为1fr和2fr,就表示后者时前者的两倍。
div{
    grid-template-columns: 1fr 2fr;
    //也可以与固定长度搭配
    grid-template-columns:150px 1fr 2fr;
    
    //如果要实现九宫格也很容易,只需要设置列宽,行高不设置会默认平分
    grid-template-columns:repeat(3,1fr);
}
复制代码

image.png image.png

image.png

minmax()关键字

  • 函数产生一个长度范围,表示长度在这个范围之中。它接受俩个参数,分别为最大值和最小值。
div{
    //随着浏览器的缩小,第三列最小的宽度为100,最大为1fr,是第二列的一半
    grid-template-columns: 1fr 2fr minmax(100px, 1fr);
}
复制代码

image.png

auto关键词

  • auto表示由浏览器的大小来自己决定长度,这个也得看分几行几列,具体见一下代码
<ul class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
</ul>
.container {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 100px 200px auto ;
    grid-template-rows: 100px auto;
}
 
复制代码
  • 因为有九个项目,已经规定一列三个,所以就必须分为三行,这样才能将九个项目完全展示。然后规定第一行的高度为100ox,剩下的两行为auto,则这两行会将剩余的高度进行平分。 image.png

grid-row-gap属性、grid-columns-gap属性和grid-gap属性

  • grid-row-gap属性用于设置行间距,grid-columns-gap用于列间距。
  • grid-gap是grid-row-gap和grid-columns-gap的合并简写。
div{
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 20px;
  grid-column-gap: 30px;
  
  //以上可以简写成
  grid-gap: 20px 30px;
  //根据最新规定,grid-row-gap、grid-columns-gap以及grid-gap的grid可以省略不写
  //故,以上可以简写成row-gap columns-gap gap
  gap: 20px //gap只写一个参数,默认第二个值和第一个值一样  也就是行间距等于列间距 20px
}
  

复制代码

image.png

jusitify-content属性、align-content属性和place-content属性

  • jusitify-content属性代表网格布局在整个浏览器区域中的水平位置
    • start 齐容器的起始边框。
    • end 齐容器的结束边框。
    • center 器内部居中。
    • stretch 目大小没有指定时,拉伸占据整个网格容器。
    • space-around 个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
    • space-between 与项目的间隔相等,项目与容器边框之间没有间隔
    • space-evenly 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
  • align-content属性,代表网格布局在整个浏览器区域中的垂直位置
  • place-content属性是align-content和jusitify-content合并的简写。如果只写一个参数,则第二个参数默认等于第一个。
//首先整个grid布局的宽高要小于包含他的父级块级元素  这样才能看出效果
div{
  place-content: center;
}
复制代码

image.png

项目属性

  • 设置单元格所在的垂直和水平网格线,从而对单元格的列宽行高进行设置
  • grid-column-start 单元格左边框线所在的垂直网格线
  • grid-column-end 单元格右边框线所在的垂直网格线
  • grid-rows-start 单元格上边框线所在的水平网格线
  • grid-row-end 单元格下边框线所在的水平网格线
 .item-1 {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
  }
复制代码

image.png

容器属性

  • 为了方便理解将grid-auto-flow在这里讲解,这个属性是为了设置网格的顺序。
  • 划分网格后,容器里的子元素会按照顺序,自动放置在每一个网格。默认顺序是先行后列,即填满第一行,再放入第二行。
  • 这个属性的值有以下几种类型
    • row 默认先行后列
    • column 先列后行
    • row dense 默些项目指定位置后,剩下的项目先行后列铺满网格
    • column dense 默认的项目指定位置后,剩下的项目先列后行铺满网格
  • 这是默认状态下,指定位置后 之前它所在的位置就空出来了
div{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  .item-1 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .item-2{
    grid-column-start: 3;
    grid-column-end: 5;
  }
}
复制代码

image.png

  • 将grid-auto-flow设置成row dense
div{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow:row dense;
  .item-1 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .item-2{
    grid-column-start: 3;
    grid-column-end: 5;
  }
}
复制代码

image.png

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改