grid布局

WebGirl
581 阅读11分钟

相关链接：

Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局，设置 css的 display:grid 或 display:inline-grid ,都可以将直接将容器能产生单元格的容器。

基本概念：

  • 容器（container）——有容器属性
  • 项目（items）——有项目属性
  • 行（row)
  • 列（column）
  • 间距（gap) ——单元格之间的距离
  • 区域（area）—— 自己划分每个单元格占据的区域
  • 内容（content)

容器属性

grid-template-rows

定义：

  • grid-template-rows 属性用于设置网格布局中的行数及高度。
  • 这些值是一个以空格分隔的列表，其中每个值指定相应行的高度。
  • grid-template-rows 设置每一行的高度，可以是具体值，也可以百分比，也可以是auto

语法：

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
值描述
none默认值，不指定行的大小。
auto行的大小由容器的大小和行中网格元素内容的大小决定。
max-content每行的大小设置为该行中最大网格元素的大小。
min-content每行的大小设置为该行中最小网格元素的大小。
length长度值，可以是 px 为单位的数值或百分比 %。 0 是默认值。
initial将此属性设置为默认值。
inherit从父元素继承该属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 100px 300px;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>
<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>
</body>
</html>

使用grid-template-rows 属性定义第一行高度为 100px，第二行高度为 300px。

image.png

grid-template-columns

定义：

  • grid-template-columns 属性用于设置网格布局中的列数及宽度。
  • grid-template-columns 设置每一列的宽度，可以是具体值，也可以百分比，也可以是auto

语法：

同 grid-template-rows

eg:

.box {
    width:500px;
    height:480px;
    border:1px solid #000;
    display:grid;
    grid-template-rows:10% auto 20%;
    grid-template-columns:100px auto 100px;
    margin:0 auto;
    margin-top:10px;
    color:white;
    font-size:30px;
}
.div1 {
    background:red;
}
.div2 {
    background:green;
}
.div3 {
    background:yellow;
}
.div4 {
    background:blue;
}
.div5 {
    background:palegreen;
}
.div6 {
    background:plum;
}
.div7 {
    background:peru;
}
.div8 {
    background:yellowgreen;
}
.div9 {
    background:powderblue;
}
.div10 {
    background:palevioletred;
}
<div class="box">
    <div class="div1">1</div>
    <div class="div2">222222222222</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
    <div class="div5">5</div>
    <div class="div6">6</div>
    <div class="div7">7</div>
    <div class="div8">8</div>
    <div class="div9">9</div>
    <div class="div10">10</div>
</div>

结果如图所示，虽然设置的是三行三列，但是如果html多出来的div10，会直接换行显示，并且高度塞满容器：

image.png

repeat属性

相当于重复的简写，第一个参数是次数，第二个是重复的值。

  grid-template-rows:repeat(3,100px);
  grid-template-columns:repeat(3,150px);

image.png

auto-fill属性

有时候单元格的数量是不固定的，大小是固定的，需要自动填充容器，就可以用auto-fill属性。

.box{
   grid-template-rows:repeat(3,100px);
  grid-template-columns:repeat(auto-fill,60px);
}

image.png

fr属性

fr属性可以平分比例，但是和百分比不一样，百分比不算gap空间，fr是算上的。

.box{
  width:500px;
  height:480px;
  border:1px solid #000;
  display:grid;
  grid-template-rows:1fr 1fr 1fr 1fr;
  grid-template-columns:repeat(4,1fr);
  margin:0 auto;
  margin-top:10px;
  color:white;
  font-size:30px;
}

image.png

如果内容超出了平分的比例，就会多出去，相应的另外行/列就会同比例的减小：

    <div class="box">
        <div class="div1">1</div>
        <div class="div2">222222222222222222</div>
        <div class="div3">3</div>
        <div class="div4">4</div>
        <div class="div5">5</div>
        <div class="div6">6</div>
        <div class="div7">7</div>
        <div class="div8">8</div>
        <div class="div9">9</div>
        <div class="div10">10</div>
    </div>

如图所示，行平分了四行，列没有被平分，是因为第二列的内容超出了平分的比例，就会多出去，相应的另外三列就会同比例的减小：

image.png

minmax函数

minmax函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值。

.box{
  width:500px;
  height:480px;
  border:1px solid #000;
  display:grid;
  grid-template-rows:1fr 1fr 1fr 1fr;
  grid-template-columns:150px 150px 150px minmax(10px,100px);
  margin:0 auto;
  margin-top:10px;
  color:white;
  font-size:30px;
}

如图所示，前三列都是150px,容器的宽度是500px，第四列是50px,在minmax(10px,100px)区间中

image.png

row-gap

定义：

  • 格子之间的间距：row-gap表示行与行之间的间距。

语法：

row-gap: length|normal|initial|inherit;
值描述
length一个指定的长度，将设置行之间的差距
normal默认值。 指定行之间的正常间隙
initial将此属性设置为其默认值。
inherit从其父元素继承此属性

