grid layout网格布局详解

最新推荐文章于 2025-10-31 16:13:19 发布

原创

最新推荐文章于 2025-10-31 16:13:19 发布 · 8k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#grid #网格布局 #grid css #grid layout #grid 网格

本文深入讲解CSS Grid布局，包括Grid的基本概念、特点、属性及应用技巧。从创建基本的Grid到掌握复杂的设计，如响应式布局、隐性网格与显性网格的控制，以及如何利用各种函数如repeat、minmax等进行精细化尺寸管理。

参考文档 MDN web docs

什么是grid layout

grid 是Web的二维布局系统。和html的表格有点像，由行和列组成，我们可以在上面设计每一个元素

grid的特点

grid layout 包括行、列、行间隙和列间隙
grid layout 可进行模板化设计
grid layout 是响应式布局方式
grid layout 的子元素可以对自己进行定位

grid css属性的基础知识

创建一个grid布局

.container {
   
   
  display: grid;
}

创建一个网格

.container {
   
   
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
.item {
   
   
  background-color: green;
  border-width: 1px;
  border-radius: 5px;
  border-style: solid;
}

<div class="container">
  <div class="item">11</div>
  <div class="item">22</div>
  <div class="item">33</div>
  <div class="item">44</div>
  <div class="item">55</div>
  <div class="item">66</div>
  <div class="item">77</div>
</div>

实际效果
在这里插入图片描述

隐性网格与显性网格

显性网格是指规划的网格之内的部分，隐性网格是指规划的网格之外的部分。
比如定义一个两行两列的网格，那么第一行第二行和第一列第二列的交叉的部分就属于显性网格，第三行和第三列及以外的所有元素都属于隐性网格

.container {
   
   
  display: grid;
  /*定义显性网格部分的列宽，共两行*/
  grid-template-columns: repeat(2, 100px);
  /*定义显性网格部分的行高，共两列*/
  grid-template-rows: repeat(2, 250px);
  /*定义隐性网格部分的行高*/
  grid-auto-rows: 200px;
  /*定义隐性网格部分的列宽*/
  grid-auto-columns: 50px;
}
.item {
   
   
  background-color: green;
  border-width: 1px;
  border-radius: 5px;
  border-style: solid;
}

<div class="container">
  <div class="item">11</div>
  <div class="item">22</div>
  <div class="item">33</div>
  <div class="item">44</div>
  <div class="item">55</div>
  <div style="grid-column: 3/4" class="item">66</div>
  <div class="item">77</div>