css除了flex布局我们还可以使用grid网格

站长

2023年05月22日 21:46 · 阅读数 15

grid网格概念

网格布局（Grid）是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

css除了flex布局我们还可以使用grid网格

CSS网格是一个用于web的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局

grid容器属性

css除了flex布局我们还可以使用grid网格

grid子项属性

css除了flex布局我们还可以使用grid网格

了解grid有哪些属性后我们如何定义grid网格呢

html布局

<div class="main">
    <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>

css样式

.main {
    width: 300px;
    height: 300px;
    margin: auto;
    display: grid;
    background: palevioletred;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

.main div {
    background: palegreen;
    text-align: center;
    line-height: 100px;
}

实现效果展示 css除了flex布局我们还可以使用grid网格

属性讲解

display: grid //将当前容器定义成一个网格布局容器;
grid-template-rows: 100px 100px 100px //将网格容器定义成3行，每行100px的高度;
grid-template-columns：100px 100px 100px //将网格容器定义成3列，每列100px的宽度;

这种写法对于行列数量少的布局还可以，如果行列都是10个还有一个简便一点的写法

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

布局单位

当然我们的布局单位也不仅仅只有px 还有百分比（%）、auto等也可以少列或者行

css样式

grid-template-columns: 100px 50% auto;
grid-template-rows: 100px 100px;

效果图 css除了flex布局我们还可以使用grid网格

fr的基础设置

css还给我们提供了另一种单位fr,是一种比例单位，我们可以设置1fr,2fr等等这么设置出来的效果和100px一样

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);

合并网格

<template>
  <div class="demo">
    <div class="main">
      <div class="main-a">1</div>
      <div class="main-b">2</div>
      <div class="main-c">3</div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss">
.main {
  display: grid;
  width: 500px;
  height: 500px;
  background: paleturquoise;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(3, auto);
  grid-template-areas:
    "a1 a1 a2"
    "a1 a1 a2"
    "a3 a3 a3";
  div {
    box-sizing: border-box;
    background: pink;
    border: 1px solid black;
  }
  .main-a {
    grid-area: a1;
  }
  .main-b {
    grid-area: a2;
  }
  .main-c {
    grid-area: a3;
  }
}
</style>

效果图 css除了flex布局我们还可以使用grid网格以上grid-template代码可以简写为

grid-template:
  "a1 a1 a2" 1fr
  "a1 a1 a2" 1fr
  "a3 a3 a3" 1fr
  /1fr 1fr 1fr
;

下面可以试试写下这个布局 css除了flex布局我们还可以使用grid网格

<template>
  <div class="demo">
    <div class="main">
      <div class="main-a">1</div>
      <div class="main-b">2</div>
      <div class="main-c">3</div>
      <div class="main-d">4</div>
      <div class="main-e">5</div>
    </div>
  </div>
</template>
<style lang="scss">
.main {
  display: grid;
  width: 1000px;
  height: 500px;
  background: paleturquoise;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(3, auto);
  grid-template-areas:
    "a1 a1 a2"
    "a1 a1 a4"
    "a3 a5 a4";
  grid-gap: 20px;
  div {
    box-sizing: border-box;
    background: pink;
    border: 1px solid black;
  }
  .main-a {
    grid-area: a1;
  }
  .main-b {
    grid-area: a2;
  }
  .main-c {
    grid-area: a3;
  }
  .main-d {
    grid-area: a4;
  }
  .main-e {
    grid-area: a5;
  }
}
</style>

显式网格和隐式网格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示网格和隐式网格</title>
    <style>
        .main{
            width: 300px;
            height: 300px;
            background: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px;
        }
        .main div{
            background: pink;
            border: 1px black solid;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

css除了flex布局我们还可以使用grid网格

如果不设置隐式网格，多出来的部分

<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

css除了flex布局我们还可以使用grid网格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示网格和隐式网格</title>
    <style>
        .main{
            width: 300px;
            height: 300px;
            background: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px;
            /** 默认row 就是行产生隐士网格*/
            grid-auto-flow: row;
            /**可以调节产生的隐式网格的高度*/
            grid-auto-rows: 100px;
        }
        .main div{
            background: pink;
            border: 1px black solid;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

效果图

css除了flex布局我们还可以使用grid网格