column-gap

定义：

  • 格子之间的间距：column-gap表示列与列之间的间距。

语法：

column-gap: *length*|normal;
值描述
length一个指定的长度，将设置列之间的差距
normal默认值。 指定列之间的正常间隙

eg:

    .box {
            width: 500px;
            height: 480px;
            border: 1px solid #000;
            display: grid;
            grid-template-rows: 1fr 1fr 1fr 1fr;
            grid-template-columns: 150px 150px 150px minmax(10px, 100px);
            margin: 0 auto;
            margin-top: 10px;
            color: white;
            font-size: 30px;
            column-gap: 10px;
            row-gap: 30px;
        }

image.png

注意：如果row-gap和column-gap的值一样，例如都是10px,可以简写成gap:10px，如果不一样，可以简写成gap:30px 10px,30px代表row行间距，10px代表column列间距。

grid-auto-flow

定义：

  • grid-auto-flow 属性指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

语法：

grid-auto-flow: row|column|dense|row dense|column dense;
值描述
row默认值。通过填充每一行来放置网格元素，在必要时增加新列
column通过填充每一列来放置网格元素，在必要时增加新列
dense关键字指定自动布局算法使用一种"稠密"堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。
row dense按行来填充网格中前面留下的空白
column dense按列来填充网格中前面留下的空白

eg: 网格的排放顺序，默认是row,先行后列，可以设置column,就是先列后行。

        .box {
            width: 500px;
            height: 480px;
            border: 1px solid #000;
            display: grid;
            grid-template-rows: 1fr 1fr 1fr 1fr;
            grid-template-columns: 150px 150px 150px minmax(10px, 100px);
            margin: 0 auto;
            margin-top: 10px;
            color: white;
            font-size: 30px;
            column-gap: 10px;
            row-gap: 30px;
            grid-auto-flow: column;
        }

image.png

有时有些格子大的情况下，会让容器有些地方空出来，占不满容器，空间利用率不高：

.box {
            width: 500px;
            height: 480px;
            border: 1px solid #000;
            display: grid;
            grid-template-rows: 100px 100px 100px;
            grid-template-columns: 150px 150px 150px;
            column-gap: 10px;
            row-gap: 30px;
            grid-auto-flow: row;
            margin: 0 auto;
            margin-top: 10px;
            color: white;
            font-size: 30px;
        }

        .div1 {
            grid-column-start: 1;
            grid-column-end: 3;
            background: red;
        }

        .div2 {
            grid-column-start: 1;
            grid-column-end: 3;
            background: green;
        }

image.png

如果想提高空间利用率的话，可以设置dense来提高空间利用率：grid-auto-flow:row dense;

image.png

justify-items

  • 设置单元格的水平方向对齐方式
justify-items:start|end|center|stretch;
  • start 起始方向对齐
  • center 居中对齐
  • end 末尾方向对齐
  • stretch 延伸，以填满整个单元格，默认值
    .box {
        width: 500px;
        height: 480px;
        border: 1px solid #000;
        display: grid;
        grid-template-rows: 120px 120px 120px;
        grid-template-columns: 120px 120px 120px;
        column-gap: 5px;
        row-gap: 10px;
        justify-items: end;
        align-items: stretch;
        margin: 0 auto;
        margin-top: 5px;
        color: white;
        font-size: 30px;

    }

image.png

align-items

  • 设置单元格垂直方向对齐方式
align-items:start|end|center|stretch;

place-items

align-items 和 justify-items 的简写

align-items:stretch 和 justify-items:end 水平垂直对齐方式可以用简写的方式 place-items:stretch end

  • stretch代表垂直方向上的对齐方式
  • end代表水平方向的对齐方式

juejin.cn/post/718274…

justify-content

设置容器的水平方向对齐方式

justify-content:start|end|center|stretch|space-around|space-between|space-evenly;

  • start 从行首开始排列

  • center 在容器中居中排列

  • end 从行末开始排列

  • stretch 延伸，以填满整个容器，默认值

  • space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

  • space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

  • space-evenly 项目与项目之间的距离和项目与起始位置的距离都相同。

    .box {
        width: 500px;
        height: 580px;
        border: 1px solid #000;
        display: grid;
        grid-template-rows: 120px 120px 120px;
        grid-template-columns: 120px 120px 120px;
        column-gap: 10px;
        row-gap: 30px;
        justify-content: space-between;
        align-content: center;
        margin: 0 auto;
        margin-top: 10px;
        color: white;
        font-size: 30px;
    }

image.png

align-content

  • 设置容器的垂直方向对齐方式
align-content:start|end|center|stretch|space-around|space-between|space-evenly

place-content

align-content和justify-content的简写

align-content:center和 justify-content:space-between 水平垂直对齐方式可以用简写的方式 place-content:center space-between

  • center 代表垂直方向上的对齐方式
  • space-between代表水平方向的对齐方式

grid-auto-columns/grid-auto-rows

