【CSS】Grid布局

最新推荐文章于 2025-07-17 13:44:37 发布

嗨Sirius

最新推荐文章于 2025-07-17 13:44:37 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

分类专栏：「前端」专栏 # 【前端基础（HTML JS CSS）】

本文链接：https://blog.csdn.net/weixin_43698328/article/details/114699998

「前端」专栏同时被 2 个专栏收录

68 篇文章

订阅专栏

【前端基础（HTML JS CSS）】

32 篇文章

订阅专栏

CSS Grid(网格)布局，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局(类似我们的excel)。（下面会写很多代码）

首先，你必须使用display：grid/inline-grid将容器元素定义为一个 grid(网格) 布局
然后用gird-template-columns和gird-template-rows设置列和行的尺寸，
也可以用grid-template-areas（上面两个代码的简写）来设置列和行。
然后通过grid-row-start、grid-row-end（上面两个简写grid-row：x/y）和grid-column-start、grid-column-end(上面两个简写grid-column：x/y)
将其子元素放入这个 grid(网格) 中。

  .container {
    display: grid;
    grid-template-columns: 10px 10px 10px;
    grid-template-rows: 10px 10px 10px;
  }

可以写成百分比

  .container {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 33.33% 33.33% 33.33%;
  }

可以写成fr，代表几份，均分占几份

  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr ;
  }

可以使用 repeat（）函数，简化重复的值

  .container {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(3, 33.33%);
  }

都可以实现一个这个效果：
在这里插入图片描述

grid-row-start、grid-row-end和grid-column-start、grid-column-end属性

grid-column-start属性：左边框所在的垂直网格线（列）
grid-column-end属性：右边框所在的垂直网格线（列）
grid-row-start属性：上边框所在的水平网格线（行）
grid-row-end属性：下边框所在的水平网格线（行）

上图1-9分别写了9个div代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

 <div class="container">
   <div class="box1">1</div>
   <div class="box2">2</div>
   <div class="box3">3</div>
   <div class="box4">4</div>
   <div class="box5">5</div>
   <div class="box6">6</div>
   <div class="box7">7</div>
   <div class="box8">8</div>
   <div class="box9">9</div>
 </div>
  
 
</body>
</html>

分布代码

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  border:1px solid red;
}
.box1 {
  grid-row-start:1 ;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
  
  border:1px solid ;
}
.box2 {
  grid-row-start:1 ;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
  border:1px solid ;
}
.box3 {
  grid-row-start:1 ;
  grid-row-end: 2;
  grid-column-start: 3;
  grid-column-end: 4;
  border:1px solid ;
}
.box4 {
  grid-row-start:2 ;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
  border:1px solid ;
}
.box5 {
  grid-row-start:2 ;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  border:1px solid ;
  
}
.box6 {
  grid-row-start:2 ;
  grid-row-end: 3;
  grid-column-start: 3;
  grid-column-end: 4;
  border:1px solid ;
 
}

.box7 {
  grid-row-start:3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 2;
  border:1px solid ;
  
  
}
.box8 {
  grid-row-start:3;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 3;
  border:1px solid ;
 
 
}
.box9 {  
  grid-row-start:3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 4;
  
  border:1px solid ;
}

参考文章