CSS布局(二）grid一篇搞定

最新推荐文章于 2025-06-25 16:24:16 发布

一颗大白菜呀

最新推荐文章于 2025-06-25 16:24:16 发布

阅读量2.7k

点赞数 28

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/internet__/article/details/145474946

2.1grid-template-columns 属性

2.2grid-template-rows 属性

2.3justify-content 属性

一、grid布局

1.1认识gird布局

网格是一组相交的水平线和垂直线，它定义了网格的列和行。

CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。

以下是一个简单的网页布局，使用了网格布局，包含六列和三行。

1.2grid布局重要概念

二、网格容器常见属性

2.1grid-template-columns 属性

grid-template-columns 属性定义了网格布局中的列的数量，它也可以设置每个列的宽度。

属性值是一个以空格分隔的列表，其中每个值定义相对应列的宽度。

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

2.2grid-template-rows 属性

grid-template-rows 属性设置每一行的高度。

属性值是一个以空格分隔的列表，其中每个值定义相对应行的高度：

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

2.3justify-content 属性

justify-content 属性用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

注意：网格的总宽度必须小于容器的宽度才能使 justify-content 属性生效。

.grid-container {
  display: grid;
  justify-content: space-around;
}

2.4align-content 属性

align-content 属性用于设置垂直方向上的网格元素在容器中的对齐方式。

注意：网格元素的总高度必须小于容器的高度才能使 align-content 属性生效。

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

三、网格元素常见属性

3.1grid-column 属性

grid-column 属性定义了网格元素列的开始和结束位置。

注意： grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。

我们可以参考行号来设置网格元素，也可以使用关键字 "span" 来定义元素将跨越的列数。

.item1 {
  grid-column: 1 / 5;
}

.item1 {
  grid-column: span 2;
}

3.2grid-row 属性

grid-row 属性定义了网格元素行的开始和结束位置。

注意： grid-row 是 grid-row-start 和 grid-row-end 属性的简写属性。

我们可以参考行号来设置网格元素，也可以使用关键字 "span" 来定义元素将跨越的行数。

3.3align-content 属性

grid-area 属性是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写。

以下实例设置 "item8" 从第 1 行开始和第 2 列开始，第 5 行和第 6 列结束。

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

3.4网格元素命名

grid-area 属性可以对网格元素进行命名。

命名的网格元素可以通过容器的 grid-template-areas 属性来引用。

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

进行布局

<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  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">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>
</html>

四、综合练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
  <style>
    .container{
      width: 100vw;
      height: 100vh;
      background-color: skyblue;
      display: grid;
      /* 设置行数和行高 */
      /* grid-template-rows: 100px 100px 200px; */
      /* 新的单位fr  剩余空间的分配比例 */
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      /* 设置列数和列宽 */
      /* grid-template-columns: 200px 200px 200px; */
      /* item之间的间距 */
      /* gap: 10px; */
      row-gap:10px ;
      column-gap: 10px;
    }
    .item{
      border: 1px orange solid;
      box-sizing: border-box;
      background-color: tomato;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: aliceblue;
    }
    .one{
      /* 跨列合并 */
      /*grid-column：start/end 或者 span 2 合并2个  */
      grid-column: 2/span 2;
    }
    .two{
      /* 跨行合并 */
      grid-row: span 2;
    }
    .area{
      grid-area: span 2 / span 2;
    }

  </style>
<body>
  <div class="container">
    <div class="item ">1</div>
    <div class="item one">2</div>
    <!-- <div class="item">3</div> -->
    <div class="item two">4</div>
    <div class="item area">5</div>
    <!-- <div class="item">6</div> -->
    <div class="item">7</div>
    <!-- <div class="item">8</div> -->
    <!-- <div class="item">9</div> -->
    <!-- <div class="item">10</div> -->
    <div class="item">11</div>
    <div class="item">12</div>

  </div>
</body>
</html>