用来设置多出来的项目单元格的宽和高

设置一个三行三列的格子，并且多出第10个没有定义高度的格子，这个格子默认会自动拉满延伸到容器的底部。

    .box {
        width: 500px;
        height: 520px;
        border: 1px solid #000;
        display: grid;
        grid-template-rows: 120px 120px 120px;
        grid-template-columns: 120px 120px 120px;
        column-gap: 10px;
        row-gap: 30px;
        margin: 0 auto;
        margin-top: 10px;
        color: white;
        font-size: 30px;
    }

image.png

我们可以设置多出的格子的高度 grid-auto-rows:10px 如图所示，第10个格子的高度是10px：

image.png

如果排列的方式是先列后行，多出的格子默认是延伸到容器的右侧：

    .box {
        width: 500px;
        height: 520px;
        border: 1px solid #000;
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: 120px 120px 120px;
        grid-template-columns: 120px 120px 120px;
        column-gap: 10px;
        row-gap: 30px;
        margin: 0 auto;
        margin-top: 10px;
        color: white;
        font-size: 30px;
    }

image.png

我们可以设置多出的格子的宽度 grid-auto-columns:10px; 如图所示，第10个格子的高度是10px：

image.png

项目属性

grid-column-start/grid-column-end

用来指定item单元格的具体位置，根据在哪根网络线，在项目里设置，如图所示，设置N个列，就有N+1个列网络线。

grid-row-start/grid-row-end

行同理。用来指定item单元格的具体位置，根据在哪根网络线，在项目里设置，如图所示，设置N个行，就有N+1个行网络线

image.png

eg:例如设置第一个单元格占1个列格子，占两个行格子，第二个单元格占一个列格子，占两个行格子，紧跟在第一个单元格后面：

 .box {
        width: 500px;
        height: 520px;
        display: grid;
        width: 500px;
        height: 520px;
        grid-template-rows: 120px 120px 120px;
        grid-template-columns: 120px 120px 120px;
        column-gap: 10px;
        row-gap: 30px;
        margin: 0 auto;
        margin-top: 10px;
        color: white;
        font-size: 30px;
    }

    .div1 {
        background: red;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 3;
    }

    .div2 {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
        background: green;
    }

image.png

grid-row/grid-column

  • grid-row：grid-row-start和grid-row-end的简写
  • grid-column：grid-column-start和grid-column-end的简写

grid-column-start:3;grid-column-end:4;grid-row-start:1;grid-row-end:3; 可以简写为： grid-row:span 2;grid-column:span 1;，也可以简写为： grid-row:1 / 3;grid-column:3 / 4;

grid-area

grid-area用来指定item单元格的具体位置

使用方式1：

容器属性 grid-template-areas 一起使用：

  .box {
        border: 1px solid #000;
        display: grid;
        width: 500px;
        height: 520px;
        grid-template-rows: 120px 120px 120px;
        grid-template-columns: 120px 120px 120px;
        column-gap: 10px;
        row-gap: 30px;
        margin: 0 auto;
        margin-top: 10px;
        color: white;
        font-size: 30px;
        grid-template-areas: "a a c"
            "a a g"
            "i j k"
            "m n o";
    }

    .div1 {
        grid-area: a;
        background: red;
    }

    .div2 {
        background: green;
    }

div1设置了单元格放在a区域内，grid-area除了与容器属性 grid-template-areas 一起配合使用。

image.png

使用方式2：

单独来使用 grid-area:1 / 1 / 3 / 3;

grid-area: 1 / 2 / 4 / 3;
/* 开始行/开始列/结束行/结束列 */

其实和 grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3; 一个意思，也可以达到上图效果：

justify-self/align-self

设置单元格内容的水平垂直位置，和 justify-items、align-items属性的用法完全一致，但只作用于单个项目。

  • 水平方向上 justify-self:start|end|center|stretch;
  • 垂直方向上 align-self:start|end|center|stretch;
  • start 起始方向对齐
  • center 居中对齐
  • end末 尾方向对齐
  • stretch 延伸，以填满整个单元格，默认值
    .box {
        border: 1px solid #000;
        display: grid;
        width: 500px;
        height: 520px;
        grid-template-rows: 120px 120px 120px;
        grid-template-columns: 120px 120px 120px;
        column-gap: 10px;
        row-gap: 30px;
        margin: 0 auto;
        margin-top: 10px;
        color: white;
        font-size: 30px;
    }

    .div1 {
        background: red;
        justify-self: center;
        align-self: center;
        border: 3px solid #ccc;
    }

    .div2 {
        background: green;
        justify-self: end;
        align-self: start;
        border: 2px solid #ccc;
    }

place-self

align-self 和 justify-self 的简写

align-self:start; 和 justify-self:end; 水平垂直对齐方式可以用简写的方式 place-self:start end;

  • start 代表垂直方向上的对齐方式
  • end 代表水平方向的对齐方式
avatar
文章
阅读
粉丝